/* Stage 4B-12 — Shared lower-page first-view INDEX
   Owner for Stay / Experience / Koune / About.
   Legacy si/hs/ki/ab classes remain only for the existing page JS selectors. */

.fab-fv-index{
  --fab-fv-index-scale:1;
  --fab-fv-index-line:var(--line);
  --fab-fv-index-rule-color:currentColor;
  position:absolute;
  left:auto;
  top:19.25rem;
  display:grid;
  color:var(--brown);
  z-index:6;
  pointer-events:auto;
}

.fab-fv-index a{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:.9375rem;
  color:var(--brown);
  font-family:var(--serif);
  font-size:15px;
  font-weight:400;
  line-height:1.7;
  letter-spacing:.07em;
  pointer-events:auto;
  transition:color .65s var(--ease),transform .78s var(--ease),letter-spacing .78s var(--ease)!important;
}

.fab-fv-index a i{
  position:relative;
  display:block;
  width:1.875rem;
  height:1px;
  flex:0 0 1.875rem;
  overflow:hidden;
  background:var(--fab-fv-index-rule-color);
  opacity:.72;
  transform-origin:left center;
  transition:transform .78s var(--ease),opacity .65s var(--ease),background-color .65s var(--ease)!important;
}

.fab-fv-index a i::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--brown,#482d12);
  transform:translateX(-108%);
  transition:transform .82s var(--ease);
}

/* Page variables only. Layout itself remains shared. */
.fab-fv-index--stay{
  --fab-fv-index-scale:var(--si-scale,1);
  --fab-fv-index-line:var(--line);
  --fab-fv-index-rule-color:#777;
}
.fab-fv-index--experience{
  --fab-fv-index-scale:var(--hs-scale,1);
  --fab-fv-index-line:var(--hs-line);
}
.fab-fv-index--koune{
  --fab-fv-index-scale:var(--ki-scale,1);
  --fab-fv-index-line:var(--ki-line);
  --fab-fv-index-rule-color:#777;
}
.fab-fv-index--about{
  --fab-fv-index-scale:var(--ab-scale,1);
  --fab-fv-index-line:var(--ab-line);
}

/* HOW TO STAY retains its intentional visual order:
   left = 1/2/3, right = 4/5. */
.fab-fv-index--experience a:nth-child(1){grid-column:1;grid-row:1}
.fab-fv-index--experience a:nth-child(2){grid-column:1;grid-row:2}
.fab-fv-index--experience a:nth-child(3){grid-column:1;grid-row:3}
.fab-fv-index--experience a:nth-child(4){grid-column:2;grid-row:1}
.fab-fv-index--experience a:nth-child(5){grid-column:2;grid-row:2}

/* NEW MASTER v45 desktop contract.
   Same content-right position, 42px row rhythm and HOW TO STAY's 44px
   canonical column gap are shared across all four pages. */
@media (min-width:1041px){
  .fab-fv-index{
    left:auto!important;
    right:calc(150px + 80px)!important;
    width:max-content!important;
    max-width:none!important;
    grid-template-columns:max-content max-content!important;
    grid-auto-rows:calc(42px / var(--fab-fv-index-scale))!important;
    column-gap:calc(44px / var(--fab-fv-index-scale))!important;
    row-gap:0!important;
    align-items:start!important;
  }

  .fab-fv-index a{
    display:flex!important;
    align-items:center!important;
    gap:calc(15px / var(--fab-fv-index-scale))!important;
    min-width:0!important;
    white-space:nowrap!important;
  }

  .fab-fv-index a i{
    width:calc(30px / var(--fab-fv-index-scale))!important;
    min-width:calc(30px / var(--fab-fv-index-scale))!important;
    height:calc(1px / var(--fab-fv-index-scale))!important;
    flex:0 0 calc(30px / var(--fab-fv-index-scale))!important;
  }
}

/* Existing Tablet layout: keep the two-column INDEX and current spacing. */
@media (max-width:1040px){
  .fab-fv-index{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-auto-rows:auto;
    gap:0 18px!important;
    margin-top:30px!important;
    border-top:0!important;
  }

  .fab-fv-index a{
    box-sizing:border-box;
    min-height:48px!important;
    padding:10px 0!important;
    margin-top:0!important;
    border-top:0!important;
    border-bottom:1px solid var(--fab-fv-index-line)!important;
    font-size:12px!important;
    line-height:1.55!important;
    align-items:center!important;
  }

  .fab-fv-index a i{
    width:18px!important;
    min-width:18px!important;
    flex:0 0 18px!important;
  }

  .fab-fv-index:not(.fab-fv-index--experience) a:nth-child(-n+2){
    border-top:1px solid var(--fab-fv-index-line)!important;
  }

  .fab-fv-index--experience a:nth-child(1),
  .fab-fv-index--experience a:nth-child(4){
    border-top:1px solid var(--fab-fv-index-line)!important;
  }

  .fab-fv-index--experience a:nth-child(2),
  .fab-fv-index--experience a:nth-child(3),
  .fab-fv-index--experience a:nth-child(5){
    border-top:0!important;
  }
}

/* Smartphone contract:
   every grid row is exactly 48px, so viewport narrowing / two-line labels
   can never stretch the separator interval. */
@media (max-width:760px){
  .fab-fv-index{
    grid-auto-rows:48px!important;
    row-gap:0!important;
    align-items:stretch!important;
  }

  .fab-fv-index a{
    height:48px!important;
    min-height:48px!important;
    padding-top:0!important;
    padding-bottom:0!important;
    align-items:center!important;
  }
}

@media (hover:hover) and (pointer:fine) and (min-width:761px){
  .fab-fv-index a:hover,
  .fab-fv-index a:focus-visible{
    color:var(--brown,#482d12)!important;
    transform:translateX(4px);
    letter-spacing:.095em!important;
  }
  .fab-fv-index a:hover i,
  .fab-fv-index a:focus-visible i{
    transform:scaleX(1.34);
    opacity:1;
  }
  .fab-fv-index a:hover i::after,
  .fab-fv-index a:focus-visible i::after{
    transform:translateX(0);
  }
}

@media (prefers-reduced-motion:reduce){
  .fab-fv-index a,
  .fab-fv-index a i,
  .fab-fv-index a i::after{
    transition:none!important;
  }
}