/* section-index.css — the homepage's numbered section index ("HOME 01 · COLLECTION 02 · …", index.html .v3-idx / .v3-si)
   for an ordinary scrolling page (Fadi, Oct 22, 2026: "For the new build page adopt the same concept please"). First used by
   /new-builds.html; any page can use it: <nav class="si" data-si-nav aria-label="Page sections"> with one
   <a class="si-i" href="#section-id"><span>Label</span><b>01</b></a> per section, and data-si on each listed section;
   /assets/section-index.js marks the current one (class act + aria-current) and scrolls smoothly.
   The look is the homepage's, value for value: Jost 11px, letter-spacing .2em, uppercase, the number right-aligned after
   the label; the current item bright with a 1px underline, the rest muted. Over the hero (the first section) it is the full
   list in cream over the photograph; past the hero it moves up under the header and turns to the page's ink, and stays fully
   open (Fadi, Oct 6: no folding to one label), with the homepage's scrim panel on hover / keyboard focus.
   Computers only, as on the homepage (it is display:none there at 900 px and below): the page links this file with
   media="(min-width:901px)", so a phone neither shows the index nor waits for the file. On a computer the index has its own
   column: every listed section's right padding grows by --si-w, so no title, card or grid runs under the labels (the
   homepage's --idx-w). The homepage keeps its own copy inline (index.html): one more stylesheet there would cost its first
   paint a request. */
@media (min-width:901px){
  :root{--si-px:var(--col-edge); --si-w:208px; --si-head:58px;}   /* the page's side padding = the one column's edge (theme.css --col-edge, Oct 25); the index's column (its widest item, "More new homes 09" at 162px bold, + its 14px side padding past the hero + room — the homepage reserves 176px for its 147px); the sticky site header's height */
  section[data-si]{padding-right:calc(var(--si-px) + var(--si-w))!important; scroll-margin-top:var(--si-head);}
  section[data-si]:focus{outline:none;}   /* focus is moved to a section the index scrolled to (the next Tab continues there): the section itself is not a control */

  .si{position:fixed; right:var(--si-px); top:calc(var(--si-head) + 63px); z-index:60; display:flex; flex-direction:column; align-items:flex-end; margin:0; padding:0; border:1px solid transparent; border-radius:14px; transition:background .3s ease,border-color .3s ease,opacity .35s ease,visibility .35s;}
  .si-i{display:flex; align-items:baseline; gap:10px; padding:14px 0; font-family:Jost,sans-serif; font-size:11px; font-weight:400; letter-spacing:.2em; line-height:16px; text-transform:uppercase; color:rgba(244,243,238,.64); text-decoration:none; cursor:pointer; text-shadow:0 1px 14px rgba(0,0,0,.55); transition:color .3s ease;}
  /* each item is a 44 px tap target (14 + 16 + 14; Oct 26, 2026 — it was 34 px: 9 + 16 + 9) */
  .si-i b{font-weight:400; min-width:1.7em; text-align:right; opacity:.8;}
  .si-i:hover,.si-i.act{color:#F4F3EE;}
  .si-i.act{font-weight:500; box-shadow:inset 0 -1px 0 rgba(244,243,238,.8);}
  .si-i:focus-visible{outline:1px solid #B3AA8D; outline-offset:3px; border-radius:2px;}
  /* over the hero photograph: a faint backing so the labels read clearly (Fadi, Oct 22: "subtle, brand look, no hard box
     edges") — a soft tint of the page’s ground, an oval that fades to nothing at its edges (no box) */
  .si::before{content:""; position:absolute; inset:-56px -56px -56px -96px; z-index:-1; pointer-events:none;
    background:radial-gradient(farthest-side, rgba(16,15,10,.55) 0%, rgba(16,15,10,.42) 50%, rgba(16,15,10,.16) 78%, rgba(16,15,10,0) 100%);
    transition:opacity .35s ease;}
  .si.off::before{opacity:0;}

  /* past the hero: under the header, in the page's ink (dark: the homepage's --mut / --ink / --line2) */
  .si.off{top:calc(var(--si-head) + 5px); padding:2px 14px;}
  .si.off .si-i{color:#9a957f; text-shadow:none;}
  .si.off .si-i:hover,.si.off .si-i.act{color:#F4F3EE;}
  .si.off .si-i.act{box-shadow:inset 0 -1px 0 rgba(232,232,227,.16);}
  .si.off:hover,.si.off:focus-within{background:rgba(16,15,10,.96); border-color:rgba(179,170,141,.2); box-shadow:0 24px 60px rgba(0,0,0,.35);}

  /* the light theme (assets/theme.css: html without .sar-dark): the hero's photograph is washed to linen and its words turn
     to ink, so the index does too — the homepage's day values (--mut #67614B, --ink #26231A, --line2, --scrim, --line) */
  html:not(.sar-dark) .si-i{color:rgba(38,35,26,.9); text-shadow:none;}   /* was .66 (≈#706e68): over the hero photo it read 2.2–3.8:1 at 1024–2560 (audit C H5, Batch 3 probe) */
  html:not(.sar-dark) .si-i:hover,html:not(.sar-dark) .si-i.act{color:#26231A;}
  html:not(.sar-dark) .si-i.act{box-shadow:inset 0 -1px 0 rgba(38,35,26,.8);}
  html:not(.sar-dark) .si.off .si-i{color:#4A4536;}   /* was #67614B: over the hero photo at 1024–2560 it read 2.1–2.6:1 (audit C H5) */
  html:not(.sar-dark) .si.off .si-i:hover,html:not(.sar-dark) .si.off .si-i.act{color:#26231A;}
  html:not(.sar-dark) .si.off .si-i.act{box-shadow:inset 0 -1px 0 rgba(38,35,26,.2);}
  html:not(.sar-dark) .si.off:hover,html:not(.sar-dark) .si.off:focus-within{background:rgba(239,237,229,.96); border-color:rgba(84,78,46,.22); box-shadow:0 24px 60px rgba(0,0,0,.12);}
  html:not(.sar-dark) .si-i:focus-visible{outline-color:#544E2E;}
  html:not(.sar-dark) .si::before{background:radial-gradient(farthest-side, rgba(239,237,229,.97) 0%, rgba(239,237,229,.92) 50%, rgba(239,237,229,.5) 78%, rgba(239,237,229,0) 100%);}   /* a firmer oval in light: .9/.8/.32 left the labels at p10 1.1–3 over the photo */

  /* past the last listed section (the site footer): out of the way, and out of the tab order */
  .si.gone{opacity:0; visibility:hidden;}
}
/* very short computer windows: the full list would run into the hero's words — shown only past the hero (the homepage's rule) */
@media (min-width:901px) and (max-height:640px){ .si:not(.off){opacity:0; visibility:hidden;} }
@media (prefers-reduced-motion:reduce){ .si,.si-i{transition:none;} }