.article-layout{position: relative;width: 100%} .article-layout__header{padding: var(--grid-margin) var(--grid-margin) var(--space-6);max-width: 1000px;margin: 0 auto;text-align: center;position: relative} .article-layout__header > .tag--category{display: inline-block;margin-bottom: var(--space-4)} .article-layout__header .breadcrumbs{justify-content: center;margin-bottom: var(--space-6)} .article-layout__title{font-family: var(--font-display);font-size: var(--text-5xl);font-weight: 700;line-height: 1.1;color: var(--heading);margin-bottom: var(--space-6);letter-spacing: -0.02em} .article-layout__meta{display: flex;align-items: center;justify-content: center;gap: var(--space-4);font-size: var(--text-sm);color: var(--meta);margin-bottom: var(--space-8);flex-wrap: wrap} .article-layout__image{margin: 0 auto var(--grid-margin);max-width: 1200px;border-radius: var(--radius-md);overflow: hidden;box-shadow: var(--shadow-card)} .article-layout__image img{width: 100%;aspect-ratio: 16 / 9;object-fit: cover;display: block} .article-layout__main{display: grid;grid-template-columns: 1fr min(65ch, 100%) 1fr;gap: var(--space-8);padding: 0 var(--grid-margin);max-width: 1440px;margin: 0 auto;align-items: start} .article-layout__content{grid-column: 2;grid-row: 1;min-width: 0} .article-layout__sidebar{grid-column: 3;grid-row: 1;position: sticky;top: 56px;transition: padding-top 600ms var(--ease-out-expo);display: flex;flex-direction: column;gap: var(--space-6);justify-self: start;align-self: start;padding-bottom: var(--space-8)} .fab-trigger{display: none} .sidebar-action{position: relative;display: flex;flex-direction: column;align-items: flex-start;gap: var(--space-1)} .sidebar-action__btn{width: 48px;height: 48px;border-radius: 50%;background: var(--glass-bg);backdrop-filter: blur(8px);-webkit-backdrop-filter: blur(8px);border: 1px solid var(--hairline);display: flex;align-items: center;justify-content: center;color: var(--text);cursor: pointer;transition: all var(--duration-fast) var(--ease-default)} .sidebar-action__btn svg{width: 20px;height: 20px} .sidebar-action__btn:hover{background: var(--heading);color: var(--bg);transform: translateY(-2px);border-color: var(--heading)} .sidebar-action__btn--accent{border-color: var(--category-color, var(--hairline));color: var(--category-color, var(--text))} .sidebar-action__btn--accent:hover{background: var(--category-color, var(--heading));border-color: var(--category-color, var(--heading));color: var(--bg)} .sidebar-action__label{font-size: var(--text-xs);color: var(--meta);text-align: left} .sidebar-action__btn[data-tooltip]::after{content: attr(data-tooltip);position: absolute;left: calc(100% + var(--space-2));top: 50%;transform: translateY(-50%) translateX(-4px);white-space: nowrap;font-family: var(--font-body);font-size: var(--text-xs);color: var(--bg);background: var(--heading);padding: var(--space-1) var(--space-2);border-radius: var(--radius-sm);pointer-events: none;opacity: 0;transition: opacity var(--duration-fast) var(--ease-default), transform var(--duration-fast) var(--ease-out-expo)} .sidebar-action__btn[data-tooltip]:hover::after{opacity: 1;transform: translateY(-50%) translateX(0)} .share-dropdown{position: absolute;top: 0;left: auto;right: calc(100% + var(--space-3));min-width: 200px;padding: var(--space-2);background: var(--glass-bg);backdrop-filter: blur(16px);-webkit-backdrop-filter: blur(16px);border: 1px solid var(--hairline);border-radius: var(--radius-lg);box-shadow: var(--shadow-overlay);display: flex;flex-direction: column;gap: 2px;opacity: 0;visibility: hidden;pointer-events: none;transform: translateX(8px);transition: opacity 200ms cubic-bezier(0.16, 1, 0.3, 1), visibility 200ms cubic-bezier(0.16, 1, 0.3, 1), transform 200ms cubic-bezier(0.16, 1, 0.3, 1);z-index: 50} .share-dropdown::before{content: '';position: absolute;top: 0;left: 100%;width: var(--space-3);height: 100%} .sidebar-action:hover > .share-dropdown, .share-dropdown:hover, .share-dropdown.is-open{opacity: 1;visibility: visible;pointer-events: auto;transform: translateX(0)} .share-dropdown__item{display: flex;align-items: center;gap: var(--space-3);padding: var(--space-2) var(--space-3);font-size: var(--text-sm);color: var(--text);text-decoration: none;border-radius: var(--radius-md);border: none;background: none;cursor: pointer;white-space: nowrap;transition: background var(--duration-fast) var(--ease-default)} .share-dropdown__item:hover{background: rgba(92, 85, 73, 0.08)} .share-dropdown__item svg{width: 18px;height: 18px;flex-shrink: 0} .article-layout__nav-row{display: grid;grid-template-columns: 1fr min(65ch, 100%) 1fr;padding: 0 var(--grid-margin);max-width: 1440px;margin: var(--space-12) auto 0} .article-layout__nav-row > .series-nav{grid-column: 2;margin-top: 0} .article-layout:not(:has(.article-layout__nav-row)) .article-layout__related{margin-top: var(--space-12)} .article-layout__related{margin-top: 0;padding-top: var(--space-12);padding-bottom: var(--space-12);border-top: 1px solid var(--hairline)} .article-layout__related-header{display: flex;align-items: center;justify-content: space-between;gap: var(--space-4);margin-bottom: var(--space-8)} .article-layout__related-heading{font-family: var(--font-display);font-size: var(--text-2xl);margin: 0} .split-view__bible{display: none} @media (max-width: 1023px){.article-layout__main{grid-template-columns: 1fr} .article-layout__content{grid-column: 1} .article-layout__sidebar{display: none} .article-layout__title{font-size: var(--text-4xl)} } @media (max-width: 767px){.article-layout{padding-top: calc(var(--grid-margin) + var(--space-4));display: flex;flex-direction: column} .article-layout__image{order: -1;margin: 0 var(--grid-margin) var(--space-6);border-radius: var(--radius-lg);box-shadow: var(--shadow-overlay);aspect-ratio: 16 / 9;position: relative} .article-layout__image img{position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover} .article-layout__header{padding-top: var(--space-4) !important;padding-bottom: var(--space-2);order: 0} .article-layout__main{order: 1} .article-layout__nav-row{order: 2} .article-layout__related{order: 3} .article-layout__sidebar{display: flex !important;position: fixed !important;top: auto !important;bottom: var(--grid-margin);right: var(--grid-margin);z-index: 90;flex-direction: column;align-items: flex-end;gap: 0;grid-column: unset} .fab-trigger{display: flex;align-items: center;justify-content: center;width: 48px;height: 48px;border-radius: 50%;border: 1px solid var(--hairline);background: var(--bg);color: var(--heading);cursor: pointer;box-shadow: var(--shadow-card);flex-shrink: 0;transition: background var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default)} .article-layout__sidebar.is-open .fab-trigger{background: var(--heading);color: var(--bg);border-color: var(--heading)} .fab-trigger__icon{position: relative;width: 14px;height: 2px;background: currentColor;border-radius: 1px;transition: transform 0.35s var(--ease-out-expo)} .fab-trigger__icon::before{content: '';position: absolute;top: -6px;left: 6px;width: 2px;height: 14px;background: currentColor;border-radius: 1px;transition: transform 0.35s var(--ease-out-expo)} .article-layout__sidebar.is-open .fab-trigger__icon{transform: rotate(45deg)} .article-layout__sidebar .sidebar-action{opacity: 0;transform: translateY(12px) scale(0.85);pointer-events: none;height: 0;overflow: visible;transition: opacity 0.2s var(--ease-default), transform 0.25s var(--ease-out-expo), height 0s 0.25s} .article-layout__sidebar .sidebar-action:nth-child(1){transition-delay: 0ms} .article-layout__sidebar .sidebar-action:nth-child(2){transition-delay: 30ms} .article-layout__sidebar .sidebar-action:nth-child(3){transition-delay: 60ms} .article-layout__sidebar.is-open{gap: var(--space-3)} .article-layout__sidebar.is-open .sidebar-action{opacity: 1;transform: none;pointer-events: auto;height: auto;transition: opacity 0.2s var(--ease-default), transform 0.25s var(--ease-out-expo), height 0s 0s} .article-layout__sidebar.is-open .sidebar-action:nth-child(1){transition-delay: 100ms} .article-layout__sidebar.is-open .sidebar-action:nth-child(2){transition-delay: 50ms} .article-layout__sidebar.is-open .sidebar-action:nth-child(3){transition-delay: 0ms} .article-layout__sidebar .sidebar-action__btn{box-shadow: var(--shadow-card)} .sidebar-action__btn[data-tooltip]::after{display: none} .article-layout__sidebar .share-dropdown{left: auto;right: calc(100% + var(--space-3));top: auto;bottom: 0;transform: translateX(8px)} .sidebar-action:hover > .share-dropdown, .share-dropdown:hover, .share-dropdown.is-open{transform: translateX(0)} .article-layout__sidebar .share-dropdown::before{right: auto;left: 100%;width: var(--space-3)} } .devotional-card{display: flex;flex-direction: column;text-decoration: none;color: var(--text);padding: var(--space-8);border: 1px solid var(--hairline);border-radius: var(--radius-lg);background: var(--glass-bg);backdrop-filter: blur(12px);-webkit-backdrop-filter: blur(12px);transition: all var(--duration-normal) var(--ease-out-expo)} .devotional-card:hover{transform: translateY(-4px);box-shadow: var(--shadow-overlay);border-color: color-mix(in srgb, var(--heading) 20%, transparent)} .devotional-card__series{font-size: var(--text-xs);font-weight: 600;color: var(--meta);text-transform: uppercase;letter-spacing: 0.05em;margin-bottom: var(--space-2)} .devotional-card__date{font-size: var(--text-sm);color: var(--meta);margin-bottom: var(--space-4)} .devotional-card__title{font-family: var(--font-display);font-size: var(--text-3xl);font-weight: 500;color: var(--heading);line-height: 1.2;margin-bottom: var(--space-4);letter-spacing: -0.01em;transition: color var(--duration-fast) var(--ease-default)} .devotional-card:hover .devotional-card__title{color: var(--text)} .devotional-card__excerpt{font-size: var(--text-lg);line-height: 1.7;font-style: italic;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;margin-bottom: var(--space-6);flex-grow: 1} .devotional-card__cta{display: inline-flex;align-items: center;gap: var(--space-2);font-size: var(--text-sm);font-weight: 600;color: var(--heading)} .devotional-card__cta svg{width: 16px;height: 16px;transition: transform var(--duration-normal) var(--ease-out-expo)} .devotional-card:hover .devotional-card__cta svg{transform: translateX(4px)} @keyframes ticker-scroll{0%{transform: translateX(0)} 100%{transform: translateX(-50%)} } .ticker{display: flex;align-items: center;gap: var(--space-4);position: relative;border-top: 1px solid var(--hairline);border-bottom: 1px solid var(--hairline);padding: var(--space-4) 0} .ticker__label{font-family: var(--font-display);font-size: var(--text-lg);font-weight: 700;color: var(--heading);white-space: nowrap;flex-shrink: 0;z-index: 2} .ticker__scroll{flex: 1;min-width: 0;overflow: hidden;-webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%)} .ticker__track{display: flex;align-items: center;gap: var(--space-8);white-space: nowrap;width: max-content;animation: ticker-scroll 30s linear infinite;will-change: transform} .ticker:hover .ticker__track{animation-play-state: paused} .ticker__item{display: inline-flex;align-items: center;gap: var(--space-3);text-decoration: none;color: var(--text);padding: var(--space-2) var(--space-3);border-radius: var(--radius-sm);transition: background var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default)} .ticker__item:hover{background: color-mix(in srgb, var(--heading) 6%, transparent)} .ticker__series{font-family: var(--font-display);font-size: var(--text-lg);font-weight: 600;color: var(--heading)} .ticker__sep{color: var(--meta)} .ticker__title{font-size: var(--text-lg);color: var(--text)} .ticker__item:hover .ticker__title{color: var(--heading)} .ticker__diamond{font-size: var(--text-xs);color: var(--hairline);flex-shrink: 0} .group-carousel{display: flex;gap: var(--space-4);overflow-x: auto;scroll-snap-type: x mandatory;-webkit-overflow-scrolling: touch;scrollbar-width: none;padding-top: var(--space-4);padding-bottom: var(--space-6);margin-top: calc(var(--space-4) * -1);margin-bottom: calc(var(--space-6) * -1);margin-left: calc(-1 * var(--grid-margin));margin-right: calc(-1 * var(--grid-margin))} .group-carousel::-webkit-scrollbar{display: none} .group-carousel .carousel-spacer{flex: 0 0 calc(var(--grid-margin) - var(--space-4))} .group-card{flex: 0 0 auto;min-width: 220px;display: flex;flex-direction: column;gap: var(--space-3);padding: var(--space-6);border: 1px solid var(--hairline);border-radius: var(--radius-lg);background: var(--glass-bg);backdrop-filter: blur(12px);scroll-snap-align: start;transition: box-shadow var(--duration-normal) var(--ease-out-expo), border-color var(--duration-normal) var(--ease-out-expo)} .group-card:hover{box-shadow: var(--shadow-card);border-color: color-mix(in srgb, var(--category-color, var(--heading)) 30%, transparent)} @media (max-width: 767px){.group-card{flex: 0 0 80vw;min-width: 0;scroll-snap-align: center} .group-carousel .carousel-spacer{flex: 0 0 calc(10vw - var(--space-4))} } .group-card__title{display: flex;align-items: center;gap: var(--space-3);font-family: var(--font-display);font-size: var(--text-xl);font-weight: 600;color: var(--heading);line-height: 1.2;margin: 0} .group-card__actions{display: flex;align-items: center;gap: var(--space-2);margin-top: auto;flex-wrap: wrap} @media (max-width: 567px){.devotional-card{padding: var(--space-4)} .group-card{min-width: 190px;padding: var(--space-4)} .group-card__title{font-size: var(--text-lg)} } .ticker-section{margin-bottom: var(--space-12)} @media (max-width: 767px){.ticker-section{margin-bottom: var(--space-12)} } @media (max-width: 767px){.ticker{flex-direction: column;align-items: flex-start;gap: var(--space-2)} .ticker__label{font-size: var(--text-xs);font-weight: 600;text-transform: uppercase;letter-spacing: 0.04em;color: var(--meta)} .ticker__series, .ticker__title{font-size: var(--text-sm)} .ticker__track{gap: var(--space-6);animation-duration: 18s} .ticker__item{padding: var(--space-1) var(--space-2);gap: var(--space-2)} } .ds-grid{display: grid;gap: var(--grid-gutter)} .ds-grid--3col{grid-template-columns: repeat(3, 1fr)} .ds-grid--2col{grid-template-columns: repeat(2, 1fr)} .ds-grid--1col{grid-template-columns: 1fr} @media (max-width: 1023px){.ds-grid--3col{grid-template-columns: repeat(2, 1fr)} } @media (max-width: 567px){.ds-grid--3col, .ds-grid--2col{grid-template-columns: 1fr} } .ds-card{display: flex;flex-direction: column;border: 1px solid var(--hairline);border-radius: var(--radius-lg);background: var(--glass-bg);backdrop-filter: blur(12px);-webkit-backdrop-filter: blur(12px);overflow: visible;transition: box-shadow var(--duration-normal) var(--ease-out-expo), border-color var(--duration-normal) var(--ease-out-expo)} .ds-card:hover{box-shadow: var(--shadow-card);border-color: color-mix(in srgb, var(--heading) 20%, transparent)} .ds-card__cover{aspect-ratio: 21 / 9;overflow: hidden;border-radius: var(--radius-lg) var(--radius-lg) 0 0} .ds-card__cover img{width: 100%;height: 100%;object-fit: cover;transition: transform var(--duration-slow) var(--ease-out-expo)} .ds-card:hover .ds-card__cover img{transform: scale(1.04)} .ds-card__body{display: flex;flex-direction: column;padding: var(--space-6);flex: 1} .ds-card__title{font-family: var(--font-display);font-size: var(--text-2xl);font-weight: 600;color: var(--heading);line-height: 1.2;letter-spacing: -0.01em;margin-bottom: var(--space-2)} .ds-card__desc{font-size: var(--text-sm);color: var(--meta);line-height: 1.5;margin-bottom: var(--space-4)} .ds-card__desc p{margin: 0 0 var(--space-3)} .ds-card__desc p:last-child{margin-bottom: 0} .ds-card:not(.ds-card--wide):not(.ds-card--featured) .ds-card__desc p:first-child{display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden} .ds-card:not(.ds-card--wide):not(.ds-card--featured) .ds-card__desc p + p{display: none} .ds-card--accent{} .ds-card--featured{display: grid;grid-template-columns: 1fr 1fr;gap: 0} .ds-card--featured .ds-card__cover{aspect-ratio: auto;border-radius: var(--radius-lg) 0 0 var(--radius-lg)} .ds-card--featured .ds-card__cover img{height: 100%} .ds-card--featured .ds-card__body{display: flex;flex-direction: column;justify-content: center} .ds-card--featured .ds-card__title{font-size: var(--text-3xl)} .ds-card--featured .ds-card__desc p:first-child{display: block;-webkit-line-clamp: unset;overflow: visible} @media (max-width: 767px){.ds-card--featured{grid-template-columns: 1fr} .ds-card--featured .ds-card__cover{border-radius: var(--radius-lg) var(--radius-lg) 0 0} .ds-card--featured .ds-card__title{font-size: var(--text-2xl)} } .ds-card__meta{font-size: var(--text-xs);color: var(--meta);text-transform: uppercase;letter-spacing: 0.04em;margin-bottom: var(--space-4)} .ds-card__today{display: flex;flex-direction: column;gap: var(--space-1);padding: var(--space-4);margin-bottom: var(--space-4);background: color-mix(in srgb, var(--heading) 4%, transparent);border-radius: var(--radius-md);text-decoration: none;color: var(--text);transition: background var(--duration-fast) var(--ease-default)} .ds-card__today:hover{background: color-mix(in srgb, var(--heading) 8%, transparent)} .ds-card__today-label{font-size: var(--text-xs);font-weight: 600;color: var(--meta);text-transform: uppercase;letter-spacing: 0.04em} .ds-card__today-title{font-family: var(--font-display);font-size: var(--text-xl);font-weight: 500;color: var(--heading);line-height: 1.3} .ds-card__today-cta{display: inline-flex;align-items: center;gap: var(--space-2);font-size: var(--text-xs);font-weight: 600;color: var(--heading);margin-top: var(--space-1)} .ds-card__today-cta svg{width: 14px;height: 14px;transition: transform var(--duration-normal) var(--ease-out-expo)} .ds-card__today:hover .ds-card__today-cta svg{transform: translateX(4px)} .ds-card__today--compact{flex-direction: row;align-items: center;justify-content: space-between;padding: var(--space-3) var(--space-4);gap: var(--space-3)} .ds-card__today--compact .ds-card__today-label{font-size: var(--text-xs);flex-shrink: 0} .ds-card__today--compact .ds-card__today-title{font-size: var(--text-sm);font-weight: 500;flex: 1;min-width: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap} .ds-card__today--compact .ds-card__today-cta{margin-top: 0;flex-shrink: 0} .ds-card__footer{margin-top: auto} .ds-card__actions{display: flex;align-items: center;gap: var(--space-3);margin-top: var(--space-4);flex-wrap: wrap} .ds-card__join{position: relative} .ds-card__join-btn svg{transition: transform var(--duration-fast) var(--ease-default)} .ds-card__join-btn[aria-expanded="true"] svg{transform: rotate(180deg)} .ds-card__join-dropdown{position: absolute;bottom: calc(100% + var(--space-2));right: 0;min-width: 220px;background: var(--bg);border: 1px solid var(--hairline);border-radius: var(--radius-md);box-shadow: var(--shadow-overlay);padding: var(--space-2);z-index: 10;display: flex;flex-direction: column;gap: var(--space-1)} .ds-card__join-dropdown[hidden]{display: none} .ds-card__join-link{display: flex;align-items: center;gap: var(--space-3);padding: var(--space-2) var(--space-3);font-size: var(--text-sm);color: var(--text);text-decoration: none;border-radius: var(--radius-sm);transition: background var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default)} .ds-card__join-link:hover{background: color-mix(in srgb, var(--heading) 6%, transparent);color: var(--heading)} .ds-card__join-link svg{width: 18px;height: 18px;flex-shrink: 0} @media (max-width: 567px){.ds-card__body{padding: var(--space-4)} .ds-card__title{font-size: var(--text-xl)} .ds-card__today-title{font-size: var(--text-lg)} .ds-card__actions{flex-direction: column;align-items: stretch} .ds-card__actions .btn, .ds-card__join{width: 100%} .ds-card__join-dropdown{right: auto;left: 0} } .faq{max-width: calc(50% - var(--grid-gutter) / 2)} @media (max-width: 567px){.faq{max-width: 100%} } .faq__item{border-bottom: 1px solid var(--hairline)} .faq__item:first-child{border-top: 1px solid var(--hairline)} .faq__question{display: flex;align-items: center;justify-content: space-between;gap: var(--space-4);padding: 1.25rem 0;font-family: var(--font-display);font-size: var(--text-xl);font-weight: 500;color: var(--heading);cursor: pointer;list-style: none;transition: color var(--duration-fast) var(--ease-default)} .faq__question:hover{color: var(--text)} .faq__question::-webkit-details-marker{display: none} .faq__question::after{content: '';flex-shrink: 0;width: 24px;height: 24px;border-radius: var(--radius-full);background: color-mix(in srgb, var(--heading) 8%, transparent);-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;background: currentColor;transition: transform var(--duration-normal) var(--ease-out-expo)} .faq__item[open] .faq__question::after{transform: rotate(45deg)} .faq__answer{overflow: hidden;transition: height var(--duration-normal) var(--ease-out-expo)} .faq__answer p{padding: 0 var(--space-8) 0 0;margin: 0 0 var(--space-3);color: var(--text);line-height: 1.65;font-size: var(--text-base)} .faq__answer p:last-child{margin-bottom: var(--space-6)} .faq__answer a{color: var(--heading);text-decoration: underline;text-decoration-color: var(--hairline);text-underline-offset: 3px;transition: text-decoration-color var(--duration-fast) var(--ease-default)} .faq__answer a:hover{text-decoration-color: var(--heading)} .series-card{display: block;text-decoration: none;color: var(--text);border-radius: var(--radius-lg);transition: all var(--duration-normal) var(--ease-out-expo);background: var(--glass-bg);border: 1px solid transparent} .series-card:hover{box-shadow: var(--shadow-overlay);border-color: var(--hairline);transform: translateY(-2px)} .series-card__cover{aspect-ratio: 3 / 4;overflow: hidden;border-radius: var(--radius-md);background: var(--hairline);margin-bottom: var(--space-4);box-shadow: var(--shadow-sm);transition: box-shadow var(--duration-normal) var(--ease-out-expo)} .series-card:hover .series-card__cover{box-shadow: var(--shadow-card)} .series-card__cover img{width: 100%;height: 100%;object-fit: cover;transition: transform var(--duration-slow) var(--ease-out-expo)} .series-card:hover .series-card__cover img{transform: scale(1.04)} .series-card__title{font-family: var(--font-display);font-size: var(--text-2xl);font-weight: 500;color: var(--heading);line-height: 1.2;margin-bottom: var(--space-1)} .series-card__subtitle{font-size: var(--text-sm);color: var(--meta);margin-bottom: var(--space-3)} .series-card--horizontal{display: grid;grid-template-columns: 240px 1fr;gap: var(--space-8);padding: var(--space-6);border: 1px solid var(--hairline)} .series-card--horizontal .series-card__cover{margin-bottom: 0} .series-card--horizontal .series-card__body{display: flex;flex-direction: column;justify-content: center} @media (max-width: 767px){.series-card--horizontal{grid-template-columns: 140px 1fr;gap: var(--space-4);padding: var(--space-4)} } @media (max-width: 479px){.series-card--horizontal{grid-template-columns: 1fr} .series-card--horizontal .series-card__cover{max-height: 220px;width: 100%;object-fit: cover} } .featured-products-grid{display: flex;gap: var(--space-4);overflow-x: auto;padding-top: var(--space-6);padding-bottom: var(--space-8);margin-top: calc(var(--space-6) * -1);margin-left: calc(-1 * var(--grid-margin));margin-right: calc(-1 * var(--grid-margin));margin-bottom: calc(var(--space-8) * -1);scroll-snap-type: x mandatory;scroll-behavior: smooth;scrollbar-width: none;-webkit-overflow-scrolling: touch} .featured-products-grid::-webkit-scrollbar{display: none} .featured-products-grid > .product-card{flex: 0 0 calc(25% - (var(--space-4) * 3 / 4));min-width: 200px;scroll-snap-align: start} .featured-products-grid > .carousel-spacer{flex: 0 0 calc(var(--grid-margin) - var(--space-4));pointer-events: none} @media (max-width: 1023px){.featured-products-grid > .product-card{flex: 0 0 calc(33% - (var(--space-4) * 2 / 3))} } @media (max-width: 767px){.featured-products-grid > .product-card{flex: 0 0 70%;min-width: 180px} .product-card__body{gap: var(--space-1)} } .product-card{display: flex;flex-direction: column;text-decoration: none;color: var(--text);position: relative;padding: var(--space-3);border-radius: var(--radius-lg);transition: background var(--duration-normal) var(--ease-default);background: color-mix(in srgb, var(--accent, var(--heading)) 5%, transparent)} .product-card:hover{background: color-mix(in srgb, var(--accent, var(--heading)) 10%, transparent)} .product-card__image{aspect-ratio: 3 / 4;border-radius: var(--radius-md);margin-bottom: var(--space-4);position: relative;box-shadow: var(--shadow-card);background: var(--hairline);overflow: hidden;isolation: isolate;transition: box-shadow var(--duration-normal) var(--ease-out-expo), transform var(--duration-normal) var(--ease-out-expo)} .product-card__image::before{content: '';position: absolute;inset: 0;background: radial-gradient(ellipse at 0% 0%, rgba(0, 0, 0, 0.38) 0%, transparent 55%);z-index: 1;pointer-events: none;border-radius: inherit} .product-card__image img{width: 100%;height: 100%;object-fit: cover;display: block;transition: transform var(--duration-slow) var(--ease-out-expo)} .product-card:hover .product-card__image{box-shadow: var(--shadow-overlay);transform: translateY(-4px)} .product-card:hover .product-card__image img{transform: scale(1.04)} .product-card__badges{position: absolute;top: var(--space-3);left: var(--space-3);right: var(--space-3);z-index: 2;pointer-events: none;display: flex;align-items: center;justify-content: space-between;gap: var(--space-2)} .product-card__category-tag{font-size: var(--text-xs);font-weight: 700;letter-spacing: 0.05em;text-transform: uppercase;color: #fff;background: rgba(0, 0, 0, 0.45);backdrop-filter: blur(6px);-webkit-backdrop-filter: blur(6px);padding: var(--space-1) var(--space-3);border-radius: var(--radius-full);line-height: 1.4;white-space: nowrap} .product-card__price-tag{font-size: var(--text-xs);font-weight: 600;color: #fff;background: rgba(0, 0, 0, 0.45);backdrop-filter: blur(6px);-webkit-backdrop-filter: blur(6px);padding: var(--space-1) var(--space-3);border-radius: var(--radius-full);line-height: 1.4;white-space: nowrap} .product-card__overlay{position: absolute;inset: 0;border-radius: var(--radius-md);background: color-mix(in srgb, var(--accent, #fff) 15%, transparent);opacity: 0;transition: opacity var(--duration-normal) var(--ease-default);pointer-events: none;mix-blend-mode: multiply} .product-card:hover .product-card__overlay{opacity: 1} .product-card__oos-badge{position: absolute;bottom: var(--space-3);left: var(--space-3);z-index: 2;font-size: var(--text-xs);font-weight: 700;color: #fff;background: rgba(0, 0, 0, 0.6);backdrop-filter: blur(6px);-webkit-backdrop-filter: blur(6px);padding: var(--space-1) var(--space-3);border-radius: var(--radius-full)} .product-card__body{display: flex;flex-direction: column;gap: var(--space-2)} .product-card__title{font-family: var(--font-display);font-size: var(--text-2xl);font-weight: 500;line-height: 1.2;color: var(--heading);letter-spacing: -0.01em;transition: color var(--duration-fast) var(--ease-default)} .product-card:hover .product-card__title{color: var(--accent, var(--text))} .product-card__subtitle{font-size: var(--text-sm);color: var(--meta)} .product-detail__price{display: flex;align-items: baseline;gap: var(--space-4);margin-bottom: var(--space-3)} .product-detail__price-value{font-family: var(--font-display);font-size: var(--text-3xl);font-weight: 700;color: var(--heading)} .product-detail__price-value--free{color: var(--cat-geestelijke-groei)} .product-detail__price-old{font-size: var(--text-lg);color: var(--meta);text-decoration: line-through} .product-detail__bundles{display: flex;flex-wrap: wrap;gap: var(--space-2)} .product-detail__bundle-btn{padding: var(--space-2) var(--space-4);font-size: var(--text-xs)} .product-detail__bundle-btn.active{background: var(--heading);color: var(--bg);border-color: var(--heading);box-shadow: 0 4px 14px rgba(58, 53, 46, 0.15)} .product-detail__qty{display: inline-flex;align-items: center;gap: var(--space-2)} .product-detail__qty-btn{width: 44px;height: 44px;display: inline-flex;align-items: center;justify-content: center;border: 1px solid var(--hairline);border-radius: var(--radius-full);background: var(--bg);color: var(--heading);cursor: pointer;transition: all var(--duration-normal) var(--ease-out-expo)} .product-detail__qty-btn:hover{background: var(--heading);color: var(--bg);border-color: var(--heading);transform: translateY(-1px);box-shadow: var(--shadow-sm)} .product-detail__qty-input{width: 54px;height: 44px;border: 1px solid var(--hairline);border-radius: var(--radius-full);text-align: center;font-family: var(--font-body);font-size: var(--text-lg);font-weight: 600;color: var(--heading);background: transparent;-moz-appearance: textfield;appearance: textfield} .product-detail__qty-input:focus{outline: none;border-color: var(--heading)} .product-detail__qty-input::-webkit-inner-spin-button, .product-detail__qty-input::-webkit-outer-spin-button{-webkit-appearance: none;margin: 0} .product-detail__meta{padding: var(--space-6) var(--space-8);border: 1px solid var(--hairline);background: var(--bg);border-radius: var(--radius-md);box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02)} .product-detail__meta-list{display: grid;grid-template-columns: 110px 1fr;gap: var(--space-4) var(--space-6);font-size: var(--text-sm)} @media (max-width: 567px){.product-detail__meta{padding: var(--space-4);align-self: stretch} .product-detail__meta-list{grid-template-columns: 90px 1fr;gap: var(--space-3) var(--space-4)} } .product-detail__meta-list dt{color: var(--meta);font-weight: 500} .product-detail__meta-list dd{color: var(--heading);font-weight: 600} .product-related-scroll{display: flex;gap: var(--space-4);overflow-x: auto;padding-bottom: var(--space-6);scroll-snap-type: x mandatory;-webkit-overflow-scrolling: touch;scrollbar-width: none} .product-related-scroll::-webkit-scrollbar{display: none} .product-related-card{flex: 0 0 calc(25% - (var(--space-4) * 3 / 4));min-width: 200px;scroll-snap-align: start;display: flex;flex-direction: column;text-decoration: none;color: var(--text);position: relative;padding: var(--space-3);border-radius: var(--radius-lg);transition: background var(--duration-normal) var(--ease-default)} .product-related-card:hover{background: color-mix(in srgb, var(--accent, var(--heading)) 8%, transparent)} .product-related-card__image{aspect-ratio: 3 / 4;border-radius: var(--radius-md);margin-bottom: var(--space-4);position: relative;box-shadow: var(--shadow-card);overflow: hidden;isolation: isolate;transition: box-shadow var(--duration-normal) var(--ease-out-expo), transform var(--duration-normal) var(--ease-out-expo)} .product-related-card__image::before{content: '';position: absolute;inset: 0;background: radial-gradient(ellipse at 0% 0%, rgba(0, 0, 0, 0.35) 0%, transparent 55%);z-index: 1;pointer-events: none} .product-related-card__image img{width: 100%;height: 100%;object-fit: cover;display: block;transition: transform var(--duration-slow) var(--ease-out-expo)} .product-related-card:hover .product-related-card__image{box-shadow: var(--shadow-overlay);transform: translateY(-4px)} .product-related-card:hover .product-related-card__image img{transform: scale(1.04)} .product-related-card__body{display: flex;flex-direction: column;gap: var(--space-1)} .product-related-card__title{font-family: var(--font-display);font-size: var(--text-xl);font-weight: 500;line-height: 1.2;color: var(--heading);letter-spacing: -0.01em;transition: color var(--duration-fast) var(--ease-default)} .product-related-card:hover .product-related-card__title{color: var(--accent, var(--text))} .product-related-card__author{font-size: var(--text-sm);color: var(--meta);font-style: italic} @media (max-width: 1023px){.product-related-card{flex: 0 0 calc(50% - (var(--space-4) / 2))} } @media (max-width: 767px){.featured-products-grid > .product-card{flex: 0 0 70vw;scroll-snap-align: center} .featured-products-grid > .carousel-spacer{flex: 0 0 calc(15vw - var(--space-4))} .product-related-card{flex: 0 0 80vw;min-width: 0;scroll-snap-align: center} } .category-tile{display: inline-flex;align-items: center;gap: var(--space-3);padding: var(--space-3) var(--space-4);border: 1px solid var(--hairline);text-decoration: none;color: var(--text);font-size: var(--text-sm);border-radius: var(--radius-full);background: var(--glass-bg);backdrop-filter: blur(8px);-webkit-backdrop-filter: blur(8px);transition: all var(--duration-normal) var(--ease-out-expo)} .category-tile:hover{border-color: color-mix(in srgb, var(--category-color, var(--text)) 50%, transparent);background: color-mix(in srgb, var(--category-color, var(--meta)) 8%, transparent);box-shadow: var(--shadow-sm);transform: translateY(-2px)} .category-tile__dot{width: 10px;height: 10px;border-radius: 50%;background: var(--category-color, var(--meta));flex-shrink: 0;transition: transform var(--duration-normal) var(--ease-spring)} .category-tile:hover .category-tile__dot{transform: scale(1.3)} .category-tile__name{font-weight: 600;color: var(--heading)} .category-tile__count{color: var(--meta);font-size: var(--text-xs)} .category-tiles{display: flex;flex-wrap: wrap;gap: var(--space-3)} .progress-bar{width: 100%;height: 4px;background: var(--hairline);overflow: hidden;margin: var(--space-2) 0} .progress-bar__fill{height: 100%;background: var(--cat-color, var(--heading));transition: width var(--duration-normal) var(--ease-default)} .progress-bar-group{display: flex;align-items: center;gap: var(--space-3)} .progress-bar-group .progress-bar{flex: 1} .progress-bar__label{font-size: var(--text-xs);color: var(--meta);white-space: nowrap} .pagination{display: flex;flex-wrap: wrap;justify-content: center;align-items: center;gap: var(--space-3);margin-top: var(--space-12);padding: var(--space-6) 0} .pagination__link, .pagination__current{display: inline-flex;align-items: center;justify-content: center;min-width: 44px;height: 44px;padding: 0 var(--space-4);font-size: var(--text-sm);font-weight: 600;line-height: 1;border-radius: var(--radius-full);text-decoration: none;cursor: pointer;transition: all var(--duration-normal) var(--ease-out-expo);transform: translateZ(0)} .pagination__link{background: transparent;color: var(--heading);border: 1px solid var(--hairline)} .pagination__link:hover{border-color: var(--heading);background: var(--bg);transform: translateY(-2px);box-shadow: var(--shadow-sm)} .pagination__current{background: var(--heading);color: var(--bg);border: none;box-shadow: 0 4px 14px rgba(58, 53, 46, 0.15)} .pagination__dots{color: var(--meta);font-size: var(--text-sm);padding: 0 var(--space-1)} .pagination__prev, .pagination__next{font-weight: 600} .pagination__prev svg, .pagination__next svg{width: 16px;height: 16px;transition: transform var(--duration-normal) var(--ease-out-expo)} .pagination__next:hover svg{transform: translateX(2px)} .pagination__prev:hover svg{transform: translateX(-2px)} .share-buttons{display: flex;align-items: center;gap: var(--space-3);flex-wrap: wrap} .share-buttons__label{font-size: var(--text-sm);color: var(--meta)} .share-buttons__btn{display: flex;align-items: center;justify-content: center;width: 44px;height: 44px;color: var(--meta);border: 1px solid var(--hairline);text-decoration: none;border-radius: 50%;background: var(--glass-bg);backdrop-filter: blur(8px);-webkit-backdrop-filter: blur(8px);transition: all var(--duration-normal) var(--ease-out-expo)} .share-buttons__btn:hover{color: var(--heading);border-color: var(--heading);transform: translateY(-2px);box-shadow: var(--shadow-sm)} .share-buttons__btn svg{width: 20px;height: 20px} .share-buttons__native{display: none} .share-buttons--has-native .share-buttons__native{display: flex} .share-buttons--has-native .share-buttons__btn:not(.share-buttons__native){display: none} .series-nav{display: grid;grid-template-columns: 1fr auto 1fr;align-items: center;gap: var(--space-4);padding: var(--space-6) 0;margin-top: var(--space-8);position: relative} .series-nav::before{content: '';position: absolute;top: 0;left: 50%;transform: translateX(-50%);width: 100vw;height: 1px;background: var(--hairline)} .series-nav__prev, .series-nav__next{display: inline-flex;align-items: center;gap: var(--space-3);padding: var(--space-3) var(--space-4);border-radius: var(--radius-md);text-decoration: none;color: var(--text);transition: background var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default), transform var(--duration-fast) var(--ease-default);min-width: 0} .series-nav__prev{justify-self: start} .series-nav__next{justify-self: end;text-align: right} .series-nav__prev:hover, .series-nav__next:hover{background: rgba(92, 85, 73, 0.06);color: var(--heading);transform: translateY(-1px)} .series-nav__prev svg, .series-nav__next svg{width: 20px;height: 20px;flex-shrink: 0;transition: transform var(--duration-fast) var(--ease-default)} .series-nav__prev:hover svg{transform: translateX(-2px)} .series-nav__next:hover svg{transform: translateX(2px)} .series-nav__prev > span, .series-nav__next > span{display: flex;flex-direction: column;gap: 2px;min-width: 0} .series-nav__label{font-size: var(--text-xs);color: var(--meta);text-transform: uppercase;letter-spacing: 0.06em;display: block;line-height: 1} .series-nav__title{font-family: var(--font-display);font-size: var(--text-sm);font-weight: 600;color: var(--heading);display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 22ch} .series-nav__overview{justify-self: center;white-space: nowrap;padding: var(--space-2) var(--space-4);border: 1px solid var(--hairline);border-radius: var(--radius-full);font-size: var(--text-xs);text-transform: uppercase;letter-spacing: 0.06em;color: var(--meta);text-decoration: none;transition: background var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default)} .series-nav__overview:hover{background: rgba(92, 85, 73, 0.06);border-color: var(--text);color: var(--heading)} .series-nav__prev--disabled, .series-nav__next--disabled{opacity: 0.25;pointer-events: none;cursor: default} @media (max-width: 767px){.series-nav{padding: var(--space-4) 0;gap: var(--space-2)} .series-nav__prev, .series-nav__next{padding: var(--space-2) var(--space-3)} .series-nav__title{display: none} .series-nav__label{font-size: 0.6rem} .series-nav__overview{padding: var(--space-2) var(--space-3);font-size: 0.6rem} } .serie-list{list-style: none;margin: 0;padding: 0} .serie-list__item{border-bottom: 1px solid var(--hairline)} .serie-list__link{display: flex;align-items: center;gap: var(--space-3);padding: var(--space-3) var(--space-2);text-decoration: none;color: var(--text);transition: background var(--duration-fast) var(--ease-default)} .serie-list__link:hover{background: rgba(0, 0, 0, 0.03)} .serie-list__day{flex-shrink: 0;width: 2.5rem;text-align: right;font-family: var(--font-display);font-size: var(--text-lg);font-weight: 500;color: var(--meta)} .serie-list__title{font-size: var(--text-base);line-height: 1.4} @media (max-width: 567px){.serie-list__day{width: 2rem;font-size: var(--text-base)} } .breadcrumbs{margin-bottom: var(--space-4)} .breadcrumbs__list{display: flex;align-items: center;flex-wrap: wrap;gap: var(--space-1);font-size: var(--text-xs);color: var(--meta)} .breadcrumbs__list li{display: flex;align-items: center;gap: var(--space-1)} .breadcrumbs__list li:not(:last-child)::after{content: '/';color: var(--hairline);margin-left: var(--space-1)} .breadcrumbs__list a{color: var(--meta);text-decoration: none;transition: color var(--duration-fast) var(--ease-default)} .breadcrumbs__list a:hover{color: var(--text)} .breadcrumbs__list li:last-child{color: var(--text)} .chat-links{display: flex;flex-direction: column;gap: var(--space-2)} .chat-links__heading{font-size: var(--text-sm);font-weight: 600;color: var(--heading);margin-bottom: var(--space-1)} .chat-links__link{display: inline-flex;align-items: center;gap: var(--space-2);padding: var(--space-2) var(--space-3);font-size: var(--text-sm);color: var(--text);border: 1px solid var(--hairline);text-decoration: none;transition: border-color var(--duration-fast) var(--ease-default)} .chat-links__link:hover{border-color: var(--text)} .chat-links__link svg{width: 18px;height: 18px;flex-shrink: 0} .chat-links__link--whatsapp:hover{border-color: #25D366;color: #25D366} .chat-links__link--telegram:hover{border-color: #0088cc;color: #0088cc} .chat-links__link--signal:hover{border-color: #3A76F0;color: #3A76F0} .ecosystem-card{display: flex;flex-direction: column;position: relative;padding: var(--space-8);border: 1px solid var(--hairline);border-radius: var(--radius-lg);text-decoration: none;color: var(--text);transition: box-shadow var(--duration-normal) var(--ease-default), transform var(--duration-normal) var(--ease-out-expo)} .ecosystem-card:hover{box-shadow: var(--shadow-card);transform: translateY(-3px)} .ecosystem-card__logo{position: absolute;top: var(--space-6);right: var(--space-6);color: var(--heading);line-height: 0;opacity: 0.5;transition: opacity var(--duration-fast) var(--ease-default)} .ecosystem-card:hover .ecosystem-card__logo{opacity: 1} .ecosystem-card__logo svg{height: 32px;width: auto} .ecosystem-card--wvg .ecosystem-card__logo{color: var(--heading)} .ecosystem-card--ljk .ecosystem-card__logo{color: #004979} .ecosystem-card__title{font-family: var(--font-display);font-size: var(--text-2xl);font-weight: 500;color: var(--heading);margin-bottom: var(--space-3)} .ecosystem-card__desc{font-size: var(--text-sm);line-height: 1.6;color: var(--text);flex: 1} .ecosystem-card__cta{display: inline-flex;align-items: center;gap: var(--space-2);font-size: var(--text-sm);font-weight: 600;color: var(--heading);margin-top: var(--space-4);padding: var(--space-2) var(--space-3);border-radius: var(--radius-sm);transition: background var(--duration-fast) var(--ease-default)} .ecosystem-card__cta:hover{background: color-mix(in srgb, var(--text) 5%, transparent)} .ecosystem-card__cta svg{width: 16px;height: 16px} @media (max-width: 567px){.ecosystem-card{padding: var(--space-6)} .ecosystem-card__logo svg{height: 32px} } .search-island__input{flex: 1;min-width: 0;height: 40px;padding: 0 var(--space-3);border: none;border-radius: var(--radius-sm);background: rgba(92, 85, 73, 0.06);font-size: var(--text-base);font-family: var(--font-body);color: var(--heading);caret-color: var(--heading)} .search-island__input::placeholder{color: var(--meta)} .search-island__input:focus{outline: none;background: rgba(92, 85, 73, 0.09)} .search-island__close{display: flex;align-items: center;justify-content: center;flex-shrink: 0;width: 40px;height: 40px;color: var(--meta);border-radius: var(--radius-sm);transition: color var(--duration-fast) var(--ease-default), background var(--duration-fast) var(--ease-default)} .search-island__close:hover{color: var(--heading);background: rgba(92, 85, 73, 0.08)} .search-island__close svg{width: 18px;height: 18px} .search-island__kbd{display: none;font-family: var(--font-mono, monospace);font-size: 11px;line-height: 1;padding: 2px 6px;border-radius: 4px;color: var(--meta);background: rgba(92, 85, 73, 0.08);flex-shrink: 0;white-space: nowrap} @media (min-width: 768px){.search-island__kbd{display: block} } .search-results-dropdown{overflow: hidden;max-height: 0;opacity: 0;transition: max-height 400ms var(--ease-out-expo), opacity 300ms var(--ease-out-expo)} .search-results-dropdown--visible{max-height: 70vh;opacity: 1;transition: max-height 450ms var(--ease-out-expo), opacity 350ms var(--ease-out-expo) 50ms} .search-results-dropdown__list{max-height: 60vh;overflow-y: auto;margin-top: var(--space-4);padding: var(--space-3) var(--space-2) var(--space-2);border-top: 1px solid var(--hairline)} .search-result-item{display: flex;align-items: center;gap: var(--space-3);padding: var(--space-2) var(--space-3);text-decoration: none;color: var(--text);border-radius: var(--radius-md);transition: background var(--duration-normal) var(--ease-out-expo)} .search-result-item:hover{background: rgba(92, 85, 73, 0.06)} .search-result-item + .search-result-item{margin-top: 2px} .search-result-item__image{flex-shrink: 0;width: 48px;height: 48px;object-fit: cover;border-radius: var(--radius-sm);background: var(--hairline)} .search-result-item__body{flex: 1;min-width: 0} .search-result-item__title{font-family: var(--font-display);font-size: var(--text-base);font-weight: 600;color: var(--heading);line-height: 1.3;white-space: nowrap;overflow: hidden;text-overflow: ellipsis} .search-result-item__meta{font-size: var(--text-xs);color: var(--meta);margin-top: 2px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis} .search-results-dropdown__empty{padding: var(--space-4);font-size: var(--text-sm);color: var(--meta);text-align: center} .search-results-dropdown__footer{border-top: 1px solid var(--hairline);padding: var(--space-3) var(--space-3);text-align: center} .search-results-dropdown__more{display: inline-flex;align-items: center;justify-content: center;gap: var(--space-2);padding: var(--space-2) var(--space-3);font-family: var(--font-body);font-size: var(--text-sm);font-weight: 600;line-height: 1;color: var(--text);text-decoration: none;border-radius: var(--radius-sm);background: transparent;transition: all var(--duration-normal) var(--ease-out-expo)} .search-results-dropdown__more svg{width: 16px;height: 16px;transition: transform var(--duration-normal) var(--ease-out-expo)} .search-results-dropdown__more:hover svg{transform: translateX(2px)} .search-results-dropdown__more:hover{color: var(--heading);background: color-mix(in srgb, var(--text) 5%, transparent)} .search-page{max-width: 800px;margin: 0 auto;padding-top: var(--space-12);padding-bottom: var(--space-24);padding-left: var(--grid-margin);padding-right: var(--grid-margin)} .search-page__title{font-family: var(--font-display);font-size: var(--text-4xl);font-weight: 700;text-align: center;margin-bottom: var(--space-6);color: var(--heading)} .search-page__form{display: flex;gap: var(--space-2);background: rgba(92, 85, 73, 0.06);padding: var(--space-1);border-radius: var(--radius-full);box-shadow: var(--shadow-sm);border: 1px solid var(--hairline);margin-bottom: var(--space-8);transition: background var(--duration-normal) var(--ease-default), box-shadow var(--duration-normal) var(--ease-default)} .search-page__form:focus-within{background: rgba(92, 85, 73, 0.09);box-shadow: var(--shadow-card)} .search-page__input{flex: 1;min-width: 0;border: none;background: transparent;padding: var(--space-2) var(--space-4);font-family: var(--font-body);font-size: var(--text-base);color: var(--heading);outline: none} .search-page__input::placeholder{color: var(--meta)} .search-page__summary{font-size: var(--text-sm);color: var(--meta);text-align: center;margin-bottom: var(--space-8)} .search-page__grid{display: flex;flex-direction: column;gap: var(--space-2)} .search-page__empty{text-align: center;padding: var(--space-12) 0;font-size: var(--text-lg);color: var(--meta)} .search-page__item{display: block;text-decoration: none;color: var(--text);border-radius: var(--radius-md);border: 1px solid var(--hairline);padding: var(--space-6) var(--space-8);background: var(--bg);transition: background var(--duration-normal) var(--ease-out-expo), box-shadow var(--duration-normal) var(--ease-out-expo), transform var(--duration-normal) var(--ease-out-expo)} .search-page__item:hover{background: color-mix(in srgb, var(--text) 3%, var(--bg));box-shadow: var(--shadow-sm);transform: translateY(-2px)} .search-page__item-body{min-width: 0} .search-page__item-label{display: inline-block;font-size: var(--text-xs);font-weight: 600;text-transform: uppercase;letter-spacing: 0.07em;color: var(--meta);margin-bottom: var(--space-2)} .search-page__item-title{font-family: var(--font-display);font-size: var(--text-xl);font-weight: 600;line-height: 1.3;color: var(--heading);margin-bottom: var(--space-1)} .search-page__item-meta{font-size: var(--text-xs);color: var(--meta);margin-bottom: var(--space-2)} .search-page__item-excerpt{font-size: var(--text-sm);line-height: 1.6;color: var(--text);display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden} @media (max-width: 767px){.search-page__item{padding: var(--space-4) var(--space-6)} .search-page__title{font-size: var(--text-3xl)} } .hero-section{padding: 0 0 var(--grid-margin);display: flex;align-items: center;width: 100%} .hero-grid{display: grid;grid-template-columns: 5fr 5fr;gap: var(--space-8);align-items: center;width: 100%} .hero-content{display: flex;flex-direction: column;align-items: flex-start;z-index: 2;position: relative} .hero-meta{display: flex;align-items: center;gap: var(--space-4);margin-bottom: var(--space-4)} .hero-title{font-family: var(--font-display);font-size: var(--text-6xl);font-weight: 700;line-height: 1.1;letter-spacing: -0.04em;color: var(--heading);margin-bottom: var(--space-4);text-wrap: balance} .hero-excerpt{font-size: var(--text-lg);line-height: 1.5;color: var(--text);margin-bottom: var(--space-6);max-width: 45ch;text-wrap: pretty} .hero-author{margin-bottom: var(--space-6)} .hero-visual{position: relative;width: 100%;z-index: 1;display: block;transform-origin: top center} .hero-image-wrapper{display: block;border-radius: var(--radius-lg);overflow: hidden;box-shadow: var(--shadow-overlay);aspect-ratio: 1 / 1;width: 100%} .hero-image-wrapper img{width: 100%;height: 100%;object-fit: cover;transition: transform 10s var(--ease-out-expo);display: block} .hero-image-wrapper:hover img{transform: scale(1.05)} .hero-visual--sticky{position: sticky;top: 80px} @media (max-width: 767px){.hero-image-wrapper{aspect-ratio: 1 / 1;max-height: none;width: 100%} } @media (max-width: 567px){.hero-grid{margin-bottom: var(--space-6) !important} .hero-title{font-size: var(--text-4xl)} .hero-section{padding: var(--space-4) 0 var(--space-6)} } @media (max-width: 1023px){.hero-section{padding-top: var(--space-4)} .hero-grid{grid-template-columns: 1fr;gap: var(--space-6)} .hero-visual{order: -1} .hero-visual--sticky{position: static} .hero-image-wrapper{aspect-ratio: 4 / 3;max-height: 55vw} } .bible-ref{color: var(--category-color, var(--text));text-decoration: underline;text-decoration-style: dotted;text-decoration-color: var(--category-color, var(--hairline));text-underline-offset: 3px;cursor: pointer} .bible-ref:hover{text-decoration-style: solid} .bible-tooltip{position: absolute;z-index: 120;width: min(360px, 90vw);background: var(--glass-bg);backdrop-filter: blur(16px);-webkit-backdrop-filter: blur(16px);border: 1px solid var(--hairline);border-radius: var(--radius-lg);box-shadow: var(--shadow-overlay);padding: var(--space-4);opacity: 0;transform: scale(0.94) translateY(8px);transition: opacity var(--duration-normal) var(--ease-out-expo), transform var(--duration-slow) var(--ease-spring);pointer-events: none} .bible-tooltip--visible{opacity: 1;transform: scale(1) translateY(0);pointer-events: auto} .bible-tooltip__header{display: flex;align-items: center;justify-content: space-between;margin-bottom: var(--space-2)} .bible-tooltip__ref{font-family: var(--font-display);font-size: var(--text-base);font-weight: 600;color: var(--heading)} .bible-tooltip__translation{font-size: var(--text-xs);color: var(--meta);margin-left: var(--space-1);font-weight: 400} .bible-tooltip__close{display: flex;align-items: center;justify-content: center;width: 24px;height: 24px;color: var(--meta);flex-shrink: 0} .bible-tooltip__close:hover{color: var(--heading)} .bible-tooltip__close svg{width: 14px;height: 14px} .bible-tooltip__divider{height: 1px;background: var(--hairline);margin: var(--space-1) 0 var(--space-2)} .bible-tooltip__text{font-family: var(--font-body);font-style: italic;font-size: var(--text-base);line-height: 1.6;color: var(--text);margin-bottom: var(--space-2)} .bible-tooltip__verse-num{font-style: normal;font-size: var(--text-xs);color: var(--meta);vertical-align: super;margin-right: 2px} .bible-tooltip__actions{display: flex;align-items: center;justify-content: space-between;padding-top: var(--space-2);border-top: 1px solid var(--hairline)} .bible-tooltip__context-btn{display: inline-flex;align-items: center;gap: var(--space-1);font-size: var(--text-sm);font-weight: 600;color: var(--heading)} .bible-tooltip__context-btn:hover{text-decoration: underline} .bible-tooltip__context-btn svg{width: 14px;height: 14px} .bible-modal-overlay{position: fixed;inset: 0;z-index: 200;background: rgba(58, 53, 46, 0.4);backdrop-filter: blur(4px);-webkit-backdrop-filter: blur(4px);opacity: 0;pointer-events: none;transition: opacity var(--duration-normal) var(--ease-out-expo)} .bible-modal-overlay--open{opacity: 1;pointer-events: auto} .bible-modal{position: fixed;z-index: 210;top: 50%;left: 50%;width: min(640px, calc(100vw - var(--space-8)));max-height: 85vh;transform: translate(-50%, -50%) scale(0.96);opacity: 0;pointer-events: none;background: var(--bg);border: 1px solid var(--hairline);border-radius: var(--radius-lg);box-shadow: var(--shadow-overlay);display: flex;flex-direction: column;overflow: hidden;transition: transform var(--duration-slow) var(--ease-spring), opacity var(--duration-normal) var(--ease-out-expo)} .bible-modal--open{opacity: 1;pointer-events: auto;transform: translate(-50%, -50%) scale(1)} .bible-reader__header{display: flex;align-items: center;justify-content: space-between;padding: var(--space-4) var(--space-6);border-bottom: 1px solid var(--hairline);flex-shrink: 0} .bible-reader__title-btn{display: inline-flex;align-items: center;gap: var(--space-2);font-family: var(--font-display);font-size: var(--text-xl);font-weight: 600;color: var(--heading);cursor: pointer;border-radius: var(--radius-sm);padding: var(--space-1) var(--space-2);margin: calc(-1 * var(--space-1)) calc(-1 * var(--space-2));transition: background var(--duration-fast) var(--ease-default)} .bible-reader__title-btn:hover{background: rgba(92, 85, 73, 0.06)} .bible-reader__title-btn svg{width: 16px;height: 16px;color: var(--meta);transition: transform var(--duration-fast) var(--ease-default)} .bible-reader__title-btn--expanded svg{transform: rotate(180deg)} .bible-reader__translation{font-size: var(--text-xs);color: var(--meta);font-weight: 400;margin-left: var(--space-1)} .bible-reader__close{display: flex;align-items: center;justify-content: center;width: 36px;height: 36px;border-radius: var(--radius-sm);color: var(--meta);flex-shrink: 0;transition: background var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default)} .bible-reader__close:hover{color: var(--heading);background: rgba(92, 85, 73, 0.06)} .bible-reader__close svg{width: 20px;height: 20px} .bible-picker{display: none;flex: 1;overflow-y: auto;-webkit-overflow-scrolling: touch} .bible-picker--open{display: block} .bible-modal--picker-open .bible-reader__body, .bible-modal--picker-open .bible-reader__nav{display: none} .bible-picker__section{padding: var(--space-3) var(--space-6)} .bible-picker__section-title{font-size: var(--text-xs);font-weight: 600;text-transform: uppercase;letter-spacing: 0.05em;color: var(--meta);margin-bottom: var(--space-2)} .bible-picker__grid{display: grid;grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));gap: var(--space-1)} .bible-picker__book{padding: var(--space-1) var(--space-2);font-size: var(--text-sm);color: var(--text);border-radius: var(--radius-sm);text-align: left;cursor: pointer;transition: background var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default);white-space: nowrap;overflow: hidden;text-overflow: ellipsis} .bible-picker__book:hover{background: rgba(92, 85, 73, 0.06);color: var(--heading)} .bible-picker__book--active{font-weight: 600;color: var(--heading);background: rgba(92, 85, 73, 0.08)} .bible-picker__chapters{padding: var(--space-3) var(--space-6);border-top: 1px solid var(--hairline)} .bible-picker__chapters-title{font-size: var(--text-xs);font-weight: 600;text-transform: uppercase;letter-spacing: 0.05em;color: var(--meta);margin-bottom: var(--space-2)} .bible-picker__chapter-grid{display: grid;grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));gap: var(--space-1)} .bible-picker__chapter{display: flex;align-items: center;justify-content: center;height: 36px;font-size: var(--text-sm);font-weight: 500;color: var(--text);border-radius: var(--radius-sm);cursor: pointer;transition: background var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default)} .bible-picker__chapter:hover{background: rgba(92, 85, 73, 0.06);color: var(--heading)} .bible-picker__chapter--active{font-weight: 700;color: var(--heading);background: rgba(92, 85, 73, 0.1)} .bible-reader__body{flex: 1;overflow-y: auto;padding: var(--space-6);-webkit-overflow-scrolling: touch} .bible-reader__text{font-family: var(--font-body);font-size: var(--text-base);line-height: 1.8;color: var(--text)} .bible-reader__verse{display: inline} .bible-reader__verse-num{font-size: var(--text-xs);color: var(--meta);vertical-align: super;margin-right: 2px;font-style: normal;cursor: default} .bible-reader__verse--highlight{background: rgba(92, 85, 73, 0.08);border-radius: 2px;padding: 2px 0;font-weight: 600} .bible-reader__nav{display: flex;align-items: center;justify-content: space-between;padding: var(--space-3) var(--space-6);border-top: 1px solid var(--hairline);flex-shrink: 0} .bible-reader__nav-btn{display: inline-flex;align-items: center;gap: var(--space-1);font-size: var(--text-sm);font-weight: 600;color: var(--heading);padding: var(--space-1) var(--space-2);border-radius: var(--radius-sm);transition: background var(--duration-fast) var(--ease-default)} .bible-reader__nav-btn:hover{background: rgba(92, 85, 73, 0.06)} .bible-reader__nav-btn--disabled{color: var(--meta);pointer-events: none;opacity: 0.4} .bible-reader__nav-btn svg{width: 16px;height: 16px} @media (max-width: 479px){.bible-modal{width: calc(100vw - var(--space-4));max-height: 90vh} .bible-reader__header{padding: var(--space-3) var(--space-4)} .bible-reader__body{padding: var(--space-4)} .bible-reader__nav{padding: var(--space-3) var(--space-4)} .bible-picker__section{padding: var(--space-3) var(--space-4)} .bible-picker__chapters{padding: var(--space-3) var(--space-4)} .bible-picker__grid{grid-template-columns: repeat(auto-fill, minmax(100px, 1fr))} } .bottom-sheet-overlay{position: fixed;inset: 0;z-index: 200;background: rgba(58, 53, 46, 0.4);opacity: 0;pointer-events: none;transition: opacity var(--duration-normal) var(--ease-default)} .bottom-sheet-overlay--visible{opacity: 1;pointer-events: auto} .bottom-sheet{position: fixed;bottom: 0;left: 0;right: 0;z-index: 210;background: var(--bg);border-top: 1px solid var(--hairline);height: 85vh;transform: translateY(100%);transition: transform var(--duration-normal) var(--ease-default);display: flex;flex-direction: column;overscroll-behavior: contain} .bottom-sheet--open{transform: translateY(0)} .bottom-sheet__handle{display: flex;align-items: center;justify-content: center;padding: var(--space-2) 0;cursor: grab;flex-shrink: 0;touch-action: none} .bottom-sheet__handle-bar{width: 40px;height: 4px;background: var(--hairline);border-radius: 2px} .bottom-sheet__content{flex: 1;overflow-y: auto;-webkit-overflow-scrolling: touch;overscroll-behavior: contain} @media (min-width: 768px){.bottom-sheet, .bottom-sheet-overlay{display: none} } audio.audio-player--upgraded{display: none} .audio-inline-trigger{display: inline-flex;align-items: center;gap: var(--space-2);padding: var(--space-2) var(--space-4);border: 1px solid var(--hairline);background: transparent;color: var(--text);font-family: var(--font-body);font-size: var(--text-sm);cursor: pointer;transition: border-color var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default)} .audio-inline-trigger:hover{border-color: var(--heading);color: var(--heading)} .audio-inline-trigger svg{width: 18px;height: 18px;flex-shrink: 0} .site-header__audio-btn{position: relative} .site-header__audio-btn--playing::after{content: '';position: absolute;top: 6px;right: 4px;width: 8px;height: 8px;border-radius: 50%;background: var(--heading);animation: audio-header-pulse 2s ease-in-out infinite} @keyframes audio-header-pulse{0%, 100%{opacity: 1;transform: scale(1)} 50%{opacity: 0.5;transform: scale(1.4)} } .audio-header__title{flex: 1;min-width: 0;font-family: var(--font-display);font-size: var(--text-sm);font-weight: 600;color: var(--heading);white-space: nowrap;overflow: hidden;text-overflow: ellipsis} .audio-header__play{display: flex;align-items: center;justify-content: center;flex-shrink: 0;width: 32px;height: 32px;border-radius: 50%;background: var(--heading);color: var(--bg);border: none;cursor: pointer;transition: background var(--duration-fast) var(--ease-default)} .audio-header__play:hover{background: var(--text)} .audio-header__play svg{width: 16px;height: 16px} .audio-header__track{flex: 2;min-width: 60px;height: 4px;background: var(--hairline);border-radius: 2px;cursor: pointer;position: relative} .audio-header__track-fill{height: 100%;background: var(--heading);border-radius: 2px;width: 0%;transition: width 0.15s linear;pointer-events: none} .audio-header__time{flex-shrink: 0;font-size: var(--text-xs);color: var(--meta);font-variant-numeric: tabular-nums;white-space: nowrap} .audio-header__skip{display: flex;align-items: center;justify-content: center;flex-shrink: 0;width: 28px;height: 28px;color: var(--text);border: none;background: none;cursor: pointer;padding: 0;transition: color var(--duration-fast) var(--ease-default)} .audio-header__skip:hover{color: var(--heading)} .audio-header__skip svg{width: 16px;height: 16px} .audio-header__speed{flex-shrink: 0;font-family: var(--font-body);font-size: var(--text-xs);font-weight: 600;padding: var(--space-1) var(--space-2);color: var(--meta);border: 1px solid var(--hairline);background: none;border-radius: var(--radius-sm);cursor: pointer;transition: all var(--duration-fast) var(--ease-default)} .audio-header__speed:hover{border-color: var(--heading);color: var(--heading)} .article-layout .video-player{margin: 0 auto var(--grid-margin);max-width: 1200px;box-shadow: var(--shadow-card)} .video-player{position: relative;border-radius: var(--radius-md, 12px);overflow: hidden;background: #000} .video-player__container{position: relative;aspect-ratio: 16 / 9;background: #000} .video-player__poster{width: 100%;height: 100%;object-fit: cover;cursor: pointer;display: block} .video-player__native{width: 100%;height: 100%;object-fit: contain;display: block} .video-player__container iframe{position: absolute;inset: 0;width: 100%;height: 100%;border: 0} .video-player__play-btn{position: absolute;top: 50%;left: 50%;right: auto;bottom: auto;transform: translate(-50%, -50%);width: 56px;height: 56px;display: flex;align-items: center;justify-content: center;background: rgba(244, 235, 225, 0.35);backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(20px);border: 1px solid rgba(244, 235, 225, 0.15);border-radius: 50%;cursor: pointer;color: #fff;transition: background 0.2s ease, transform 0.2s ease;z-index: 2} .video-player__play-btn svg{width: 22px;height: 22px} .video-player__play-btn:hover{background: rgba(244, 235, 225, 0.5);transform: translate(-50%, -50%) scale(1.08)} .video-player[data-playing] .video-player__play-btn{display: none} .video-player__controls{position: absolute;bottom: 12px;left: 12px;right: 12px;display: flex;align-items: center;gap: 8px;padding: 8px 14px;background: rgba(244, 235, 225, 0.35);backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(20px);border-radius: var(--radius-lg, 16px);border: 1px solid rgba(244, 235, 225, 0.15);transition: opacity 0.3s ease;z-index: 3} .video-player__progress{flex: 1;height: 4px;background: rgba(255, 255, 255, 0.35);border-radius: 2px;cursor: pointer;position: relative} .video-player__progress:hover{height: 6px} .video-player__progress-bar{height: 100%;background: #fff;border-radius: 2px;width: 0%;transition: width 0.1s linear} .video-player__time{font-size: 0.75rem;color: rgba(255, 255, 255, 0.85);font-variant-numeric: tabular-nums;white-space: nowrap;user-select: none} .video-player__btn{background: none;border: none;color: #fff;cursor: pointer;padding: 4px;display: flex;align-items: center;justify-content: center;border-radius: 4px;transition: background 0.15s ease;flex-shrink: 0} .video-player__btn:hover{background: rgba(255, 255, 255, 0.15)} .video-player__btn svg{width: 20px;height: 20px} .video-player:fullscreen{border-radius: 0} .video-player:fullscreen .video-player__container{aspect-ratio: auto;width: 100%;height: 100%} .video-player:fullscreen .video-player__native{object-fit: contain} @media (max-width: 768px){.article-layout .video-player{margin: 0 var(--grid-margin) var(--space-6);border-radius: var(--radius-lg);box-shadow: var(--shadow-overlay)} } @media (max-width: 600px){.video-player__controls{padding: 8px 10px;gap: 6px} .video-player__time{font-size: 0.7rem} .video-player__btn svg{width: 18px;height: 18px} .video-player__play-btn svg{width: 20px;height: 20px} } .video-player.video-player--pip{position: fixed;bottom: var(--space-6, 24px);right: var(--space-6, 24px);width: 320px;z-index: 150;border-radius: var(--radius-md, 12px);overflow: hidden;box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.15);animation: pip-enter 0.35s cubic-bezier(0.16, 1, 0.3, 1) both} .article-layout .video-player.video-player--pip{margin: 0;max-width: none} @keyframes pip-enter{from{opacity: 0;transform: translateY(20px) scale(0.9)} to{opacity: 1;transform: translateY(0) scale(1)} } .video-player--pip .video-player__controls{display: none !important} .video-player--pip .video-player__play-btn{display: none !important} .video-pip__overlay{display: none} .video-player--pip .video-pip__overlay{display: block} .video-pip__close, .video-pip__expand{position: absolute;top: 8px;width: 28px;height: 28px;border-radius: 50%;background: rgba(0, 0, 0, 0.5);color: #fff;border: none;cursor: pointer;display: flex;align-items: center;justify-content: center;z-index: 5;transition: background 0.15s ease, transform 0.15s ease;backdrop-filter: blur(8px);-webkit-backdrop-filter: blur(8px)} .video-pip__close{right: 8px} .video-pip__expand{left: 8px} .video-pip__close:hover, .video-pip__expand:hover{background: rgba(0, 0, 0, 0.7);transform: scale(1.1)} .video-pip__mini-bar{position: absolute;bottom: 0;left: 0;right: 0;display: flex;align-items: center;gap: 8px;padding: 8px 12px;background: rgba(244, 235, 225, 0.3);backdrop-filter: blur(16px);-webkit-backdrop-filter: blur(16px);z-index: 5} .video-pip__play{background: none;border: none;color: #fff;cursor: pointer;padding: 2px;display: flex;align-items: center;justify-content: center;flex-shrink: 0;border-radius: 4px;transition: background 0.15s} .video-pip__play:hover{background: rgba(255, 255, 255, 0.15)} .video-pip__play svg{width: 18px;height: 18px} .video-pip__progress{flex: 1;height: 3px;background: rgba(255, 255, 255, 0.3);border-radius: 2px;cursor: pointer;position: relative} .video-pip__progress:hover{height: 5px} .video-pip__progress-fill{height: 100%;background: #fff;border-radius: 2px;width: 0%;transition: width 0.15s linear} .video-pip__time{font-size: 0.7rem;color: rgba(255, 255, 255, 0.8);font-variant-numeric: tabular-nums;white-space: nowrap;user-select: none} .video-pip__placeholder{aspect-ratio: 16 / 9;border-radius: var(--radius-md, 12px);background: transparent} @media (max-width: 767px){.video-player.video-player--pip{top: var(--space-4, 16px);left: var(--grid-margin, 16px);right: var(--grid-margin, 16px);bottom: auto;width: auto;z-index: 151;border-radius: var(--radius-lg, 16px);animation: pip-enter-mobile 0.35s cubic-bezier(0.16, 1, 0.3, 1) both} .video-player--pip .video-player__controls{display: flex !important} .video-player--pip .video-pip__mini-bar{display: none !important} } @keyframes pip-enter-mobile{from{opacity: 0;transform: translateY(-20px) scale(0.95)} to{opacity: 1;transform: translateY(0) scale(1)} } .chapter-tabs{display: inline-flex;gap: var(--space-1);padding: var(--space-1);background: rgba(92, 85, 73, 0.06);border-radius: var(--radius-full);margin-bottom: var(--space-8)} .chapter-tabs__tab{display: inline-flex;align-items: center;gap: var(--space-1);padding: var(--space-1) var(--space-4);font-family: var(--font-display);font-size: var(--text-sm);font-weight: 400;color: var(--meta);background: none;border: none;border-radius: var(--radius-full);cursor: pointer;transition: color var(--duration-fast) var(--ease-out-expo), background var(--duration-normal) var(--ease-out-expo), box-shadow var(--duration-normal) var(--ease-out-expo);letter-spacing: 0.02em;position: relative;user-select: none;-webkit-user-select: none} .chapter-tabs__tab:hover{color: var(--heading)} .chapter-tabs__tab--active{color: var(--heading);font-weight: 500;background: var(--bg);box-shadow: 0 1px 3px rgba(92, 85, 73, 0.1), 0 1px 2px rgba(92, 85, 73, 0.06)} .chapter-tabs__tab svg{width: 0.8rem;height: 0.8rem;opacity: 0.7;transition: opacity var(--duration-fast) var(--ease-default)} .chapter-tabs__tab--active svg{opacity: 1} .chapter-tabs__panel{display: none} .chapter-tabs__panel--active{display: block} .has-dropcap::first-letter{font-family: var(--font-display);font-size: 3.4em;font-weight: 700;line-height: 0.82;float: left;margin-right: 0.08em;margin-bottom: -0.05em;color: var(--heading)} .verwerking{max-width: 65ch} .verwerking__save-status{font-size: var(--text-xs);color: var(--meta);text-align: right;min-height: 1rem;margin-bottom: var(--space-2);transition: opacity var(--duration-fast) var(--ease-default)} .verwerking__section{margin-bottom: var(--space-12)} .verwerking__section:last-child{margin-bottom: 0} .verwerking__section-header{display: flex;align-items: center;gap: var(--space-4);margin-bottom: var(--space-8)} .verwerking__section-number{font-family: var(--font-display);font-size: var(--text-sm);color: var(--meta);letter-spacing: 0.12em;line-height: 1} .verwerking__section-title{font-family: var(--font-display);font-size: var(--text-2xl);font-weight: 500;color: var(--heading);line-height: 1.2;margin: 0} .verwerking__section-intro{font-size: var(--text-sm);color: var(--meta);font-style: italic;margin-top: calc(-1 * var(--space-4));margin-bottom: var(--space-8)} .verwerking__question{padding: var(--space-6);margin-bottom: var(--space-4);background: rgba(92, 85, 73, 0.025);border: 1px solid rgba(92, 85, 73, 0.08);border-radius: var(--radius-md);transition: border-color var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default)} .verwerking__question:last-child{margin-bottom: 0} .verwerking__question:focus-within{border-color: rgba(92, 85, 73, 0.18);box-shadow: 0 2px 8px rgba(92, 85, 73, 0.06)} .verwerking__question-nr{display: inline-block;font-family: var(--font-display);font-size: var(--text-xs);font-weight: 500;color: var(--meta);letter-spacing: 0.08em;margin-bottom: var(--space-2);text-transform: uppercase} .verwerking__question-text{font-family: var(--font-body);font-size: var(--text-base);line-height: 1.6;color: var(--heading);font-weight: 500;margin-bottom: var(--space-4)} .verwerking__question-text:last-child{margin-bottom: 0} .verwerking__template{font-style: italic;line-height: 2.2;color: var(--text);margin-bottom: var(--space-2)} .verwerking__template:last-child{margin-bottom: 0} .verwerking__blank{display: inline-block;min-width: 8rem;max-width: 14rem;border: none;border-bottom: 1.5px solid rgba(92, 85, 73, 0.25);padding: var(--space-1) var(--space-2);font-style: normal;font-family: var(--font-body);font-size: var(--text-base);color: var(--heading);background: transparent;transition: border-color var(--duration-normal) var(--ease-out-expo), background-color var(--duration-normal) var(--ease-out-expo)} .verwerking__blank:focus{outline: none;border-bottom-color: var(--heading);background: rgba(92, 85, 73, 0.03)} .verwerking__blank::placeholder{color: var(--meta);opacity: 0.4;font-style: italic} .verwerking__ref{display: inline;font-size: var(--text-sm);color: var(--meta);font-style: normal;margin-left: var(--space-1)} .verwerking__textarea{display: block;width: 100%;min-height: 4.5rem;padding: var(--space-3) var(--space-4);border: 1.5px solid rgba(92, 85, 73, 0.12);border-radius: var(--radius-md);font-family: var(--font-body);font-size: var(--text-base);color: var(--text);background: rgba(251, 246, 239, 0.5);resize: vertical;line-height: 1.7;transition: border-color var(--duration-normal) var(--ease-out-expo), background-color var(--duration-normal) var(--ease-out-expo), box-shadow var(--duration-normal) var(--ease-out-expo)} .verwerking__textarea:focus{outline: none;border-color: rgba(92, 85, 73, 0.35);background: rgba(251, 246, 239, 0.8);box-shadow: 0 0 0 3px rgba(92, 85, 73, 0.05)} .verwerking__textarea::placeholder{color: var(--meta);opacity: 0.5;font-style: italic} .verwerking__coming-soon{padding: var(--space-16) var(--space-8);text-align: center;color: var(--meta);font-style: italic;font-size: var(--text-lg);background: rgba(92, 85, 73, 0.025);border: 1px solid rgba(92, 85, 73, 0.08);border-radius: var(--radius-lg)} @media (max-width: 767px){.chapter-tabs{width: 100%;display: flex} .chapter-tabs__tab{flex: 1;justify-content: center;padding: var(--space-1) var(--space-3);font-size: var(--text-sm)} .verwerking__question{padding: var(--space-4)} .verwerking__blank{min-width: 5rem;max-width: 10rem} .verwerking__template{line-height: 2.5} .verwerking__section-header{margin-bottom: var(--space-6)} .verwerking__section{margin-bottom: var(--space-8)} } .reading-progress-track{position: absolute;left: calc(-1 * var(--space-4));top: 0;bottom: 0;width: 1px;background: var(--hairline);border-radius: 0;pointer-events: none} .reading-progress-track__fill{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: var(--category-color, var(--heading));border-radius: 0;transform-origin: top;transform: scaleY(0);transition: transform 80ms linear} .reading-progress-track__dot{position: absolute;left: -2px;top: 0;width: 5px;height: 5px;border-radius: 50%;background: var(--category-color, var(--heading));transform: translateY(0);transition: transform 80ms linear;pointer-events: none} .reading-progress-ring{display: none} @media (max-width: 767px){.reading-progress-ring{display: block;position: absolute;inset: 0;width: 100%;height: 100%;pointer-events: none;transform: rotate(-90deg)} .reading-progress-ring circle{fill: none;stroke: var(--category-color, var(--meta));stroke-width: 2;stroke-linecap: round;transition: stroke-dashoffset 80ms linear} } @media (max-width: 1023px){.reading-progress-track{display: none} } .bible-card{max-width: 65ch;margin-left: auto;margin-right: auto;border: 1px solid var(--hairline);border-radius: var(--radius-md);background: var(--bg);box-shadow: var(--shadow-sm);overflow: hidden} .bible-card__label{font-size: var(--text-xs);font-weight: 600;letter-spacing: 0.05em;text-transform: uppercase;color: var(--meta);margin-bottom: var(--space-2)} .bible-card__verse{margin: 0;padding: var(--space-4) var(--space-6);border: none;border-bottom: 1px solid var(--hairline);border-left: none;padding-inline-start: var(--space-6)} .bible-card__verse p{font-family: var(--font-display);font-size: var(--text-base);font-style: italic;line-height: 1.5;color: var(--heading);margin: 0} .bible-card__prayer{padding: var(--space-4) var(--space-6);border-bottom: 1px solid var(--hairline)} .bible-card__prayer-body{font-size: var(--text-sm);line-height: 1.7;color: var(--text)} .bible-card__prayer-body p{margin: 0} .bible-card__question{padding: var(--space-4) var(--space-6)} .bible-card__question-body{font-family: var(--font-display);font-size: var(--text-base);font-weight: 500;line-height: 1.4;color: var(--heading);margin: 0} @media (max-width: 479px){.bible-card__verse, .bible-card__prayer, .bible-card__question{padding-left: var(--space-4);padding-right: var(--space-4)} } .contact-page{padding: var(--space-16) var(--grid-margin) var(--space-24)} .contact-page__inner{max-width: 720px;margin: 0 auto} .contact-page__lead{font-size: var(--text-lg);color: var(--text);line-height: 1.6;margin: 0 0 var(--space-12)} .contact-page__form-wrap{padding: var(--space-8);border: 1px solid var(--hairline);border-radius: var(--radius-lg);background: var(--glass-bg);backdrop-filter: blur(12px);-webkit-backdrop-filter: blur(12px);box-shadow: var(--shadow-card)} .contact-form__grid{display: grid;grid-template-columns: 1fr 1fr;gap: var(--space-4);margin-bottom: var(--space-4)} @media (max-width: 567px){.contact-form__grid{grid-template-columns: 1fr} } .contact-form__field{display: flex;flex-direction: column;gap: var(--space-1)} .contact-form__label{font-size: var(--text-sm);font-weight: 600;color: var(--heading);letter-spacing: 0.01em} .contact-form__input{font-family: var(--font-body);font-size: var(--text-base);color: var(--heading);background: var(--bg);border: 1px solid var(--hairline);border-radius: var(--radius-md);padding: var(--space-3) var(--space-4);transition: border-color var(--duration-normal) var(--ease-out-expo), box-shadow var(--duration-normal) var(--ease-out-expo)} .contact-form__input::placeholder{color: var(--meta)} .contact-form__input:focus{outline: none;border-color: var(--heading);box-shadow: 0 0 0 3px rgba(58, 53, 46, 0.08)} .contact-form__textarea{resize: vertical;min-height: 140px;margin-bottom: var(--space-4)} .contact-form__actions{display: flex;justify-content: flex-start} .contact-form__actions .btn{padding: var(--space-3) var(--space-8)} .contact-form__feedback{margin-top: var(--space-4);font-size: var(--text-sm);line-height: 1.5;min-height: 1.5em} .contact-form__feedback:empty{display: none} .contact-form__feedback--success{color: var(--cat-geestelijke-groei-dark)} .contact-form__feedback--error{color: var(--cat-relaties-dark)} @media (max-width: 479px){.contact-page{padding: var(--space-8) var(--grid-margin) var(--space-12)} .contact-page__form-wrap{padding: var(--space-6)} }