.front-story{min-height:calc(100vh - 138px);background:#fff}
.front-story__header{position:sticky;top:52px;z-index:30;display:flex;align-items:center;gap:9px;padding:14px 16px 12px;border-bottom:1px solid transparent;background:#fff}
.front-story__back{display:grid;margin-left:-2px;color:#1a1a1a;text-decoration:none;place-items:center}
.front-story__back .material-symbols-outlined{font-size:24px}
.front-story__header h1{margin:0;font-size:21px;font-weight:800;letter-spacing:-.4px}
.front-story__header p{margin:2px 0 0;color:#767676;font-size:13px}
.front-story__content{padding:16px}
.front-story-featured{position:relative;display:block;overflow:hidden;aspect-ratio:16/9;border-radius:16px;box-shadow:0 4px 14px rgb(0 0 0/12%);color:#fff;text-decoration:none}
.front-story-featured__image{display:block;width:100%;height:100%;object-fit:cover}
.front-story-featured__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgb(0 0 0/0%),rgb(0 0 0/55%))}
.front-story-featured__copy{position:absolute;right:14px;bottom:14px;left:14px;display:block}
.front-story-featured__tags{display:flex;flex-wrap:wrap;gap:5px}
.front-story-featured__tag{display:inline-block;padding:4px 9px;border-radius:7px;background:#e6007e;font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase}
.front-story-featured__title{display:block;margin-top:8px;font-size:19px;font-weight:800;line-height:1.2;text-shadow:0 1px 5px rgb(0 0 0/40%)}
.front-story-featured__meta{display:block;margin-top:5px;font-size:12px;opacity:.92}
.front-story-list{display:flex;flex-direction:column;gap:14px;margin-top:18px}
.front-story-card{display:flex;gap:13px;color:#1a1a1a;text-decoration:none}
.front-story-card__media{overflow:hidden;flex:0 0 40%;aspect-ratio:1/1;border-radius:13px;box-shadow:0 3px 9px rgb(0 0 0/10%)}
.front-story-card__media img{display:block;width:100%;height:100%;object-fit:cover}
.front-story-card__copy{display:flex;min-width:0;flex:1;flex-direction:column;justify-content:flex-start}
.front-story-card__tags{display:flex;flex-wrap:wrap;gap:5px;align-self:flex-start}
.front-story-card__tag{display:inline-block;padding:3px 8px;border-radius:6px;background:#fce4f1;color:#e6007e;font-size:10px;font-weight:800;letter-spacing:.4px;text-transform:uppercase}
.front-story-card__title{display:-webkit-box;overflow:hidden;margin-top:6px;font-size:15px;font-weight:700;line-height:1.3;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.front-story-card__cta{display:inline-flex;align-self:flex-start;margin-top:auto;padding-top:10px;color:#1a1a1a;font-size:12px;font-weight:800;line-height:1.3}
.front-story-card__cta::after{margin-left:4px;content:"→"}
.front-story-featured:focus-visible,.front-story-card:focus-visible,.front-story__back:focus-visible{outline:2px solid #e6007e;outline-offset:3px}
@media(max-width:340px){.front-story__content{padding-right:12px;padding-left:12px}.front-story-card{gap:10px}.front-story-card__media{flex-basis:38%}}

@media (min-width: 1024px) {
  .front-story {
    box-sizing: border-box;
    width: min(100%, 1200px);
    min-height: calc(100vh - 72px);
    margin: 0 auto;
    padding: 44px 32px 80px;
    background: #fff;
  }

  .front-story__header {
    position: relative;
    top: auto;
    z-index: 1;
    gap: 18px;
    padding: 34px 40px;
    border-bottom: 0;
    background: transparent;
  }

  .front-story__back {
    width: 48px;
    height: 48px;
    margin-left: 0;
    border: 1px solid rgb(230 0 126 / 12%);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 10px 24px rgb(230 0 126 / 10%);
    transition: transform var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard), border-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard), color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
  }

  .front-story__content {
    padding: 34px 0 0;
  }

  .front-story-featured {
    aspect-ratio: 1200 / 460;
    border: 1px solid rgb(240 230 236 / 0%);
    border-radius: 32px;
    box-shadow: 0 20px 54px rgb(92 24 63 / 13%);
    transition: transform var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard), border-color var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard), box-shadow var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard);
  }

  .front-story-featured__scrim {
    background: linear-gradient(90deg, rgb(34 5 24 / 76%), rgb(34 5 24 / 22%) 54%, rgb(34 5 24 / 0%));
  }

  .front-story-featured__copy {
    right: auto;
    bottom: 44px;
    left: 44px;
    max-width: 620px;
  }

  .front-story-featured__tag,
  .front-story-card__tag {
    border-radius: 999px;
    font-size: 11px;
  }

  .front-story-featured__title {
    margin-top: 14px;
    font-size: clamp(34px, 3.5vw, 48px);
    letter-spacing: -1.2px;
    line-height: 1.05;
  }

  .front-story-featured__meta {
    margin-top: 12px;
    font-size: 14px;
  }

  .front-story-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 28px;
  }

  .front-story-card {
    min-width: 0;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    border: 1px solid #f0e6ec;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 14px 34px rgb(92 24 63 / 9%);
    transition: transform var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard), border-color var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard), box-shadow var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard);
  }

  .front-story-card__media {
    width: 100%;
    flex: none;
    aspect-ratio: 16 / 10;
    border-radius: 0;
    box-shadow: none;
  }

  .front-story-card__copy {
    padding: 18px 20px 20px;
  }

  .front-story-card__title {
    margin-top: 10px;
    font-size: 20px;
    letter-spacing: -.35px;
  }

  .front-story-card__cta {
    padding-top: 18px;
    font-size: 14px;
  }


  .front-story__back:focus-visible,
  .front-story-featured:focus-visible,
  .front-story-card:focus-visible {
    outline: 3px solid rgb(230 0 126 / 30%);
    outline-offset: 4px;
  }
}

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .front-story__back:hover,
  .front-story__back:focus-visible,
  .front-story-featured:hover,
  .front-story-featured:focus-visible,
  .front-story-card:hover,
  .front-story-card:focus-visible {
    border-color: rgb(230 0 126 / 28%);
    box-shadow: 0 20px 44px rgb(92 24 63 / 14%);
    transform: translateY(-3px);
  }

  .front-story__back:hover,
  .front-story__back:focus-visible {
    color: #e6007e;
  }
}

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .front-story__back,
  .front-story-featured,
  .front-story-card {
    transition: none;
  }

  .front-story__back:hover,
  .front-story__back:focus-visible,
  .front-story-featured:hover,
  .front-story-featured:focus-visible,
  .front-story-card:hover,
  .front-story-card:focus-visible {
    transform: none;
  }
}