.hit{

  --line-x:calc(15vw + 100px);

  --row-right:15vw;

  --q1:#2D1B56;  --q1-tint:#ECE7F4;  --q1-ink:#E0D0F8;
  --q2:#E8B33C;  --q2-tint:#FCF4E7;  --q2-ink:#2A1A00;
  --q3:#2A6042;  --q3-tint:#EDEFEA;  --q3-ink:#C8F0D8;
  --q4:#FF7A00;  --q4-tint:#FBEADB;  --q4-ink:#2A1A00;

  position:relative;

  height:260vh;

  margin-top:80px;
}

.hit__stage{
  position:sticky;
  top:0;
  height:100vh;
  background-color:var(--bg);
  background-image:radial-gradient(circle, rgba(0,0,0,0.18) 1px, transparent 1px);
  background-size:28px 28px;
  background-position:0 calc(var(--dot-y, 0px) * -1);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:0;
  overflow:hidden;
}

.hit__head{
  padding:0 var(--row-right) 0 var(--line-x);
  flex:0 0 auto;
}

.hit__title{
  font-family:'Roboto','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:clamp(0.79rem, 3.1vw, 3.06rem);
  font-weight:400;
  letter-spacing:-0.03em;
  line-height:1.02;
  color:var(--text);
  margin:0 0 20px;
}

.hit__lede{
  font-family:'Roboto','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:16px;
  font-weight:400;
  line-height:1.45;
  color:var(--text);
  margin:0 0 44px;

  max-width:52ch;
}

.hit__row{
  display:flex;
  align-items:stretch;
  gap:10px;
  padding:0 var(--row-right) 0 var(--line-x);

  height:min(485px, 52vh);
  flex:0 0 auto;
}

.hit-card{

  --a:0;
  --accent:var(--q1);
  --tint:var(--q1-tint);
  --on:var(--q1-ink);

  position:relative;
  flex:var(--w, 16) 1 0;
  min-width:148px;
  overflow:hidden;
  border-radius:20px;
  background:var(--tint);
  border:1px solid rgba(26,26,24,calc(.05 + var(--a) * .04));

  box-shadow:
    0 1px 2px rgba(26,26,24,.04),
    0 calc(4px + var(--a) * 14px) calc(12px + var(--a) * 26px) rgba(26,26,24,calc(.04 + var(--a) * .06));
  padding:28px 24px 26px;
  text-align:left;
  font:inherit;
  color:inherit;

  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;

  transition:box-shadow .3s ease, border-color .3s ease, transform .3s ease;
  will-change:flex-grow;
}
.hit-card:nth-child(1){ --accent:var(--q1); --tint:var(--q1-tint); --on:var(--q1-ink); }
.hit-card:nth-child(2){ --accent:var(--q2); --tint:var(--q2-tint); --on:var(--q2-ink); }
.hit-card:nth-child(3){ --accent:var(--q3); --tint:var(--q3-tint); --on:var(--q3-ink); }
.hit-card:nth-child(4){ --accent:var(--q4); --tint:var(--q4-tint); --on:var(--q4-ink); }

@media (hover: hover) and (min-width: 900px){
  .hit-card:hover{ transform:translateY(-3px); }

  .hit-card.is-active:hover{ transform:translateY(-1px); }
}

.hit-card__icon{
  position:relative; z-index:1;
  width:52px; height:52px;
  border-radius:50%;
  background:var(--accent);
  display:grid; place-items:center;
  margin:0 0 28px;

  transform:scale(calc(1 + var(--a) * .06));
  transform-origin:left center;
  transition:transform .25s ease;
  flex:0 0 auto;

  align-self:flex-start;
}
.hit-card__icon svg{ width:25px; height:25px; display:block; stroke:var(--on); fill:none;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

.hit-card__art{
  position:absolute;
  right:20px; bottom:18px;
  width:105px; height:102px;
  color:var(--accent);
  opacity:calc(.28 + var(--a) * .3);
  pointer-events:none;
  background-image:radial-gradient(currentColor 1.15px, transparent 1.3px);
  background-size:7px 7px;
  -webkit-mask-image:linear-gradient(#000 0 0), linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  mask-image:linear-gradient(#000 0 0), linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:67px 46px, 55px 57px, 62px 41px;
  mask-size:67px 46px, 55px 57px, 62px 41px;
  -webkit-mask-position:1px 0, 52px 28px, 8px 70px;
  mask-position:1px 0, 52px 28px, 8px 70px;
  transition:opacity .3s ease;
}

.hit-card__label{
  font-family:'Roboto','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:0.82rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--accent);
  display:block;
  padding-bottom:11px;
  margin-bottom:22px;
  border-bottom:1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  white-space:nowrap;
}

.hit-card__q{
  font-family:'Roboto','Helvetica Neue',Helvetica,Arial,sans-serif;

  font-size:calc(20px + var(--a) * 4px);
  font-weight:400;
  letter-spacing:-0.025em;

  line-height:1.08;
  margin:0;
  position:relative; z-index:1;
  color:var(--text);
}

.hit-card__body{
  font-family:'Roboto','Helvetica Neue',Helvetica,Arial,sans-serif;

  font-size:1rem;
  font-weight:400;
  line-height:1.6;
  color:var(--text);
  margin:22px 0 0;
  position:relative; z-index:1;
  max-width:46ch;

  opacity:clamp(0, calc((var(--a) - .55) / .4), 1);
  transform:translateY(calc((1 - clamp(0, calc((var(--a) - .55) / .4), 1)) * 10px));

  visibility:visible;
}
.hit-card:not(.is-active) .hit-card__body{ pointer-events:none; }

.hit__closing{
  display:flex;
  align-items:center;
  gap:18px;
  margin:26px var(--row-right) 0 var(--line-x);
  padding:20px 26px;
  border-radius:16px;
  background:rgba(255,255,255,.66);
  border:1px solid rgba(26,26,24,.05);
  flex:0 0 auto;
}
.hit__closing-mark{
  flex:0 0 auto;
  width:44px; height:44px;
  border-radius:50%;
  background:#1A1714;
  display:grid; place-items:center;
}
.hit__closing-mark svg{ width:20px; height:20px; stroke:#fff; fill:none; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round; }
.hit__closing p{
  font-family:'Roboto','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.45;
  color:var(--text);
  margin:0;
}

.hit-cursor{
  flex-direction:column;
  gap:16px;
  line-height:1;
}

.hit-cursor svg{ width:20px; height:20px; display:block; fill:#fff; stroke:#1A1714;
  stroke-width:1.1; stroke-linejoin:round; stroke-linecap:round; }

.hit-cursor{ transform:translate(-50%, -50%) scale(0.6); }
.hit-cursor.is-visible{ transform:translate(-50%, -50%) scale(1); }

@media (hover: hover) and (min-width: 900px){

  .hit__row.is-cursor-live,
  .hit__row.is-cursor-live .hit-card{ cursor:none; }
}

@media (max-width: 899px){
  .hit{
    --line-x:28px;
    --row-right:28px;

    height:auto;

    margin-top:0;
    margin-bottom:0;
    padding:60px 0 190px;
  }
  .hit__stage{
    position:static;
    height:auto;
    display:block;
    overflow:visible;
    padding:0;

    background:none;
  }

  .hit__head{
    position:static;
    opacity:1;
    transform:none;
    padding:0 var(--row-right) 0 var(--line-x);
    pointer-events:auto;
  }
  .hit__lede{ font-size:15px; margin:0 0 40px; max-width:none; }

  .hit__row{
    display:block;
    height:auto;
    padding:40px 20px 60px;
    transform:none;
  }

  .hit-card{

    --a:1;
    position:sticky;
    display:block;
    width:100%;
    min-width:0;
    padding:28px 28px 26px;
    opacity:0;
    transform:translateY(28px);
    transition:opacity .5s ease, transform .5s ease;

    box-shadow:0 -1px 0 rgba(26,26,24,.05), 0 -10px 30px rgba(26,26,24,.07);
  }
  .hit-card.is-visible{ opacity:1; transform:translateY(0); }

  .hit-card:nth-child(1){ top:14vh; }
  .hit-card:nth-child(2){ top:calc(14vh + 14px); }
  .hit-card:nth-child(3){ top:calc(14vh + 28px); }
  .hit-card:nth-child(4){ top:calc(14vh + 42px); }

  .hit-card__icon{ margin:0 0 26px; transform:none; }
  .hit-card__q{ font-size:22px; }
  .hit-card__body{ opacity:1; transform:none; }

  .hit-card__art{ right:16px; top:12px; bottom:auto; opacity:.5; }

  .hit__dots{ display:none; }

  .hit__closing{
    position:static;
    opacity:1;
    transform:none;
    pointer-events:auto;
    margin:0 var(--row-right) 0 var(--line-x);
  }
}

.hit-card__head{ display:contents; }

@media (min-width: 900px){
  .hit__dots{ display:none; }
}

@media (max-width: 699px){
  .hit__title{ font-size:clamp(1.96rem, 7.7vw, 3.5rem); line-height:1.05; }
}

@media (prefers-reduced-motion: reduce){
  .hit{ height:auto; }
  .hit__stage{ position:static; height:auto; display:block; padding:0; overflow:visible; }
  .hit__head{ position:static; opacity:1; transform:none; padding:0 var(--row-right) 0 var(--line-x); }
  .hit__row{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; height:auto; }
  .hit-card{ position:static; inset:auto; --a:1; --y:0; transform:none; opacity:1;
    min-width:0; pointer-events:auto; }
  .hit-card__body{ opacity:1; transform:none; }
  .hit__closing{ --close:1; position:static; opacity:1; transform:none;
    margin:26px var(--row-right) 0 var(--line-x); }
  .hit__dots{ display:none; }
  .hit-cursor{ display:none !important; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 899px){

  .hit__row{ display:block; }
  .hit-card{ opacity:1; transform:none; transition:none; }
}