.knowledge-article-page { min-height: 100svh; background: #f4f0e9; }
.knowledge-article-header { background: rgba(248,245,239,.98); }
.knowledge-article-hero { padding: clamp(42px,7vw,100px) clamp(22px,8vw,130px) clamp(64px,9vw,120px); color: #fff; background: var(--ink); }
.knowledge-article-hero > * { max-width: 900px; }
.knowledge-article-breadcrumb { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 42px; color: #b7c9d0; font-size: 12px; }
.knowledge-article-breadcrumb a { font-weight: 800; text-underline-offset: 3px; }
.knowledge-article-kicker { margin: 0 0 15px; color: var(--lime); font-size: 11px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.knowledge-article-hero h1 { margin: 0; font-size: clamp(48px,6.2vw,92px); line-height: .9; letter-spacing: -.06em; }
.knowledge-article-hero p:not(.knowledge-article-kicker) { margin: 28px 0 0; color: #cad7dc; font-size: clamp(17px,1.7vw,24px); font-weight: 750; line-height: 1.52; }
.knowledge-article-hero p + p { margin-top: 16px; }
.knowledge-article-hero--with-photo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 330px); column-gap: clamp(34px, 6vw, 92px); align-items: start; }
.knowledge-article-hero--with-photo .knowledge-article-breadcrumb { grid-column: 1 / -1; }
.knowledge-article-hero--with-photo > :not(.knowledge-article-breadcrumb):not(.knowledge-article-hero__photo) { grid-column: 1; }
.knowledge-article-hero__photo { grid-column: 2; grid-row: 2 / span 5; align-self: center; margin: 0; overflow: hidden; box-shadow: 16px 16px 0 rgba(215,245,46,.28); }
.knowledge-article-hero__photo img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 48%; }
.knowledge-article-content { max-width: 940px; margin: 0 auto; padding: clamp(70px,10vw,145px) clamp(22px,5vw,48px); }
.knowledge-article-content section { padding-bottom: clamp(55px,7vw,92px); }
.knowledge-article-content section + section { padding-top: clamp(25px,4vw,46px); border-top: 1px solid rgba(6,43,64,.16); }
.knowledge-article-content h2 { max-width: 740px; margin: 0 0 25px; color: var(--ink); font-size: clamp(34px,4.2vw,60px); line-height: .94; letter-spacing: -.045em; }
.knowledge-article-content p { max-width: 760px; margin: 0 0 19px; color: #45616f; font-size: 17px; line-height: 1.78; }
.knowledge-article-content blockquote { max-width: 760px; margin: 30px 0; padding: clamp(25px,4vw,42px); color: var(--ink); background: var(--lime); font-size: clamp(21px,2.5vw,32px); font-weight: 900; line-height: 1.3; }
.knowledge-article-summary { padding: clamp(34px,5vw,56px) !important; background: #fff; box-shadow: 16px 16px 0 rgba(6,43,64,.08); }
.knowledge-article-summary + section { border-top: 0; }
.knowledge-article-list { max-width: 760px; margin: 0 0 24px; padding-left: 24px; color: #45616f; font-size: 17px; line-height: 1.78; }
.knowledge-article-list li + li { margin-top: 6px; }
.knowledge-article-figure { max-width: 760px; margin: clamp(30px,5vw,52px) 0; overflow: hidden; background: #fff; box-shadow: 15px 15px 0 rgba(6,43,64,.08); }
.knowledge-article-figure img { display: block; width: 100%; height: auto; }
.knowledge-article-figure figcaption { padding: 14px 18px; color: #45616f; font-size: 13px; font-weight: 750; line-height: 1.45; }
.club-page-hero { display: grid; grid-template-columns: minmax(0,1fr) minmax(210px,290px); column-gap: clamp(38px,7vw,110px); align-items: center; }
.club-page-hero .knowledge-article-breadcrumb { grid-column: 1 / -1; }
.club-page-logo { grid-column: 2; grid-row: 2 / span 3; width: 100%; margin: 0; padding: clamp(16px,2.2vw,27px); background: #fff; box-shadow: 16px 16px 0 var(--orange); transform: rotate(2deg); }
.club-page-logo img { display: block; width: 100%; height: auto; }
.knowledge-hub-content { max-width: 1120px; margin: 0 auto; padding: clamp(70px,10vw,145px) clamp(22px,5vw,48px); }
.knowledge-hub-hero { padding-top: clamp(30px,3.5vw,52px); padding-bottom: clamp(38px,4.5vw,68px); }
.knowledge-hub-hero .knowledge-article-breadcrumb { margin-bottom: clamp(22px,3vw,34px); }
.knowledge-hub-hero h1 { font-size: clamp(48px,5.2vw,74px); }
.knowledge-hub-hero p:not(.knowledge-article-kicker) { max-width: 790px; margin-top: 20px; font-size: clamp(16px,1.35vw,20px); }
.knowledge-hub-content { padding-top: clamp(38px,4.5vw,68px); padding-bottom: clamp(60px,7vw,100px); }
.knowledge-hub-heading h2 { margin: 0; color: var(--ink); font-size: clamp(38px,5vw,70px); line-height: .93; letter-spacing: -.05em; }
.knowledge-hub-list { display: grid; gap: 18px; margin-top: clamp(35px,5vw,60px); }
.knowledge-hub-card { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 30px; align-items: end; padding: clamp(26px,4vw,48px); background: #fff; box-shadow: 16px 16px 0 rgba(6,43,64,.08); }
.knowledge-hub-card p { max-width: 690px; margin: 0; color: #45616f; font-size: 16px; line-height: 1.65; }
.knowledge-hub-card div > p:first-child { margin-bottom: 12px; color: var(--orange); font-size: 11px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.knowledge-hub-card h3 { max-width: 730px; margin: 0 0 16px; color: var(--ink); font-size: clamp(28px,3.7vw,48px); line-height: .96; letter-spacing: -.04em; }
.knowledge-hub-card a { display: inline-flex; gap: 20px; align-items: center; justify-content: space-between; min-height: 50px; padding: 13px 17px; color: white; background: var(--orange); font-size: 14px; font-weight: 900; text-decoration: none; white-space: nowrap; }
.knowledge-hub-card a:is(:hover,:focus-visible) { color: var(--ink); background: var(--lime); }
.knowledge-hub-note { margin: 34px 0 0; color: #45616f; font-size: 15px; line-height: 1.6; }
.passes-guide-helper { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 35px; align-items: end; padding: clamp(34px,5vw,56px) !important; color: #fff; background: var(--ink); }
.passes-guide-helper + section { border-top: 0; }
.passes-guide-helper h2 { color: #fff; }
.passes-guide-helper p:not(.knowledge-article-kicker) { color: #cad7dc; }
.passes-guide-helper a { display: inline-flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 54px; padding: 15px 20px; color: var(--ink); background: var(--lime); font-size: 14px; font-weight: 900; text-decoration: none; white-space: nowrap; }
.passes-guide-helper a:is(:hover,:focus-visible) { color: #fff; background: var(--orange); }
.pass-explainer { max-width: 860px; margin: clamp(34px,5vw,58px) 0; background: #fff; box-shadow: 16px 16px 0 rgba(6,43,64,.08); }
.pass-explainer__canvas { position: relative; min-height: 455px; padding: clamp(30px,5vw,58px); overflow: hidden; background: linear-gradient(145deg,#e3edf0 0%,#f8f6f1 63%); }
.pass-explainer__card { position: absolute; top: 58px; left: clamp(28px,6vw,86px); z-index: 1; display: flex; flex-direction: column; width: min(310px,44vw); min-height: 315px; padding: 25px; color: #fff; background: linear-gradient(150deg,#0b5069,#062b40 66%); box-shadow: 12px 14px 0 rgba(6,43,64,.2); transform: rotate(-3deg); }
.pass-explainer__card::after { position: absolute; right: -30px; bottom: -42px; width: 160px; height: 160px; border: 26px solid rgba(194,230,35,.9); border-radius: 50%; content: ''; }
.pass-explainer__card > p { margin: 0 0 21px; color: #c2e623; font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.pass-explainer__card h3 { margin: 0 0 7px; font-size: 42px; line-height: .9; letter-spacing: -.06em; }
.pass-explainer__card > span { color: #c4d5db; font-size: 13px; font-weight: 700; }
.pass-explainer__card > div { position: relative; z-index: 1; margin-top: auto; }
.pass-explainer__card small { display: block; margin-bottom: 4px; color: #c4d5db; font-size: 12px; font-weight: 800; }
.pass-explainer__card strong { font-size: 45px; line-height: 1; letter-spacing: -.06em; }
.pass-explainer__card em { font-size: 18px; font-style: normal; }
.pass-explainer__card footer { position: relative; z-index: 1; margin-top: 19px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.35); color: #fff; font-size: 12px; font-weight: 800; }
.pass-explainer__note { position: absolute; z-index: 2; display: flex; gap: 10px; align-items: center; max-width: 225px; color: var(--ink); font-size: 13px; font-weight: 850; line-height: 1.35; }
.pass-explainer__note::before { position: absolute; height: 1px; background: var(--orange); content: ''; transform-origin: left center; }
.pass-explainer__note b { display: grid; flex: 0 0 25px; width: 25px; height: 25px; place-items: center; color: #fff; background: var(--orange); border-radius: 50%; }
.pass-explainer__note--entries { top: 225px; right: clamp(20px,4vw,58px); }
.pass-explainer__note--entries::before { right: 100%; width: clamp(45px,8vw,118px); transform: rotate(0deg); }
.pass-explainer__note--validity { right: clamp(20px,4vw,58px); bottom: 55px; }
.pass-explainer__note--validity::before { right: 100%; width: clamp(55px,11vw,150px); transform: rotate(12deg); }
.pass-explainer__note--status { top: 67px; left: calc(clamp(28px,6vw,86px) + min(310px,44vw) + 18px); }
.pass-explainer__note--status::before { bottom: -30px; left: 10px; width: 62px; transform: rotate(105deg); }
.pass-explainer figcaption { padding: 15px 20px; color: #45616f; font-size: 13px; font-weight: 750; line-height: 1.45; }
.stories-hub-card { grid-template-columns: minmax(180px,260px) minmax(0,1fr) auto; align-items: stretch; padding: 0; overflow: hidden; }
.stories-hub-card > picture { min-height: 260px; }
.stories-hub-card > picture img { display: block; width: 100%; height: 100%; object-fit: cover; }
.stories-hub-card > div { display: flex; flex-direction: column; justify-content: center; padding: clamp(26px,4vw,48px); }
.stories-hub-card > a { align-self: end; margin: 0 clamp(26px,4vw,48px) clamp(26px,4vw,48px) 0; }
@media (max-width: 680px) {
  .knowledge-article-hero { padding: 28px 20px 64px; }
  .knowledge-article-breadcrumb { margin-bottom: 28px; }
  .knowledge-article-hero h1 { font-size: clamp(46px,13.5vw,68px); }
  .knowledge-article-hero--with-photo { display: block; }
  .knowledge-article-hero__photo { width: min(300px, 86vw); margin: 34px 0 0; }
  .knowledge-article-content { padding: 65px 20px 90px; }
  .knowledge-article-summary { box-shadow: 10px 10px 0 rgba(6,43,64,.08); }
  .knowledge-article-figure { box-shadow: 10px 10px 0 rgba(6,43,64,.08); }
  .knowledge-hub-content { padding: 65px 20px 90px; }
  .knowledge-hub-hero { padding-top: 28px; padding-bottom: 50px; }
  .knowledge-hub-content { padding-top: 52px; }
  .knowledge-hub-card { grid-template-columns: 1fr; box-shadow: 10px 10px 0 rgba(6,43,64,.08); }
  .knowledge-hub-card a { width: max-content; max-width: 100%; }
  .club-page-hero { display: block; }
  .club-page-logo { width: min(200px,52vw); margin: 32px 0 0; box-shadow: 10px 10px 0 var(--orange); }
  .passes-guide-helper { grid-template-columns: 1fr; gap: 24px; }
  .passes-guide-helper a { width: max-content; max-width: 100%; }
  .pass-explainer { box-shadow: 10px 10px 0 rgba(6,43,64,.08); }
  .pass-explainer__canvas { min-height: 600px; padding: 25px; }
  .pass-explainer__card { top: 40px; left: 50%; width: min(275px,78vw); min-height: 292px; padding: 22px; transform: translateX(-50%) rotate(-3deg); }
  .pass-explainer__card h3 { font-size: 38px; }
  .pass-explainer__note { max-width: 180px; font-size: 12px; }
  .pass-explainer__note--status { top: 360px; left: 24px; }
  .pass-explainer__note--status::before { display: none; }
  .pass-explainer__note--entries { top: 430px; right: 20px; }
  .pass-explainer__note--entries::before { width: 42px; }
  .pass-explainer__note--validity { right: auto; bottom: 35px; left: 24px; }
  .pass-explainer__note--validity::before { display: none; }
  .stories-hub-card { grid-template-columns: 1fr; }
  .stories-hub-card > picture { min-height: 0; max-height: 350px; aspect-ratio: 16/9; }
  .stories-hub-card > picture img { object-position: center top; }
  .stories-hub-card > a { margin: 0 clamp(26px,4vw,48px) clamp(26px,4vw,48px); }
}