.s-access-hero{
  
  --band-gap:var(--sp-8);
  
  --ob-cap:.017em;
  min-height:100svh;
  display:flex;
  align-items:stretch;
  padding-top:calc(var(--nav-h) + var(--sp-8));
  padding-bottom:var(--sp-8);
}

.s-access-hero__inner{
  flex:1 1 auto;
  width:100%;
  display:grid;
  grid-template-columns:repeat(var(--cols), minmax(0,1fr));
  grid-template-rows:auto minmax(0,1fr) auto;
  column-gap:var(--gutter);
  row-gap:0;
}

.s-access-hero .plate{
  position:absolute;
  inset:0;
  z-index:var(--z-field);
  overflow:hidden;
  pointer-events:none;
  background-color:var(--ink-1000);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.1'/%3E%3C/svg%3E"),
    radial-gradient(66% 58% at 84% 24%, var(--ink-700) 0%, var(--ink-850) 34%, transparent 72%),
    radial-gradient(54% 46% at 92% 94%, var(--ink-850) 0%, transparent 76%),
    linear-gradient(100deg, var(--ink-1000) 0%, var(--ink-1000) 38%, var(--ink-900) 76%, var(--ink-850) 100%);
  background-repeat:repeat, no-repeat, no-repeat, no-repeat;
}

.s-access-hero__ruling{
  position:absolute;
  inset:0;
  z-index:var(--z-field);
  pointer-events:none;
  background-image:repeating-linear-gradient(
    to bottom,
    var(--line) 0 var(--hair),
    transparent var(--hair) var(--tick)
  );
  opacity:var(--state-quiet-alpha);
  
  -webkit-mask-image:radial-gradient(52% 30% at 26% 30%, transparent 0%, transparent 44%, var(--ink-1000) 94%);
          mask-image:radial-gradient(52% 30% at 26% 30%, transparent 0%, transparent 44%, var(--ink-1000) 94%);
}

.s-access-hero .plate > picture,
.s-access-hero .plate > img,
.s-access-hero .plate > video,
.s-access-hero .plate > canvas{
  position:absolute;
  inset:0;
  z-index:var(--z-base);
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.s-access-hero .plate::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:var(--z-field);
  background:var(--scrim-head);
}

.s-access-hero__head{
  grid-column:1 / -1;
  grid-row:1;
  margin-bottom:var(--sp-7);
}
.s-access-hero__lintel{
  position:relative;
  margin:0 0 var(--sp-5);
}

.s-access-hero__eyebrow{ display:flex; }

.s-access-hero__h{
  --ob-stem  : .058em;
  --cap-trim : .080em;
  margin:calc(var(--cap-trim) * -1) 0 0;
  grid-column:1 / span 7;
  grid-row:2;
  
  align-self:start;
  max-width:none;
  font-size:min(var(--fs-hero), 15vw);
}

.s-access-hero__hl{
  padding-bottom:.12em;
  margin-bottom:-.12em;
}
.s-access-hero__hl--cap { margin-left:calc(var(--ob-cap) * -1); }
.s-access-hero__hl--stem{ margin-left:calc(var(--ob-stem) * -1); }

.s-access-hero__note{
  grid-column:8 / span 5;
  grid-row:2;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:stretch;
}

.s-access-hero__note::before{
  content:"";
  position:absolute;
  left:calc(var(--gutter) * -.5);
  top:0;
  bottom:calc(var(--band-gap) * -1);
  width:var(--hair);
  background:var(--line);
}

.s-access-hero__deck{
  --cap-trim:.102em;    
  position:relative;
  margin-top:calc(var(--cap-trim) * -1);
  max-width:var(--measure-display);
  
  line-height:1.06;
  color:var(--fg);
  text-wrap:balance;
  margin-left:calc(var(--ob-cap) * -1);   
}
.s-access-hero__status{
  position:absolute;
  
  left:calc(var(--gutter) * -.5 + var(--ob-cap) + var(--hair) * .5);
  
  top:calc(var(--cap-trim) + .359em);
  transform:translate(-50%, -50%);
}

.s-access-hero__body{
  max-width:none;
  margin-top:var(--sp-5);
  margin-bottom:var(--sp-7);
  color:var(--fg);
}

.s-access-hero__cta{
  
  align-self:start;
}
.s-access-hero__cta-mark{
  font-size:1.08em;
  line-height:1;
  transition:transform var(--dur-2) var(--ease-out);
}
.s-access-hero__cta:hover .s-access-hero__cta-mark{ transform:translateX(var(--sp-1)); }

.s-access-hero__index{
  grid-column:1 / -1;
  grid-row:3;
  margin-top:var(--band-gap);
}
.s-access-hero__sill{ margin:0; }

.s-access-hero__cells{
  display:grid;
  grid-template-columns:repeat(var(--cols), minmax(0,1fr));
  column-gap:var(--gutter);
  list-style:none;
  margin:0;
  padding:0;
}
.s-access-hero__cell{ grid-column:span 4; }
.s-access-hero__cell:nth-child(1){ grid-column:1 / span 4; }
.s-access-hero__cell:nth-child(2){ grid-column:5 / span 4; }
.s-access-hero__cell:nth-child(3){ grid-column:9 / span 4; }

.s-access-hero__route{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--sp-4);
  padding:var(--sp-5) 0 var(--sp-2);
  text-decoration:none;
  color:var(--fg);
}

.s-access-hero__route::after{
  content:"";
  position:absolute;
  left:0;
  
  top:calc((var(--tick-len) - var(--hair)) / -2);
  width:var(--hair);
  height:var(--tick-len);
  background:var(--line-strong);
  transition:background-color var(--dur-2) var(--ease-swap);
}
.s-access-hero__route:hover::after{ background:var(--fg); }

.s-access-hero__cell + .s-access-hero__cell .s-access-hero__route::before{
  content:"";
  position:absolute;
  left:calc(var(--gutter) * -.5);
  top:0;
  bottom:0;
  width:var(--hair);
  background:var(--line);
}
.s-access-hero__routebrow{ display:flex; }
.s-access-hero__routetitle{
  color:var(--fg-quiet);
  transition:color var(--dur-2) var(--ease-swap);
}
.s-access-hero__route:hover .s-access-hero__routetitle{ color:var(--fg); }

@media (max-width: 880px){
  .s-access-hero{ --band-gap:var(--sp-7); }

  
  .s-access-hero__inner{
    grid-template-rows:auto minmax(0,1fr) auto auto;
  }
  .s-access-hero__h{
    grid-column:1 / -1;
    grid-row:2;
  }
  .s-access-hero__note{
    grid-column:1 / -1;
    grid-row:3;
    margin-top:var(--sp-7);
    padding-top:var(--sp-5);
    border-top:var(--hair) solid var(--line);
  }
  .s-access-hero__note::before{ display:none; }
  
  .s-access-hero__status{
    position:static;
    display:block;
    transform:none;
    margin-bottom:var(--sp-3);
  }

  .s-access-hero__index{ grid-row:4; }
  .s-access-hero__cell:nth-child(1),
  .s-access-hero__cell:nth-child(2),
  .s-access-hero__cell:nth-child(3){ grid-column:1 / -1; }
  
  .s-access-hero__cell + .s-access-hero__cell .s-access-hero__route{
    border-top:var(--hair) solid var(--line);
  }
  .s-access-hero__cell + .s-access-hero__cell .s-access-hero__route::before{
    display:none;
  }
  .s-access-hero__route{
    flex-direction:row;
    align-items:baseline;
    gap:var(--sp-5);
    padding-top:var(--sp-4);
    padding-bottom:var(--sp-4);
  }
  .s-access-hero__routebrow{ flex:0 0 auto; min-width:11ch; }
}

@media (max-width: 760px){
  .s-access-hero{
    --band-gap:var(--sp-6);
    padding-top:calc(var(--nav-h) + var(--sp-7));
    padding-bottom:var(--sp-8);
  }
  .s-access-hero__head{ margin-bottom:var(--sp-6); }
  
  .s-access-hero__note{ margin-top:var(--sp-6); }
  
  
  .s-access-hero__route{
    flex-direction:column;
    gap:var(--sp-3);
    padding-top:var(--sp-4);
    padding-bottom:var(--sp-4);
  }
  .s-access-hero__routebrow{ min-width:0; }
  .s-access-hero__routetitle{ font-size:var(--fs-statement); }
}

@media (max-height: 820px){
  .s-access-hero{
    --band-gap:var(--sp-7);
    padding-top:calc(var(--nav-h) + var(--sp-7));
    padding-bottom:var(--sp-7);
  }
  .s-access-hero__head { margin-bottom:var(--sp-6); }
  .s-access-hero__body { margin-top:var(--sp-4); }
  .s-access-hero__body { margin-bottom:var(--sp-6); }
}