/* Pan Hub — v4 components. Loaded after site.css. */

/* ---------- Preloader (adapted from 21st.dev Variable Font Weight Preloader) ---------- */
.preloader { position: fixed; inset: 0; z-index: 100; background: var(--paper); color: var(--ink); overflow: hidden; }
html:not(.js) .preloader { display: none; }
.preloader__hud { position: absolute; inset: 0 0 auto; display: flex; justify-content: space-between; padding: 1.5rem var(--gutter) 0; font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; }
.preloader__hud span:last-child { opacity: 0.55; }
.preloader__rule { position: absolute; left: var(--gutter); right: var(--gutter); top: 3.4rem; border-top: 1px solid var(--rule); }
.preloader__foot { position: absolute; left: var(--gutter); right: var(--gutter); top: 4.4rem; display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; }
.preloader__foot > span { opacity: 0.55; }
.preloader__rail { display: flex; align-items: flex-end; justify-content: space-between; height: 11px; flex: 0 1 min(46vw, 520px); }
.preloader__rail i { width: 1px; height: 5px; background: currentColor; opacity: 0.2; }
.preloader__rail i[data-major] { height: 11px; }
.preloader__rail i.on { opacity: 1; }
.preloader__count { position: absolute; left: calc(var(--gutter) * 0.5); bottom: -0.06em; font-weight: 700; line-height: 0.74; font-size: min(42vw, 68vh); font-variant-numeric: tabular-nums; white-space: nowrap; }
.preloader__panel { position: absolute; left: 0; right: 0; top: 100%; height: 100%; background: var(--ink); color: var(--paper); display: grid; place-items: center; }
.preloader__line { font-style: italic; font-size: clamp(1.75rem, 1rem + 4vw, 4.5rem); letter-spacing: -0.03em; }

/* ---------- Text Roll (adapted from 21st.dev) ---------- */
.roll { position: relative; display: inline-block; overflow: hidden; line-height: 1.15; vertical-align: bottom; }
.roll__row { display: block; white-space: nowrap; }
.roll__row > span { display: inline-block; transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1); transition-delay: var(--d); }
.roll__bottom { position: absolute; inset: 0; }
.roll__bottom > span { transform: translateY(110%); }
a:hover .roll__top > span, button:hover .roll__top > span { transform: translateY(-110%); }
a:hover .roll__bottom > span, button:hover .roll__bottom > span { transform: translateY(0); }

/* ---------- Section heads ---------- */
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); flex-wrap: wrap; }
.section-head .section-title { margin-bottom: 0; }
.section-head p { max-width: 36ch; opacity: 0.7; }

/* ---------- Interactive List Preview (adapted from 21st.dev, hyperiux) ---------- */
.lines-section { background: var(--lining); color: var(--thread); padding: clamp(6rem, 12vw, 10rem) 0; }
.ilp { position: relative; isolation: isolate; }
.ilp__list { list-style: none; position: relative; border-bottom: 1px solid rgba(242, 239, 232, 0.25); }
.ilp__bar { position: absolute; left: calc(var(--gutter) * -1); right: calc(var(--gutter) * -1); top: 0; height: 0; background: var(--thread); opacity: 0; z-index: 1; pointer-events: none; }
.ilp__row {
  position: relative; z-index: 3; display: grid; grid-template-columns: 4rem minmax(0, 1.3fr) minmax(0, 0.9fr) clamp(9rem, 20vw, 18rem); gap: clamp(1rem, 3vw, 2.5rem); align-items: center;
  padding: clamp(1.4rem, 3vw, 2.4rem) 0; border-top: 1px solid rgba(242, 239, 232, 0.25);
  transition: color 0.35s var(--ease-out);
}
.ilp__row.is-active { color: var(--lining); }
.ilp__index { font-size: 0.875rem; opacity: 0.6; font-variant-numeric: tabular-nums; }
.cursor__label { font-size: 0.75rem; font-weight: 700; }
.ilp__name { font-weight: 700; font-size: clamp(1.6rem, 0.6rem + 3vw, 3.6rem); letter-spacing: -0.045em; line-height: 1; }
.ilp__desc { opacity: 0.75; max-width: 36ch; font-size: 0.9375rem; }
.ilp__row .arrow { justify-self: end; }
/* The preview rides in the empty right-hand column, centred on the hovered row. */
.ilp__preview { position: absolute; z-index: 4; right: clamp(3.5rem, 6vw, 5.5rem); top: 0; width: clamp(9rem, 16vw, 15rem); aspect-ratio: 1; pointer-events: none; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55); }
.ilp__media { position: absolute; inset: 0; overflow: hidden; }
.ilp__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ilp__mobile-media { display: none; }

/* ---------- Ledger with Number Tickers (adapted from 21st.dev Number Ticker) ---------- */
.ledger { padding: clamp(6rem, 12vw, 10rem) 0; }
.ledger__rows { list-style: none; border-top: 1px solid currentColor; }
.ledger__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem; align-items: baseline; padding: clamp(1.25rem, 2.6vw, 2rem) 0; border-bottom: 1px solid var(--rule); }
.ledger__label { display: flex; align-items: baseline; gap: 1rem; min-width: 0; }
.ledger__label > span { min-width: 0; }
.ledger__label::after { content: ""; flex: 1; border-bottom: 1px dotted currentColor; opacity: 0.45; min-width: 2rem; }
.ledger__label small { display: block; opacity: 0.6; font-size: 0.8125rem; margin-top: 0.3rem; }
.ledger__value { font-weight: 700; font-size: clamp(2rem, 1rem + 4vw, 4.5rem); letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ledger--lining { background: var(--lining); color: var(--thread); }
.ledger--lining .ledger__row { border-color: rgba(242, 239, 232, 0.2); }

/* ---------- Zoom Parallax (adapted from 21st.dev, efferd) ---------- */
.zoom { position: relative; background: var(--lining); }
.zoom__stage { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.zoom__item { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; will-change: transform; pointer-events: none; }
.zoom__frame { position: relative; width: 25vw; height: 25vh; overflow: hidden; background: var(--lining); }
.zoom__frame img, .zoom__frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.zoom__item:nth-child(2) .zoom__frame { top: -30vh; left: 5vw; height: 30vh; width: 35vw; }
.zoom__item:nth-child(3) .zoom__frame { top: -10vh; left: -25vw; height: 45vh; width: 20vw; }
.zoom__item:nth-child(4) .zoom__frame { left: 27.5vw; height: 25vh; width: 25vw; }
.zoom__item:nth-child(5) .zoom__frame { top: 27.5vh; left: 5vw; height: 25vh; width: 20vw; }
.zoom__item:nth-child(6) .zoom__frame { top: 27.5vh; left: -22.5vw; height: 25vh; width: 30vw; }
.zoom__item:nth-child(7) .zoom__frame { top: 22.5vh; left: 25vw; height: 15vh; width: 15vw; }
.zoom__veil { position: absolute; inset: 0; z-index: 4; background: var(--paper); opacity: 0; pointer-events: none; }
.zoom__words { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; z-index: 5; pointer-events: none; padding: var(--gutter); }
.zoom__words p { font-weight: 700; font-size: clamp(2.25rem, 1rem + 6vw, 6rem); letter-spacing: -0.05em; line-height: 0.95; color: var(--ink); }
.zoom__words small { display: block; margin-top: 1rem; font-weight: 400; font-size: 1rem; letter-spacing: 0; color: var(--ink-soft); }

/* ---------- Whitewash hero (adapted from 21st.dev Ink Reveal) ---------- */
.whitewash { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--lining); color: var(--thread); }
.whitewash__under { position: absolute; inset: 0; display: grid; align-content: center; padding: 6rem var(--gutter); }
.whitewash__under p { font-weight: 700; font-size: clamp(2.5rem, 1rem + 6.5vw, 7rem); line-height: 0.92; letter-spacing: -0.05em; max-width: 14ch; }
.whitewash__under small { display: block; margin-top: 2rem; font-size: 1rem; letter-spacing: 0; font-weight: 400; color: var(--thread-soft); max-width: 40ch; line-height: 1.6; }
.whitewash__paint { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
.whitewash__words { position: absolute; z-index: 3; left: var(--gutter); right: var(--gutter); bottom: clamp(3rem, 9vh, 6rem); pointer-events: none; color: var(--ink); display: flex; justify-content: space-between; align-items: end; gap: 2rem; flex-wrap: wrap; }
.whitewash__words h1 { font-weight: 700; font-size: var(--display); line-height: 0.95; letter-spacing: -0.04em; }
.whitewash__hint { font-size: 0.875rem; color: var(--ink-soft); }
html:not(.has-gsap) .whitewash__paint, html:not(.has-gsap) .whitewash__words { display: none; }

/* ---------- Stacking Cards (adapted from 21st.dev, danielpetho) ---------- */
.stack { padding: clamp(4rem, 8vw, 6rem) 0 30vh; }
.stack__slot { position: relative; display: grid; justify-items: center; margin-bottom: 30vh; }
.stack__slot:last-child { margin-bottom: 0; }
.stack__card {
  position: relative; width: min(64rem, calc(100% - 2 * var(--gutter))); min-height: min(64vh, 36rem);
  background: var(--cotton); padding: clamp(2rem, 5vw, 4.5rem);
  display: grid; grid-template-rows: auto 1fr auto; gap: 2rem;
  box-shadow: 0 1px 2px rgba(30, 30, 28, 0.08), 0 -24px 60px -30px rgba(30, 30, 28, 0.35);
}
.stack__card--ink { background: var(--lining); color: var(--thread); }
.stack__card header { display: flex; justify-content: space-between; font-size: 0.8125rem; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.7; }
.stack__card h3 { font-weight: 700; font-size: clamp(2.5rem, 1rem + 6vw, 6.5rem); letter-spacing: -0.05em; line-height: 0.92; align-self: center; }
.stack__card p { max-width: 52ch; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem); }

/* ---------- Collection tag media + atelier interlude ---------- */
.ctag__media { margin: 0 0 1.25rem; aspect-ratio: 16 / 10; overflow: hidden; background: var(--lining); }
.ctag__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.interlude { background: var(--lining); color: var(--thread); padding: clamp(5rem, 10vw, 8rem) 0; }
.interlude__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.interlude__media { aspect-ratio: 1; overflow: hidden; }
.interlude__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.interlude__quote { font-weight: 700; font-size: clamp(1.75rem, 1rem + 2.6vw, 3.25rem); line-height: 1.08; letter-spacing: -0.04em; }
.interlude__quote small { display: block; margin-top: 1.5rem; font-weight: 400; font-size: 1rem; letter-spacing: 0; color: var(--thread-soft); line-height: 1.6; }

/* ---------- Manifesto teaser ---------- */
.teaser { padding: clamp(6rem, 12vw, 10rem) 0; }
.teaser__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.teaser__item { padding: 2rem clamp(1rem, 2vw, 2rem) 2rem 0; border-right: 1px solid var(--rule); }
.teaser__item:last-child { border-right: 0; }
.teaser__item + .teaser__item { padding-left: clamp(1rem, 2vw, 2rem); }
.teaser__item h3 { font-weight: 700; font-size: clamp(1.4rem, 1rem + 1.4vw, 2.2rem); letter-spacing: -0.035em; line-height: 1.05; }
.teaser__item p { margin-top: 0.9rem; color: var(--ink-soft); max-width: 32ch; }
.teaser__more { margin-top: 2.5rem; }

/* ---------- Footer wordmark ---------- */
.foot__word { font-weight: 700; font-size: clamp(4rem, 20vw, 22rem); line-height: 0.82; letter-spacing: -0.07em; white-space: nowrap; overflow: hidden; padding-top: 0.08em; }

@media (max-width: 860px) {
  .interlude__grid { grid-template-columns: 1fr; }
  .teaser__grid { grid-template-columns: 1fr; }
  .teaser__item, .teaser__item + .teaser__item { border-right: 0; border-bottom: 1px solid var(--rule); padding: 1.75rem 0; }
}
@media (max-width: 760px) {
  .ilp__row { grid-template-columns: 2.5rem minmax(0, 1fr) auto; }
  .ilp__desc { grid-column: 2 / -1; grid-row: 2; }
  .zoom__frame { width: 42vw; }
}
@media (max-width: 760px), (hover: none) {
  .ilp__preview, .ilp__bar { display: none; }
  .ilp__mobile-media { display: block; grid-column: 1 / -1; aspect-ratio: 16 / 9; overflow: hidden; }
  .ilp__mobile-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
}
@media (prefers-reduced-motion: reduce) { .roll__row > span { transition: none; } }