.encyclopedia-page { background: var(--black); }
.encyclopedia-page [hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.ency-hero { position: relative; min-height: 700px; display: flex; align-items: center; overflow: hidden; background: var(--black); }
.ency-hero-image, .ency-hero-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.ency-hero-image { object-fit: cover; object-position: center 45%; }
.ency-hero-overlay { background: rgba(0, 0, 0, .58); box-shadow: inset 440px 0 260px rgba(0, 0, 0, .62), inset 0 -210px 150px rgba(0, 0, 0, .82); }
.ency-hero-content { position: relative; z-index: 2; padding-top: 76px; padding-bottom: 110px; }
.ency-hero h1 { margin: 20px 0 0; font-family: "F1 Wide", sans-serif; font-size: clamp(68px, 9vw, 124px); line-height: .87; letter-spacing: 0; }
.ency-hero-statement { margin: 28px 0 0; font-size: clamp(22px, 3vw, 34px); font-weight: 700; }
.ency-hero-summary { max-width: 560px; margin: 17px 0 0; color: #d0d1d3; font-size: 16px; line-height: 1.8; }
.ency-hero-action { display: inline-flex; align-items: center; gap: 12px; margin-top: 30px; padding-bottom: 9px; border-bottom: 1px solid rgba(255,255,255,.7); font-size: 14px; font-weight: 700; }
.ency-hero-action svg { width: 18px; height: 18px; }
.ency-hero-rail { position: absolute; z-index: 2; inset: auto 0 0; border-top: 1px solid var(--line); background: rgba(8, 8, 8, .74); }
.ency-rail-inner { min-height: 70px; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; color: #c7c8ca; font-size: 12px; }
.ency-rail-inner span { min-width: 0; padding-right: 24px; }
.ency-rail-inner span + span { padding-left: 24px; border-left: 1px solid var(--line); }

.ency-intro, .ency-faq { padding: 112px 0 118px; color: var(--ink); background: var(--paper); }
.ency-heading { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 38px; align-items: start; }
.ency-heading .section-index { margin-top: 6px; }
.ency-heading h2 { margin: 0; font-size: clamp(38px, 5vw, 58px); line-height: 1.12; }
.ency-heading > div > p { max-width: 680px; margin: 24px 0 0; color: var(--paper-muted); font-size: 15px; line-height: 1.85; }
.ency-heading-dark { color: var(--white); }
.ency-heading-dark > div > p { color: var(--muted); }

.ency-primer { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 72px; border-top: 1px solid var(--paper-line); border-bottom: 1px solid var(--paper-line); }
.ency-primer article { min-height: 288px; padding: 28px 30px 34px; }
.ency-primer article + article { border-left: 1px solid var(--paper-line); }
.ency-primer span { color: var(--red); font-family: "F1 Wide", sans-serif; font-size: 11px; }
.ency-primer svg { display: block; width: 28px; height: 28px; margin-top: 40px; color: var(--red); }
.ency-primer h3 { margin: 20px 0 12px; font-size: 25px; }
.ency-primer p { margin: 0; color: var(--paper-muted); font-size: 14px; line-height: 1.8; }

.ency-paths { padding: 104px 0 112px; color: var(--white); background: #10213a; }
.path-grid { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 64px; border-top: 1px solid rgba(255,255,255,.18); border-bottom: 1px solid rgba(255,255,255,.18); }
.path-grid > a { min-height: 350px; padding: 28px 22px 34px; transition: color 180ms ease, background-color 180ms ease; }
.path-grid > a + a { border-left: 1px solid rgba(255,255,255,.18); }
.path-grid > a:hover { color: var(--black); background: #d8fa43; }
.path-grid span { color: #67d9ec; font-family: "F1 Wide", sans-serif; font-size: 11px; }
.path-grid svg { display: block; width: 29px; height: 29px; margin-top: 45px; color: #67d9ec; }
.path-grid h3 { margin: 20px 0 12px; font-size: 22px; }
.path-grid p { min-height: 72px; margin: 0; color: #b9c2ce; font-size: 14px; line-height: 1.75; }
.path-grid strong { display: inline-flex; align-items: center; gap: 9px; margin-top: 25px; font-size: 12px; }
.path-grid strong svg { width: 16px; height: 16px; margin: 0; }
.path-grid > a:hover span, .path-grid > a:hover svg, .path-grid > a:hover p { color: var(--black); }

.ency-weekend { padding: 112px 0 118px; color: var(--white); background: var(--black); }
.weekend-switcher { display: flex; gap: 0; margin-top: 68px; border-bottom: 1px solid var(--line); }
.weekend-switcher button, .term-filters button { border: 0; color: #8e9094; background: transparent; cursor: pointer; }
.weekend-switcher button { position: relative; padding: 0 28px 18px 0; margin-right: 28px; font-size: 15px; font-weight: 700; }
.weekend-switcher button::after { content: ""; position: absolute; right: 28px; bottom: -1px; left: 0; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 180ms ease; }
.weekend-switcher button.is-active { color: var(--white); }
.weekend-switcher button.is-active::after { transform: scaleX(1); }
.weekend-panel { display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 1px solid var(--line); }
.weekend-step { min-height: 250px; padding: 26px 22px 30px 0; }
.weekend-step + .weekend-step { padding-left: 22px; border-left: 1px solid var(--line); }
.weekend-step span { color: var(--red); font-family: "F1 Wide", sans-serif; font-size: 11px; }
.weekend-step strong { display: block; margin-top: 58px; font-family: "F1 Wide", sans-serif; font-size: clamp(18px, 2vw, 27px); line-height: 1.05; }
.weekend-step p { margin: 15px 0 0; color: #a8aaaf; font-size: 13px; line-height: 1.7; }
.weekend-note { display: flex; gap: 13px; align-items: flex-start; margin-top: 28px; color: #a8aaaf; }
.weekend-note svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--yellow); }
.weekend-note p { margin: 0; font-size: 12px; line-height: 1.7; }

.ency-score { padding: 106px 0; color: var(--ink); background: #f0b323; }
.score-layout { display: grid; grid-template-columns: minmax(280px, .75fr) minmax(0, 1.25fr); gap: 90px; align-items: end; }
.score-copy h2 { margin: 24px 0 0; font-size: clamp(40px, 5vw, 62px); line-height: 1.04; }
.score-copy > p:last-child { max-width: 440px; margin: 24px 0 0; color: #533b03; font-size: 15px; line-height: 1.8; }
.score-table-wrap { border-top: 2px solid var(--ink); }
.score-table-title, .score-table > div { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.score-table-title { padding: 13px 0; color: #60480c; font-family: "F1 Wide", sans-serif; font-size: 10px; }
.score-table-title span:first-child { grid-column: 2; }
.score-table-title span:last-child { grid-column: 3; }
.score-table > div { min-height: 43px; align-items: center; border-top: 1px solid rgba(7,7,7,.27); }
.score-table b { font-family: "F1 Wide", sans-serif; font-size: 11px; }
.score-table strong { font-family: "F1 Wide", sans-serif; font-size: 18px; font-weight: 700; }
.score-table strong:last-child { color: #60480c; font-size: 15px; }

.ency-glossary { padding: 112px 0 124px; color: var(--white); background: #111215; }
.glossary-tools { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 1.5fr); gap: 24px 46px; align-items: end; margin-top: 62px; }
.glossary-search { min-width: 0; display: flex; align-items: center; gap: 12px; padding: 14px 15px; border-bottom: 1px solid #676970; background: #1b1d21; }
.glossary-search > svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--red); }
.glossary-search input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--white); background: transparent; font: inherit; font-size: 13px; }
.glossary-search input::placeholder { color: #888b91; }
.glossary-search button { display: grid; place-items: center; width: 25px; height: 25px; padding: 0; border: 0; color: #a4a6aa; background: transparent; cursor: pointer; }
.glossary-search button svg { width: 16px; height: 16px; }
.term-filters { display: flex; flex-wrap: wrap; gap: 9px; }
.term-filters button { padding: 8px 12px; border: 1px solid #42454a; font-size: 12px; transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease; }
.term-filters button:hover, .term-filters button.is-active { color: var(--ink); border-color: var(--acid, #d8fa43); background: var(--acid, #d8fa43); }
.term-count { grid-column: 1 / -1; margin: 0; color: #92959b; font-size: 12px; }
.term-count strong { color: var(--acid, #d8fa43); font-family: "F1 Wide", sans-serif; font-size: 14px; }
.term-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 32px; background: #35373c; border: 1px solid #35373c; }
.term-card { min-width: 0; min-height: 310px; padding: 23px 22px 24px; color: var(--white); background: #181a1e; transition: background-color 180ms ease, transform 180ms ease; }
.term-card:hover { position: relative; z-index: 1; background: #22252a; transform: translateY(-3px); }
.term-card > div { display: flex; align-items: center; justify-content: space-between; min-height: 27px; gap: 12px; }
.term-card > div > span { color: var(--red); font-family: "F1 Wide", sans-serif; font-size: 11px; line-height: 1.25; }
.term-card small { color: #7d8086; font-size: 9px; text-align: right; }
.term-card h3 { margin: 53px 0 12px; font-size: 21px; line-height: 1.25; }
.term-card p { min-height: 78px; margin: 0; color: #b4b6ba; font-size: 13px; line-height: 1.75; }
.term-card em { display: block; margin-top: 22px; padding-top: 12px; color: #7e8187; border-top: 1px solid #383b40; font-size: 11px; font-style: normal; line-height: 1.45; }
.term-card em a { color: #d8fa43; }
.term-card em a:hover { color: var(--white); }
.flag-swatch { display: inline-block; width: 28px; height: 18px; border: 1px solid rgba(255,255,255,.3); }
.flag-yellow { background: #f4c430; }
.flag-red { background: var(--red); }
.flag-green { background: #2bce75; }
.flag-blue { background: #3f86f5; }
.flag-check { background: repeating-conic-gradient(#fff 0 25%, #1a1c20 0 50%) 0 / 9px 9px; }
.term-empty { margin: 38px 0 0; color: #a8aaaf; text-align: center; }

.faq-list { max-width: 940px; margin: 66px 0 0 auto; border-top: 1px solid var(--paper-line); }
.faq-list details { border-bottom: 1px solid var(--paper-line); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 0; color: var(--ink); font-size: 18px; font-weight: 700; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary svg { flex: 0 0 auto; width: 19px; height: 19px; color: var(--red); transition: transform 180ms ease; }
.faq-list details[open] summary svg { transform: rotate(45deg); }
.faq-list details p { max-width: 700px; margin: -3px 0 24px; color: var(--paper-muted); font-size: 14px; line-height: 1.8; }

.ency-sources { padding: 102px 0 46px; color: var(--white); background: var(--red); }
.source-line { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.source-line .section-index { color: #3d0907; }
.source-line h2 { margin: 24px 0 0; font-size: clamp(40px, 5vw, 62px); line-height: 1.05; }
.source-line > div:last-child > p { max-width: 480px; margin: 0; color: #ffd6d3; font-size: 15px; line-height: 1.8; }
.source-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.source-button { display: inline-flex; align-items: center; gap: 9px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.42); font-size: 12px; font-weight: 700; }
.source-button svg { width: 15px; height: 15px; }
.source-button-primary { color: var(--ink); border-color: var(--white); background: var(--white); }
.source-note { margin: 74px 0 0; padding-top: 18px; color: #ffb4b0; border-top: 1px solid rgba(255,255,255,.3); font-size: 11px; line-height: 1.7; }

@media (max-width: 1080px) {
  .term-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 960px) {
  .ency-heading { grid-template-columns: 120px 1fr; }
  .ency-primer { margin-top: 56px; }
  .path-grid { grid-template-columns: repeat(2, 1fr); }
  .path-grid > a:nth-child(3) { border-top: 1px solid rgba(255,255,255,.18); border-left: 0; }
  .path-grid > a:nth-child(4) { border-top: 1px solid rgba(255,255,255,.18); }
  .path-grid > a:nth-child(5) { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.18); border-left: 0; }
  .weekend-panel { grid-template-columns: repeat(3, 1fr); }
  .weekend-step:nth-child(4) { border-left: 0; }
  .weekend-step:nth-child(n + 4) { border-top: 1px solid var(--line); }
  .score-layout { gap: 46px; }
  .source-line { gap: 46px; }
}

@media (max-width: 720px) {
  .ency-hero { min-height: 620px; align-items: flex-start; }
  .ency-hero-image { object-position: 58% center; }
  .ency-hero-overlay { background: rgba(0,0,0,.62); box-shadow: inset 0 -180px 130px rgba(0,0,0,.84); }
  .ency-hero-content { padding-top: 142px; padding-bottom: 100px; }
  .ency-hero h1 { font-size: 56px; }
  .ency-hero-statement { margin-top: 21px; font-size: 23px; }
  .ency-hero-summary { max-width: 440px; font-size: 14px; }
  .ency-rail-inner { min-height: 62px; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 10px; }
  .ency-rail-inner span:last-child { display: none; }
  .ency-rail-inner span + span { padding-left: 14px; }
  .ency-intro, .ency-faq { padding: 76px 0 84px; }
  .ency-heading { grid-template-columns: 1fr; gap: 18px; }
  .ency-heading h2 { font-size: 39px; }
  .ency-heading > div > p { margin-top: 18px; font-size: 14px; }
  .ency-primer { grid-template-columns: 1fr; margin-top: 46px; }
  .ency-primer article { min-height: 0; padding: 25px 0; }
  .ency-primer article + article { border-top: 1px solid var(--paper-line); border-left: 0; }
  .ency-primer svg { margin-top: 24px; }
  .ency-primer h3 { margin-top: 14px; }
  .ency-paths { padding: 76px 0 84px; }
  .path-grid { grid-template-columns: 1fr; margin-top: 46px; }
  .path-grid > a, .path-grid > a:nth-child(3), .path-grid > a:nth-child(4), .path-grid > a:nth-child(5) { min-height: 0; padding: 26px 0 30px; border-left: 0; grid-column: auto; }
  .path-grid > a + a { border-top: 1px solid rgba(255,255,255,.18); border-left: 0; }
  .path-grid svg { margin-top: 28px; }
  .path-grid p { min-height: 0; }
  .ency-weekend { padding: 76px 0 84px; }
  .weekend-switcher { margin-top: 46px; }
  .weekend-panel { grid-template-columns: 1fr; }
  .weekend-step, .weekend-step + .weekend-step { min-height: 0; padding: 22px 0; border: 0; border-top: 1px solid var(--line); }
  .weekend-step:first-child { border-top: 0; }
  .weekend-step strong { margin-top: 25px; }
  .weekend-step p { margin-top: 9px; }
  .ency-score { padding: 76px 0; }
  .score-layout { grid-template-columns: 1fr; gap: 42px; }
  .score-copy h2 { font-size: 45px; }
  .ency-glossary { padding: 76px 0 84px; }
  .glossary-tools { grid-template-columns: 1fr; gap: 22px; margin-top: 44px; }
  .term-count { grid-column: auto; }
  .term-grid { grid-template-columns: 1fr; margin-top: 26px; }
  .term-card { min-height: 0; padding: 22px 20px; }
  .term-card h3 { margin-top: 28px; }
  .term-card p { min-height: 0; }
  .term-card em { margin-top: 16px; }
  .faq-list { margin-top: 46px; }
  .faq-list summary { padding: 21px 0; font-size: 16px; }
  .ency-sources { padding: 76px 0 32px; }
  .source-line { grid-template-columns: 1fr; gap: 34px; }
  .source-line h2 { font-size: 43px; }
  .source-actions { align-items: stretch; flex-direction: column; }
  .source-button { justify-content: space-between; }
  .source-note { margin-top: 50px; }
}

@media (prefers-reduced-motion: reduce) {
  .weekend-switcher button::after, .term-card, .faq-list summary svg { transition: none; }
}