/* The visitors' homepage (templates/front.html): what we make, one flat
   field each. Large display type, labels in the body face, a press on every
   button. On a phone nothing moves by itself; on a computer only the VJ
   screen's bars play. */
.fr { --fr-ease: cubic-bezier(.22, 1, .36, 1); display: grid; gap: 12px; min-width: 0; padding: 14px 0 28px; }

.fr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px; padding: 0 22px; border: 0; border-radius: 999px;
  font: 800 .98rem var(--font-body); text-decoration: none; cursor: pointer; transition: transform .14s var(--fr-ease); }
.fr-btn:active { transform: scale(.96); }
.fr-btn.is-gold { background: #ffc60b; color: #0b0b0b !important; }
.fr-btn.is-dark { background: #0b0b0b; color: #fff !important; }
.fr-btn.is-light { background: #fff; color: #2a0a7a !important; }
.fr-btn.is-line { border: 1px solid color-mix(in srgb, currentColor 34%, transparent); background: none; color: inherit !important; }

/* ---- the hero */
.fr-hero { display: grid; gap: clamp(16px, 2.4vw, 24px); padding: clamp(28px, 6vw, 84px) clamp(20px, 5vw, 64px) clamp(20px, 3vw, 34px); border-radius: 28px; background: #0b0b0b; color: #fff;
  container-type: inline-size; }
.fr-k { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0; font: 700 .95rem var(--font-body); color: rgba(255, 255, 255, .66); }
.fr-k span:first-child { color: #ffc60b; }
.fr-h { margin: 0; font: 400 clamp(3.2rem, 13.5cqi, 10rem)/.82 var(--font-display); letter-spacing: -.02em; text-transform: uppercase; }
.fr-h em { font-style: normal; color: #e0203f; }
.fr-p { margin: 0; max-width: 54ch; font-size: clamp(1rem, 1.4vw, 1.18rem); line-height: 1.6; color: rgba(255, 255, 255, .78); }
.fr-four { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: clamp(6px, 2vw, 22px); }
.fr-tile { display: grid; gap: 4px; min-width: 0; padding: 16px 18px 18px; border-radius: 20px; color: #0b0b0b !important; text-decoration: none; transition: transform .14s var(--fr-ease);
  container-type: inline-size; }
.fr-tile:active { transform: scale(.97); }
.fr-tile span { font: 800 .84rem var(--font-body); opacity: .6; }
.fr-tile b { font: 400 clamp(1.1rem, 10.5cqi, 2.4rem)/.95 var(--font-display); text-transform: uppercase; white-space: nowrap; }
.fr-tile i { font: 600 .88rem/1.35 var(--font-body); font-style: normal; opacity: .78; }
.fr-tile.is-vj { background: #6b2fff; color: #fff !important; }
.fr-tile.is-kn { background: #0098ea; color: #fff !important; }
.fr-tile.is-pr { background: #e0203f; color: #fff !important; }
.fr-tile.is-tk { background: #ffc60b; }
@media (max-width: 1100px) { .fr-four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .fr-four { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .fr-tile { grid-template-columns: 2em minmax(0, 1fr); align-items: baseline; column-gap: 8px; padding: 14px 16px; }
  .fr-tile span { grid-row: span 2; }
  .fr-tile b { font-size: clamp(1.3rem, 8cqi, 1.9rem); }
}

/* ---- the slabs */
.fr-slab { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: clamp(18px, 4vw, 56px); min-width: 0; overflow: hidden;
  padding: clamp(24px, 5vw, 64px); border-radius: 28px; scroll-margin-top: 80px; }
.fr-slab.is-vj { background: #6b2fff; color: #fff; }
.fr-slab.is-kn { background: #0098ea; color: #fff; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.fr-slab.is-pr { background: #0b0b0b; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.fr-slab.is-bk { background: #ffc60b; color: #0b0b0b; grid-template-columns: minmax(0, 1fr); }
.fr-slab.is-tk { background: #f3ead8; color: #0b0b0b; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.fr-t { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; container-type: inline-size; }
.fr-sk { margin: 0; font: 800 .95rem var(--font-body); opacity: .72; }
/* each heading sized to its own word (--fit, in cqi), so the longest still fits its field */
.fr-sh { margin: 0; font: 400 clamp(2rem, calc(var(--fit, 12) * 1cqi), 8.6rem)/.82 var(--font-display); letter-spacing: -.02em; text-transform: uppercase; }
.fr-lead { margin: 0; max-width: 52ch; font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.6; opacity: .86; }
.fr-nums { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 0; padding: 0; list-style: none; }
.fr-nums li { display: grid; gap: 2px; min-width: 96px; padding: 12px 16px; border-radius: 18px; background: color-mix(in srgb, currentColor 12%, transparent); }
.fr-nums b { font: 400 clamp(1.6rem, 3vw, 2.3rem)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.fr-nums span { font: 700 .82rem var(--font-body); opacity: .74; }
.fr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fr-chips li { padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .1); font: 700 .88rem var(--font-body); }
.fr-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 6px; }
.fr-from { font: 600 .95rem var(--font-body); opacity: .86; } .fr-from b { font-weight: 800; }
.fr-fine { margin: 0; font: 600 .88rem var(--font-body); opacity: .66; }
.fr-dep { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 0; }
.fr-dep b { font: 400 clamp(2.4rem, 7vw, 4.6rem)/.9 var(--font-display); color: #b3121f; }
.fr-dep span { font: 700 1.02rem var(--font-body); }
.fr-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; margin: 4px 0 0; padding: 0; list-style: none; counter-reset: s; }
.fr-steps li { counter-increment: s; display: grid; align-content: start; gap: 6px; min-width: 0; padding: 16px 18px; border-radius: 20px; background: rgba(11, 11, 11, .08); }
.fr-steps li::before { content: counter(s); font: 400 2.4rem/.8 var(--font-display); color: #b3121f; }
.fr-steps b { font-size: 1.05rem; } .fr-steps span { font-size: .92rem; line-height: 1.5; opacity: .8; }
@media (max-width: 760px) { .fr-steps { grid-template-columns: minmax(0, 1fr); } }

/* the drawings: still, flat */
.fr-art { display: grid; place-items: center; min-width: 0; }
.fr-scr { position: relative; width: min(100%, 460px); aspect-ratio: 16 / 10; border-radius: 18px; background: #0b0b0b; box-shadow: 0 0 0 10px rgba(11, 11, 11, .25); overflow: hidden; }
.fr-scr svg { position: absolute; inset: 8% 16% 26%; width: 68%; height: 66%; }
.fr-scr polygon { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linejoin: round; }
.fr-scr polygon:nth-child(3) { fill: #ffc60b; stroke: #ffc60b; }
.fr-scr polygon:nth-child(2) { fill: rgba(107, 47, 255, .6); }
.fr-eq { position: absolute; inset: auto 6% 7% 6%; display: flex; align-items: flex-end; gap: 4%; height: 18%; }
.fr-eq i { flex: 1; height: var(--h); border-radius: 2px; background: #ffc60b; transform-origin: 50% 100%; }
.fr-on { position: absolute; top: 7%; inset-inline-start: 5%; display: inline-flex; align-items: center; gap: 8px; font: 700 .8rem var(--font-body); color: rgba(255, 255, 255, .8); }
.fr-on b { padding: 3px 8px; border-radius: 6px; background: #e0203f; color: #fff; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .fr-eq i { animation: fr-eq .9s var(--fr-ease) infinite alternate; animation-delay: var(--d); }
  @keyframes fr-eq { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
}
.fr-art-kn svg { width: min(100%, 320px); height: auto; }
.fr-art-kn line { stroke: #fff; stroke-width: 9; stroke-linecap: round; }
.fr-art-kn circle { fill: #0b0b0b; stroke: #fff; stroke-width: 3; }
.fr-art-kn circle.hd { fill: #fff; }
.fr-art-pr { align-self: stretch; place-items: end center; border-radius: 22px; background: #e0203f; padding: 14px 14px 0; }
.fr-art-pr svg { width: 100%; height: auto; max-height: 340px; }
.fr-art-pr .bm { fill: #ffe27a; opacity: .4; }
.fr-art-pr .ink { fill: #0b0b0b; }
.fr-art-pr .cone { fill: #262626; stroke: #3a3a3a; stroke-width: 3; }
.fr-art-tk img { width: min(70%, 300px); height: auto; }

@media (max-width: 860px) {
  .fr-slab, .fr-slab.is-kn, .fr-slab.is-tk { grid-template-columns: minmax(0, 1fr); }
  .fr-slab .fr-art { order: -1; }
  .fr-art-pr svg { max-height: 240px; }
  .fr-art-kn svg { width: min(70%, 240px); }
  .fr-art-tk img { width: min(46%, 200px); }
  .fr-acts .fr-btn { flex: 1 1 auto; }
}

/* ---- who we are: red for the art club, black for the questions */
.fr-about, .fr-faq { display: grid; gap: clamp(18px, 3vw, 28px); min-width: 0; padding: clamp(24px, 5vw, 64px); border-radius: 28px; scroll-margin-top: 80px; }
.fr-about { background: #e0203f; color: #fff; }
.fr-ab-head { display: grid; gap: 14px; min-width: 0; container-type: inline-size; }
.fr-ab-p { margin: 0; max-width: 62ch; font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.6; }
.fr-do { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.fr-do a { display: grid; align-content: start; gap: 8px; height: 100%; padding: 18px 18px 20px; border-radius: 20px; background: rgba(11, 11, 11, .2); container-type: inline-size;
  color: #fff !important; text-decoration: none; transition: transform .14s var(--fr-ease), background-color .2s var(--fr-ease); }
.fr-do a:active { transform: scale(.97); }
.fr-do b { font: 400 min(2rem, 10cqi)/.95 var(--font-display); text-transform: uppercase; }
.fr-do span { font-size: .92rem; line-height: 1.5; color: rgba(255, 255, 255, .86); }
@media (hover: hover) { .fr-do a:hover { background: rgba(11, 11, 11, .34); } }
@media (max-width: 1100px) { .fr-do { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .fr-do { grid-template-columns: minmax(0, 1fr); } }
.fr-faq { background: #0b0b0b; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); container-type: inline-size; }
.fr-qs { display: grid; gap: 6px; }
.fr-qs details { border-radius: 18px; background: rgba(255, 255, 255, .06); }
.fr-qs summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; font: 800 clamp(1rem, 1.5vw, 1.15rem)/1.4 var(--font-body);
  cursor: pointer; list-style: none; }
.fr-qs summary::-webkit-details-marker { display: none; }
.fr-qs summary::after { content: ""; flex: none; width: 12px; height: 12px; border: solid #e0203f; border-width: 0 3px 3px 0; transform: rotate(45deg) translateY(-3px);
  transition: transform .2s var(--fr-ease); }
.fr-qs details[open] summary::after { transform: rotate(225deg) translateY(-3px); }
.fr-qs summary:active { transform: scale(.99); }
.fr-qs p { margin: 0; padding: 0 20px 20px; max-width: 70ch; line-height: 1.65; color: rgba(255, 255, 255, .78); }
.fr-else { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; font: 700 .95rem var(--font-body); color: rgba(255, 255, 255, .62); }
.fr-else a { padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: #fff !important; text-decoration: none; transition: transform .14s var(--fr-ease); }
.fr-else a:active { transform: scale(.96); }

/* the way to everything else: small, on purpose */
.fr-old { margin: 18px 0 0; text-align: center; }
.fr-old a { font: 600 .82rem var(--font-body); color: var(--text-dim) !important; text-decoration: underline; text-underline-offset: 3px; opacity: .8; }
.fr-old a:hover { opacity: 1; }

:root[lang="fa"] .fr-h, :root[lang="fa"] .fr-sh, :root[lang="fa"] .fr-tile b, :root[lang="fa"] .fr-do b { line-height: 1.15; }
@media (prefers-reduced-motion: reduce) { .fr-btn, .fr-tile, .fr-do a, .fr-qs summary::after { transition: none; } }