/* ---------- Fundacja meisō-art ----------
   Deliberately NOT built like the Forum page. The Forum sells one dated
   event, so it opens with a cinematic banner and runs on programme cards.
   A foundation is an ongoing institution, so this page opens with a
   typographic masthead, states its remit as a numbered register, and puts
   its past work in an archive index rather than in event cards.

   Standalone from forum.css: the two share only the tokens in style.css,
   so changing one cannot break the other. If a fourth page needs the type
   primitives, extract them upward instead of copying a third time. */

.fundacja {
  --fd-space: clamp(64px, 9vw, 124px);
  --fd-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.fundacja section {
  padding-block: calc(var(--fd-space) / 2);
}

/* shared type */

.fd-eyebrow {
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.fd-title {
  margin: 0 0 24px;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.fd-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-muted);
  text-wrap: pretty;
}

.fd-text + .fd-text {
  margin-top: 16px;
}

.fd-text strong {
  font-weight: 600;
  color: var(--color-ink);
}

.fd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  /* set like .header-cta and the nav: every button on the site is uppercase */
  font-size: 13px;
  font-weight: 540;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.fd-btn--light {
  background: var(--btn-solid-bg);
  color: var(--btn-solid-fg);
}

.fd-btn--light:hover {
  background: var(--btn-solid-bg-hover);
}

.fd-btn--ghost {
  border-color: var(--color-line);
  color: var(--color-ink);
}

.fd-btn--ghost:hover {
  border-color: var(--color-ink);
  background: rgba(244, 237, 226, 0.08);
}

/* reveal on scroll — an animation, never a transition. `.js [data-reveal]`
   outspecifies the component classes, so a transition here would silently
   replace theirs and kill the hovers (learned on the Forum page). */

@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
  }

  .js [data-reveal].is-visible {
    opacity: 1;
    animation: fd-reveal 0.9s var(--fd-ease);
  }

  @keyframes fd-reveal {
    from {
      opacity: 0;
      transform: translateY(24px);
    }
  }
}

/* ---------- masthead ----------
   Type, not a banner: the page has to read as an institution's front
   matter rather than as a poster for something happening on a date. */

.fundacja .fd-masthead {
  padding-block: clamp(28px, 6vw, 84px) calc(var(--fd-space) / 2);
}

/* same breathing room under the label as the Forum hero uses */
.fd-masthead .fd-eyebrow {
  margin-bottom: 34px;
}

.fd-masthead__title {
  max-width: 18ch;
  margin: 0 0 28px;
  font-size: clamp(40px, 6.8vw, 96px);
  font-weight: 460;
  line-height: 1.02;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.fd-masthead__lead {
  max-width: 54ch;
  margin: 0 0 32px;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.6;
  color: var(--color-muted);
  text-wrap: pretty;
}

/* both lead to the support section, where the bank details and the email
   and phone live */
.fd-masthead__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: clamp(36px, 5vw, 60px);
}

.fd-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px 32px;
  margin: 0;
}

.fd-facts dt {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.fd-facts dd {
  margin: 0;
  font-size: 17px;
  line-height: 1.45;
}

/* ---------- marquee ----------
   A slow, endless sideways drift instead of a hero frame: it shows the
   archive without pretending to advertise one dated event. The track holds
   the same run of images twice and shifts by exactly one run plus one gap,
   so the wrap is invisible. */

.fundacja .fd-strip {
  padding-block: 0;
}

.fd-marquee {
  --fd-marquee-gap: 12px;
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
}

.fd-marquee__track {
  display: flex;
  gap: var(--fd-marquee-gap);
  width: max-content;
  animation: fd-marquee 150s linear infinite;
}

.fd-marquee__track img {
  flex: none;
  /* grows with the viewport so wide screens get a bigger strip */
  height: clamp(210px, 26vw, 460px);
  width: auto;
  border-radius: 16px;
  object-fit: cover;
}

@keyframes fd-marquee {
  to {
    transform: translateX(calc(-50% - (var(--fd-marquee-gap) / 2)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .fd-marquee__track {
    animation: none;
  }
}

/* ---------- mission ---------- */

.fd-about {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(28px, 5vw, 80px);
}

.fd-about__body {
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.7;
  color: var(--color-muted);
}

.fd-about__body p {
  margin: 0;
}

.fd-about__body p + p {
  margin-top: 18px;
}

.fd-pull {
  margin: 28px 0;
  padding-left: 22px;
  border-left: 2px solid var(--color-gold);
  font-size: clamp(20px, 1.9vw, 26px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.35;
  color: var(--color-ink);
}

/* ---------- register of activity ---------- */

.fd-areas {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-line);
}

.fd-area {
  display: grid;
  grid-template-columns: 64px minmax(0, 4fr) minmax(0, 6fr);
  align-items: baseline;
  gap: 8px 32px;
  padding: clamp(24px, 3vw, 36px) 0;
  border-bottom: 1px solid var(--color-line);
}

.fd-area__num {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--color-gold);
}

.fd-area__title {
  margin: 0;
  font-size: clamp(20px, 2vw, 27px);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.fd-area__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-muted);
}

/* ---------- archive index ---------- */

.fd-index {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fd-index__year {
  display: block;
  /* the UA margin on h3 would otherwise add a whole font-size of space
     below the rule, which is what pushed the first entry out of line */
  margin: 0;
  padding: clamp(68px, 7vw, 84px) 0 22px;
  border-bottom: 1px solid var(--color-line);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 460;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-gold);
}

.fd-index > .fd-index__year:first-child {
  padding-top: 20px;
}

/* the first year sits right under the section heading, so it does not
   need the separating space the later ones do */
.fd-index > li:first-child > .fd-index__year {
  padding-top: clamp(28px, 3vw, 40px);
}

.fd-entry {
  display: grid;
  grid-template-columns: 96px 128px minmax(0, 1fr);
  align-items: start;
  gap: 10px 32px;
  padding: 26px 0;
  border-bottom: 1px solid var(--color-line);
}

.fd-entry__thumb {
  width: 96px;
  height: 96px;
  border-radius: 10px;
  object-fit: cover;
}

/* entries with no surviving photo keep the column so the rows stay
   aligned, but draw nothing — a bordered box reads as a broken image */
.fd-entry__thumb--none {
  background: none;
}

.fd-entry__when {
  padding-top: 2px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.fd-entry__title {
  margin: 0 0 8px;
  font-size: clamp(19px, 1.7vw, 24px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.fd-entry__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-muted);
  max-width: 68ch;
}

.fd-entry__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.fd-entry__tags li {
  padding: 5px 12px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--color-muted);
}

.fd-credit {
  margin: 24px 0 0;
  font-size: 13px;
  color: var(--color-muted);
}

/* ---------- photo archive ---------- */

.fd-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.fd-gallery img {
  display: block;
  width: 100%;
  /* without this the height attribute wins and aspect-ratio is ignored,
     which un-squares the tiles and leaves a hole under the 2x2 one */
  height: auto;
  aspect-ratio: 1;
  border-radius: 12px;
  object-fit: cover;
}

.fd-gallery img:first-child {
  grid-column: span 2;
  grid-row: span 2;
}

/* ---------- support ----------
   Two ways of helping ask for two different things, so they sit in two
   blocks of the same size but different weight. Partnering and exhibiting
   start with a conversation: an outlined block with the email and phone
   under both items. Donating needs data to copy into a bank app: a filled
   slip, with the account number as its largest line. */

/* the page ends here, so it needs room to breathe under the last block */
.fundacja .fd-support-section {
  padding-bottom: calc(var(--fd-space) * 1.5);
}

.fd-support {
  --fd-slip-pad: clamp(20px, 3vw, 40px);
  padding-top: clamp(32px, 4vw, 56px);
  border-top: 1px solid var(--color-line);
}

.fd-support__intro {
  max-width: 680px;
  margin-bottom: clamp(28px, 3.4vw, 48px);
}

.fd-support__title {
  margin: 0 0 18px;
  font-size: clamp(30px, 3.6vw, 48px);
  font-weight: 460;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.fd-support__paths {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

/* stretched to the slip's height; the contact details sink to the bottom so
   both blocks end on a strong line instead of one trailing off */
.fd-support__talk {
  display: flex;
  flex-direction: column;
  padding: var(--fd-slip-pad);
  border: 1px solid var(--color-line);
  border-radius: 20px;
}

/* set like the card titles elsewhere on the page, a step above the 16px text
   it introduces; at 16px/600 it only looked like bold body copy */
.fd-way__title {
  margin: 0 0 8px;
  font-size: clamp(19px, 1.6vw, 22px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.fd-ways {
  margin: 0 0 32px;
}

.fd-way__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-muted);
  text-wrap: pretty;
}

/* who answers, then how to reach her; the details sink to the bottom of the
   block, level with the end of the slip beside it */
.fd-support__contact {
  margin-top: auto;
}

/* set like the recipient in the slip: small muted label, 17px value,
   stacked on the same 18px as the slip's own details */
.fd-support__person {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0;
}

.fd-support__person dt {
  margin-bottom: 4px;
  font-size: 13px;
  color: var(--color-muted);
}

.fd-support__person dd {
  margin: 0;
  font-size: 17px;
  line-height: 1.45;
  color: var(--color-ink);
}

/* the address reads as a value, not a link, until you go for it */
.fd-support__person a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fd-donate {
  container-type: inline-size;
  padding: var(--fd-slip-pad);
  border-radius: 20px;
  background: var(--color-invert-bg);
}

.fd-donate__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-muted);
  text-wrap: pretty;
}

.fd-donate__main,
.fd-donate__ids {
  margin: 0;
}

.fd-donate__main {
  margin-top: 28px;
}

.fd-donate dt {
  margin-bottom: 4px;
  font-size: 13px;
  color: var(--color-muted);
}

.fd-donate dd {
  margin: 0;
  font-size: 17px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
}

.fd-donate__main > div + div {
  margin-top: 18px;
}

.fd-donate__account {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* the number is set like every other value in the slip (17px, from dd) */
.fd-donate__number {
  min-width: 0;
}

.fd-donate__number span {
  white-space: nowrap;
}

/* At 17px the number runs about 331px, so with the 44px icon it needs a
   375px slip. Narrower than that it goes on two lines, one half each, as
   blocks: that keeps the box as narrow as the text, so the icon sits right
   beside it instead of at the far edge. */
@container (max-width: 374px) {
  .fd-donate__number span {
    display: block;
  }
}

/* The copy icon is drawn with CSS borders, not SVG: small SVG paths render
   jagged in Chromium on the GPU (see the wordmark in style.css), borders
   do not. Two offset sheets; once copied, the front one turns into a tick. */
.fd-copy {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  /* the 36px target overhangs the 24.65px line rather than growing it, so the
     icon never adds height under the number and shifts the slip's rhythm */
  margin-block: -6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--color-muted);
  font-family: inherit;
  cursor: pointer;
  transition: color 0.2s ease;
}

.fd-copy:hover {
  color: var(--color-ink);
}

.fd-copy:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 0;
}

.fd-copy[hidden] {
  display: none;
}

/* Tooltip centred over the icon. It shows on real hover, on keyboard focus,
   and while the copy is confirmed, which is how a touch screen sees it.
   --tip-x lets the narrowest slip pin it to the icon's right edge instead. */
.fd-copy::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--color-ink);
  color: var(--color-invert-bg);
  font-size: 12px;
  font-weight: 540;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  transform: translate(var(--tip-x, -50%), 4px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

@media (hover: hover) {
  .fd-copy:hover::after {
    opacity: 1;
    transform: translate(var(--tip-x, -50%), 0);
  }
}

.fd-copy:focus-visible::after,
.fd-copy.is-copied::after {
  opacity: 1;
  transform: translate(var(--tip-x, -50%), 0);
}

/* on a 320px phone a centred "Skopiowano numer konta" reaches the screen edge */
@container (max-width: 259px) {
  .fd-copy {
    --tip-x: 0;
  }

  .fd-copy::after {
    right: 0;
    left: auto;
  }
}

.fd-copy__icon {
  position: relative;
  width: 17px;
  height: 19px;
}

.fd-copy__icon::before,
.fd-copy__icon::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
  width: 12px;
  height: 14px;
  border: 1.5px solid currentColor;
  border-radius: 3px;
}

.fd-copy__icon::before {
  top: 0;
  left: 0;
}

/* the slip's own colour hides the back sheet where the two overlap */
.fd-copy__icon::after {
  right: 0;
  bottom: 0;
  background: var(--color-invert-bg);
}

.fd-copy.is-copied {
  color: var(--color-gold);
}

.fd-copy.is-copied .fd-copy__icon::before {
  opacity: 0;
}

.fd-copy.is-copied .fd-copy__icon::after {
  right: 5px;
  bottom: 4px;
  width: 7px;
  height: 13px;
  border-width: 0 2px 2px 0;
  border-radius: 0;
  background: none;
  transform: rotate(45deg);
}

/* read out by screen readers, never shown */
.fd-copy__status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* the same 18px above KRS as the account number has above its own label */
.fd-donate__ids {
  display: flex;
  flex-wrap: wrap;
  gap: 12px clamp(20px, 3vw, 40px);
  margin-top: 18px;
}

.fd-donate__doc {
  margin-top: 28px;
}

/* ---------- responsive ---------- */

@media (max-width: 1100px) {
  .fd-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fd-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .fundacja section {
    padding-block: 36px;
  }

  .fd-about {
    grid-template-columns: 1fr;
  }

  /* minmax(0, …): a bare 1fr lets the nowrap email button widen the column */
  .fd-support__paths {
    grid-template-columns: minmax(0, 1fr);
  }

  .fd-area {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .fd-area__text {
    grid-column: 2;
  }

  .fd-entry {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 6px 20px;
  }

  .fd-entry__thumb {
    width: 72px;
    height: 72px;
    grid-row: span 2;
  }

  .fd-entry__when {
    padding-top: 0;
  }

  .fd-strip__row {
    grid-auto-columns: 38vw;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .fd-strip__row::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 560px) {
  .fd-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fd-donate__doc {
    width: 100%;
  }
}