/* ==========================================================================
   Wasl — optional components (overlay header, image hero, post sliders, embedded video,
   cover-flow gallery, columns footer). Token-driven like wasl.css; loaded right after it.
   ========================================================================== */

/* ---- overlay header (transparent over the hero on the home page, solid elsewhere) ---- */
[data-header='overlay'] .site-header { position: absolute; inset-inline: 0; inset-block-start: 0; background: transparent; border: 0; backdrop-filter: none; }
[data-header='overlay'] .site-header, [data-header='overlay'] .site-header a, [data-header='overlay'] .site-header .icon-btn { color: #fff; }
[data-header='overlay'] .nav__link { color: rgb(255 255 255 / .62); }
[data-header='overlay'] .nav__link:hover, [data-header='overlay'] .nav__link.is-active { color: #fff; }
[data-header='overlay'] .lang-btn { border-color: rgb(255 255 255 / .45); }
[data-header='overlay'] .lang-btn:hover { background: #fff; color: #111; }
[data-header='overlay'] .icon-btn:hover { background: rgb(255 255 255 / .14); color: #fff; }
[data-header='overlay'] .brand { margin-inline-end: clamp(16px, 3vw, 44px); }
[data-header='overlay'] .nav { margin-inline-end: auto; }
[data-header='overlay'] .brand--swap .brand__logo--light { display: none; }
[data-header='overlay'] .brand--swap .brand__logo--dark { display: block; }
[data-header='overlay'] body[data-page='inner'] .site-header { position: sticky; background: var(--hdr-bg, #111821); border-block-end: 1px solid rgb(255 255 255 / .08); }
[data-header='overlay'] body[data-page='inner'] .brand__logo { height: calc(var(--logo-h) * .5); }
[data-header='overlay'] body[data-page='inner'] .site-header__in { min-height: 76px; }
@media (min-width: 980px) { [data-header='overlay'] .site-header__in { min-height: 120px; } [data-header='overlay'] body[data-page='inner'] .site-header__in { min-height: 84px; } }
@media (max-width: 979px) {
  [data-header='overlay'] .nav.is-open { background: var(--hdr-bg, #111821); }
  [data-header='overlay'] .nav.is-open .nav__link { color: #fff; border-color: rgb(255 255 255 / .12); }
  [data-header='overlay'] .site-header__in { min-height: 84px; }
  [data-header='overlay'] .brand__logo { height: min(var(--logo-h), 72px); }
}

/* ---- hero with a background image ---- */
[data-hero='image'] .hero {
  background: linear-gradient(180deg, rgb(0 0 0 / .38), transparent 30%), var(--hero-img, linear-gradient(135deg, #25251f, #5a5951)) center / cover no-repeat;
  color: #fff; min-height: clamp(560px, 50vw, 725px); display: flex; align-items: center; border: 0;
}
[data-hero='image'] .hero__in { grid-template-columns: 1fr; width: 100%; padding-block: clamp(120px, 16vw, 200px) clamp(56px, 8vw, 110px); }
[data-hero='image'] .hero__art, [data-hero='image'] .hero__inline-stat { display: none; }
[data-hero='image'] .hero__text { max-width: 31rem; margin-right: auto; margin-left: clamp(0px, 15vw, 14rem); } /* physical left: the portrait sits on the right of the artwork */
[data-hero='image'] .hero__title { font-size: clamp(2.3rem, 4.6vw, 3.2rem); color: #fff; line-height: 1.2; }
[data-hero='image'] .hero__sub { color: #fff; font-size: clamp(1.1rem, 1.7vw, 1.4rem); line-height: 1.7; max-width: none; font-family: var(--font-ui); }
[data-hero='image'] .eyebrow { color: rgb(255 255 255 / .8); }
[data-hero='image'] .btn--ghost { color: #fff; border-color: rgb(255 255 255 / .6); }
[data-hero='image'] .btn--ghost:hover { background: #fff; color: #111; }
@media (max-width: 980px) {
  [data-hero='image'] .hero { background-position: 62% 0; }
  [data-hero='image'] .hero__text { margin-inline: auto; text-align: center; }
  [data-hero='image'] .hero__cta { justify-content: center; }
}

/* ---- post sliders ---- */
.slider { position: relative; isolation: isolate; padding-block: calc(clamp(44px, 7vw, 84px) * var(--dens)); background: var(--sec-bg, none) center / cover no-repeat, var(--paper-2); }
.slider.has-bg { color: #fff; }
.slider.has-bg::before { content: ''; position: absolute; inset: 0; background: rgb(8 12 18 / .3); z-index: -1; }
.slider__head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-block-end: 32px; flex-wrap: wrap; }
.slider__title { font: var(--head-w) clamp(1.9rem, 4.4vw, 3.1rem)/1.15 var(--font-head); letter-spacing: var(--head-track); }
.slider__more { font-weight: 800; text-decoration: none; border-bottom: 3px solid var(--hi); }
.slider.has-bg .slider__more { color: #fff; }
.slider__viewport { position: relative; overflow: hidden; touch-action: pan-y; cursor: grab; border-radius: var(--radius); }
.slider.is-dragging .slider__viewport { cursor: grabbing; user-select: none; }
.slider__track { display: flex; transform: translateX(calc(var(--i, 0) * var(--dirx) * -100% + var(--drag, 0px))); transition: transform .85s cubic-bezier(.65, 0, .25, 1); will-change: transform; }
.slider.is-dragging .slider__track { transition: none; }
.slide { flex: 0 0 100%; min-width: 0; }
/* each slide settles in: the photo eases from a slight zoom, the text rises in a staggered sequence */
.slide__media { overflow: hidden; }
.slide__media img { transform: scale(1.14); transition: transform 1.7s cubic-bezier(.2, .7, .2, 1); }
.slide.is-on .slide__media img { transform: scale(1); }
.slide__body > * { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.slide.is-on .slide__body > * { opacity: 1; transform: none; }
.slide.is-on .slide__body > :nth-child(1) { transition-delay: .35s; }
.slide.is-on .slide__body > :nth-child(2) { transition-delay: .45s; }
.slide.is-on .slide__body > :nth-child(3) { transition-delay: .55s; }
.slide.is-on .slide__body > :nth-child(4) { transition-delay: .65s; }
.slider__progress { position: absolute; inset-inline: 0; inset-block-end: 0; height: 3px; background: rgb(255 255 255 / .22); z-index: 4; pointer-events: none; }
.slider__progress::after { content: ''; display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }
:root[dir='rtl'] .slider__progress::after { transform-origin: right; }
.slider.is-playing .slider__progress::after { animation: sliderProgress var(--autoplay, 7s) linear forwards; }
@keyframes sliderProgress { to { transform: scaleX(1); } }
.slider__dots { display: flex; justify-content: center; gap: 9px; margin-block-start: 22px; }
.slider__dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 999px; background: color-mix(in srgb, currentColor 35%, transparent); cursor: pointer; transition: width .45s cubic-bezier(.2, .7, .2, 1), background .3s; }
.slider__dot:hover { background: color-mix(in srgb, currentColor 65%, transparent); }
.slider__dot.is-on { width: 30px; background: var(--accent); }
.slider__nav { transition: background .25s, transform .25s cubic-bezier(.2, .7, .2, 1), opacity .25s; }
.slider__nav:hover { transform: scale(1.08); }
.slider__nav:active { transform: scale(.94); }
@media (prefers-reduced-motion: reduce) {
  .slider__track, .slide__media img, .slide__body > * { transition: none !important; transform: none; opacity: 1; }
  .slider__track { transform: translateX(calc(var(--i, 0) * var(--dirx) * -100%)); }
}
.slide__in { display: grid; grid-template-columns: 1fr; background: var(--card); border-radius: var(--radius); overflow: hidden; color: var(--ink); }
@media (min-width: 860px) { .slide__in { grid-template-columns: 1fr 1fr; min-height: min(560px, 62vh); } }
.slide__media { display: block; position: relative; min-height: 250px; background: var(--paper-2); }
.slide__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slide__media.is-small { display: grid; place-items: center; background: radial-gradient(circle, color-mix(in srgb, var(--ink) 22%, transparent) 1.4px, transparent 2px) 0 0 / 12px 12px, var(--paper-2); }
.slide__media.is-small img { position: static; }
.slide__body { padding: clamp(24px, 4vw, 56px); display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.slide__title { font: 800 clamp(1.4rem, 2.6vw, 2rem)/1.55 var(--font-head); letter-spacing: 0; }
.slide__title a { text-decoration: none; }
.slide__title a:hover { color: var(--accent); }
.slide__excerpt { font: 400 1.1rem/1.9 var(--font-read); color: var(--ink-2); margin: 0; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.slide__meta { display: flex; align-items: center; gap: 8px; color: var(--mute); font: 600 .9rem/1 var(--font-ui); margin: 0; }
.slide__tags { margin: 0; font: 700 .8rem/1.4 var(--font-ui); color: var(--mute); }
.slide__tags a { text-decoration: none; margin-inline-end: 10px; }
.slider__nav { position: absolute; top: 50%; translate: 0 -50%; width: 48px; height: 48px; border: 0; background: rgb(0 0 0 / .52); color: #fff; display: grid; place-items: center; cursor: pointer; z-index: 3; border-radius: calc(var(--radius) / 2); transition: background .2s; }
.slider__nav:hover { background: var(--accent); color: var(--accent-ink); }
:root[dir='rtl'] .slider__nav svg { transform: scaleX(-1); }
.slider__nav--prev { inset-inline-start: 0; }
.slider__nav--next { inset-inline-start: calc(50% - 48px); }
@media (max-width: 859px) { .slider__nav { top: 125px; } .slider__nav--next { inset-inline-start: auto; inset-inline-end: 0; } }

/* rubix: title tabs + one large slide */
.rubix__tabs { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 1fr); gap: 14px; overflow-x: auto; padding-block: 4px 16px; margin-block-end: 22px; scrollbar-width: thin; }
.rubix__tab { border: 0; border-block-start: 3px solid var(--line); background: var(--paper-2); color: var(--ink); padding: 22px 18px 26px; font: 700 1rem/1.6 var(--font-head); text-align: center; cursor: pointer; border-radius: var(--radius); transition: background .2s, border-color .2s; }
.rubix__tab span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rubix__tab:hover { background: var(--card); }
.rubix__tab.is-on { border-block-start-color: var(--hi); background: var(--card); }
.slider--rubix .slide__in { background: color-mix(in srgb, var(--accent) 7%, var(--card)); }

/* ---- embedded video ---- */
.embed { position: relative; background: #000; }
.embed__frame { aspect-ratio: 16 / 9; max-height: min(801px, 92vh); margin-inline: auto; }
.embed__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.embed__title { position: absolute; inset-inline: 0; inset-block-start: clamp(14px, 3.5vw, 44px); margin: 0; text-align: center; color: rgb(255 255 255 / .72); font: var(--head-w) clamp(1.8rem, 4.6vw, 3.1rem)/1.2 var(--font-head); pointer-events: none; text-shadow: 0 2px 18px rgb(0 0 0 / .55); }

/* ---- cover-flow gallery ---- */
.gallery { padding-block: calc(clamp(40px, 6vw, 72px) * var(--dens)); overflow: hidden; }
.gallery__title { font: var(--head-w) clamp(1.6rem, 3vw, 2rem)/1.2 var(--font-head); margin-block-end: 26px; }
.gallery__stage { position: relative; height: clamp(300px, 46vw, 470px); outline-offset: 6px; }
.gallery__item {
  --w: min(400px, 64vw); position: absolute; top: 50%; inset-inline-start: calc(50% - var(--w) / 2); width: var(--w); height: calc(var(--w) * .92);
  margin: 0; padding: 10px; background: #fff; border-radius: calc(var(--radius) + 2px); box-shadow: 0 8px 26px rgb(0 0 0 / .22); cursor: pointer;
  transition: transform .5s ease, opacity .4s ease;
  transform: translate(calc(var(--d, 0) * var(--dirx) * 74%), -50%) scale(calc(1 - var(--a, 0) * .13));
  z-index: calc(10 - var(--a, 0)); opacity: clamp(0, calc(3 - var(--a, 0)), 1);
}
.gallery__item img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); display: block; }
.gallery__nav { position: absolute; top: 50%; translate: 0 -50%; z-index: 20; border: 0; background: none; color: color-mix(in srgb, var(--ink) 38%, transparent); cursor: pointer; padding: 12px; }
.gallery__nav:hover { color: var(--accent); }
.gallery__nav--prev { inset-inline-start: 0; }
.gallery__nav--next { inset-inline-end: 0; }
:root[dir='rtl'] .gallery__nav svg { transform: scaleX(-1); }

/* ---- columns footer ---- */
.site-footer--columns { background: var(--footer-bg, none) center / cover no-repeat, linear-gradient(135deg, #2a2a26, #55544e); padding-block: calc(64px * var(--dens)) 0; color: #fff; }
.sf__grid { display: grid; gap: 44px; align-items: start; }
@media (min-width: 860px) { .sf__grid { grid-template-columns: 1.2fr 1fr 1fr; } }
.sf__brand img { width: min(250px, 62%); height: auto; }
.sf__name { font: var(--head-w) 2rem/1.1 var(--font-head); color: #fff; }
.sf__about { color: rgb(255 255 255 / .8); margin-block-start: 16px; max-width: 36ch; }
.sf__col h2 { font: 700 1.25rem/1.3 var(--font-head); color: #fff; margin: 0 0 22px; letter-spacing: 0; }
.sf__col a { color: rgb(255 255 255 / .62); text-decoration: none; }
.sf__col a:hover { color: #fff; }
.sf__col li + li { margin-block-start: 14px; }
.sf__contact li { display: flex; align-items: center; gap: 12px; color: rgb(255 255 255 / .88); }
.sf__contact a { color: rgb(255 255 255 / .88); }
.sf__social { display: flex; gap: 8px; margin-block-start: 28px; }
.sf__social li + li { margin: 0; }
.sf__social a { display: grid; place-items: center; width: 46px; height: 46px; background: rgb(255 255 255 / .16); border-radius: 6px; color: #fff; transition: background .2s; }
.sf__social a:hover { background: var(--accent); color: var(--accent-ink); }
.sf__bar { margin-block-start: 52px; padding-block: 24px; border-block-start: 1px solid rgb(255 255 255 / .2); text-align: center; color: rgb(255 255 255 / .9); }

/* ---- statistics page + about timeline ---- */
.stats { display: grid; gap: 56px; }
@media (min-width: 900px) { .stats { grid-template-columns: 1fr 1fr; align-items: start; } }
.stats__title { font: var(--head-w) clamp(1.5rem, 3vw, 2rem)/1.2 var(--font-head); margin-block-end: 22px; }
.stats__counters { margin: 0 0 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stats__counters div { background: var(--paper-2); border-radius: var(--radius); padding: 16px 14px; text-align: center; }
.stats__counters dt { font: 600 .82rem/1.3 var(--font-ui); color: var(--mute); margin-block-end: 6px; }
.stats__counters dd { margin: 0; font: var(--head-w) 1.9rem/1 var(--font-head); color: var(--accent); }
.stats__table { width: 100%; border-collapse: collapse; font-family: var(--font-ui); }
.stats__table th, .stats__table td { padding: .8em .6em; border-block-end: 1px solid var(--line); text-align: start; }
.stats__table th { color: var(--mute); font-weight: 700; font-size: .85rem; }
.stats__table td:last-child, .stats__table th:last-child { text-align: end; font-variant-numeric: tabular-nums; }
.stats__table a { text-decoration: none; }
.stats__table a:hover { color: var(--accent); }
.stats__table .depth-1 td:first-child { padding-inline-start: 1.8em; color: var(--ink-2); }
.timeline { list-style: none; margin: 40px 0 0; padding: 0; border-inline-start: 2px solid var(--line); }
.timeline li { position: relative; padding: 0 0 22px 0; padding-inline-start: 26px; }
.timeline li::before { content: ''; position: absolute; inset-inline-start: -7px; inset-block-start: .55em; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--paper); }
.timeline__year { display: block; font: 800 .95rem/1.2 var(--font-head); color: var(--accent); margin-block-end: 2px; }
.timeline__text { margin: 0; color: var(--ink-2); }