/* ========================================================== REFERANSLAR ====
   /referanslar — generated by scripts/references.mjs.

     rf-hero    the promise, and how many are shown (never a total)
     rf-wall    the logo wall: each mark on its own plate, like a gallery
                wall. Plates are white; a mark whose artwork needs a dark
                field gets one (client--dark: white type; client--ink: its
                own baked-in ground, matched exactly so the edge disappears).
                Each logo's width (--size) is set from the square root of its
                aspect ratio, so square marks and long wordmarks weigh the same.
     rf-venues  graphite: the photographed references (references.css)
     rf-join    the next step
   ========================================================================== */

.rf-eyebrow { display: flex; align-items: center; gap: .75rem; margin-bottom: clamp(1.2rem, 2vw, 1.8rem); color: var(--muted); font-size: .72rem; font-weight: 500; letter-spacing: .11em; text-transform: uppercase; }
.rf-eyebrow::before { content: ''; width: 1.6rem; height: 1px; background: var(--gold-ink); }
.rf-eyebrow span { color: var(--gold-ink); }

/* ---------------------------------------------------------------- hero */
.rf-hero { background: var(--surface-light); }
.rf-hero__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "crumbs crumbs" "copy aside"; gap: 0 clamp(2rem, 6vw, 7rem); align-items: end; margin-inline: var(--gutter); padding-block: clamp(1.2rem, 2vw, 1.8rem) clamp(2.8rem, 5vw, 5rem); }
.rf-crumbs { grid-area: crumbs; }
.rf-crumbs ol { display: flex; flex-wrap: wrap; gap: .25rem .6rem; margin-bottom: clamp(2rem, 4.4vw, 4.4rem); color: var(--muted); font-size: .8125rem; }
.rf-crumbs li + li::before { content: '/'; margin-right: .6rem; color: var(--line); }
.rf-crumbs a { display: inline-block; padding-block: .2rem; }
.rf-crumbs a:hover, .rf-crumbs [aria-current] { color: var(--ink); }
.rf-hero__copy { grid-area: copy; }
.rf-hero__title { font-size: clamp(2.8rem, 6vw, 7rem); font-weight: 500; line-height: 1; letter-spacing: -.055em; }
.rf-hero__title em { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; font-size: 1.1em; letter-spacing: -.02em; color: var(--gold-deep); }
.rf-hero__aside { grid-area: aside; padding-bottom: .6rem; }
.rf-hero__lede { max-width: 30rem; color: var(--muted); font-size: clamp(.98rem, 1.1vw, 1.1rem); line-height: 1.75; }
.rf-hero__count { display: flex; align-items: flex-end; gap: 1rem; margin-top: clamp(1.6rem, 2.6vw, 2.4rem); padding-top: 1.2rem; border-top: 1px solid var(--line); }
.rf-hero__figure { font-size: clamp(3rem, 5vw, 5rem); font-weight: 400; line-height: .8; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.rf-hero__label { padding-bottom: .15rem; color: var(--muted); font-size: .78rem; line-height: 1.45; letter-spacing: .02em; }

/* ---------------------------------------------------------------- wall */
.rf-wall { background: var(--surface-light); }
.rf-wall__inner { margin-inline: var(--gutter); padding-bottom: clamp(4.5rem, 8vw, 8.5rem); }
.rf-wall__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 2rem) clamp(1rem, 2vw, 2rem); }
.client { min-width: 0; }
.client__card { margin: 0; }
.client__plate {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid rgb(43 46 44 / .08);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 1px 0 rgb(43 46 44 / .04), 0 1.2rem 2.4rem -2rem rgb(43 46 44 / .35);
  transition: transform 450ms var(--motion), box-shadow 450ms var(--motion), border-color 300ms ease;
}
/* a gold hairline draws along the top edge on hover */
.client__plate::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left center; transition: transform 550ms var(--ease-editorial); }
.client__logo { display: block; width: var(--size); max-width: 84%; height: auto; max-height: 58%; object-fit: contain; transition: transform 600ms var(--ease-editorial); }
.client--dark .client__plate { border-color: transparent; background: #121413; }
.client--ink .client__plate { border-color: transparent; background: #161619; }
.client__caption { display: flex; align-items: baseline; gap: .7rem; padding: .95rem .15rem 0; }
.client__no { flex: none; color: var(--gold-ink); font-size: .68rem; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.client__name { font-size: clamp(.86rem, .95vw, .95rem); font-weight: 500; line-height: 1.35; letter-spacing: -.01em; }
@media (hover: hover) {
  .client:hover .client__plate { transform: translateY(-4px); border-color: rgb(209 154 23 / .35); box-shadow: 0 1px 0 rgb(43 46 44 / .04), 0 1.8rem 3rem -2rem rgb(43 46 44 / .5); }
  .client:hover .client__plate::after { transform: scaleX(1); }
  .client:hover .client__logo { transform: scale(1.05); }
}
.rf-wall__note { margin-top: clamp(2rem, 3.4vw, 3rem); color: var(--muted); font-size: .76rem; line-height: 1.6; }

/* the invitation that completes the last row */
.rf-invite { grid-column: span var(--span4); min-width: 0; }
.rf-invite__card { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 1.6rem; height: 100%; min-height: 12rem; padding: clamp(1.6rem, 2.6vw, 2.6rem); border-radius: 6px; overflow: hidden; color: var(--on-dark-ink); background: radial-gradient(120% 140% at 100% 0%, #3a3a33 0%, #2b2e2c 45%, #1f2120 100%); box-shadow: 0 1.2rem 2.4rem -2rem rgb(43 46 44 / .6); transition: transform 450ms var(--motion), box-shadow 450ms var(--motion); }
.rf-invite__card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--gold-lit); transform: scaleX(.18); transform-origin: left center; transition: transform 600ms var(--ease-editorial); }
.rf-invite__kicker { color: var(--gold-lit); font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.rf-invite__title { font-size: clamp(1.5rem, 2.5vw, 2.6rem); font-weight: 500; line-height: 1.12; letter-spacing: -.04em; }
/* the serif half sits on its own line on wide cards */
.rf-invite__title em { display: block; font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; font-size: 1.1em; letter-spacing: -.01em; color: var(--gold-lit); }
.rf-invite__cta { display: inline-flex; align-self: flex-start; align-items: center; gap: .7rem; min-height: 2.75rem; border-bottom: 1px solid var(--on-dark-line-strong); font-size: .9rem; font-weight: 600; transition: border-color 200ms ease; }
.rf-invite__cta svg { width: .95rem; height: .95rem; fill: none; stroke: var(--gold-lit); stroke-width: 1.4; transition: transform 250ms var(--motion); }
@media (hover: hover) {
  .rf-invite__card:hover { transform: translateY(-4px); box-shadow: 0 1.8rem 3rem -2rem rgb(43 46 44 / .7); }
  .rf-invite__card:hover::after { transform: scaleX(1); }
  .rf-invite__card:hover .rf-invite__cta { border-color: var(--gold-lit); }
  .rf-invite__card:hover .rf-invite__cta svg { transform: translate(2px, -2px); }
}
@media (max-width: 74.99em) { .rf-invite { grid-column: span var(--span3); } }
@media (max-width: 47.99em) {
  .rf-invite { grid-column: span var(--span2); }
  .rf-invite__card { min-height: 0; gap: .9rem; padding: 1.1rem; }
  .rf-invite__kicker { font-size: .56rem; letter-spacing: .1em; }
  .rf-invite__title { font-size: 1.12rem; }
  .rf-invite__title em { display: inline; }
  .rf-invite__cta { font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) { .rf-invite__card, .rf-invite__card::after, .rf-invite__cta svg { transition: none; } .rf-invite__card:hover { transform: none; } }

/* ------------------------------------------------------------- venues */
.rf-venues .refs__head { padding-bottom: clamp(2.4rem, 4vw, 4.5rem); }

/* --------------------------------------------------------------- join */
.rf-join { background: var(--surface-light); }
.rf-join__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem clamp(2.5rem, 6vw, 7rem); align-items: end; margin-inline: var(--gutter); padding-block: clamp(4.5rem, 7.5vw, 8rem); }
.rf-eyebrow--quiet { margin-bottom: clamp(1rem, 1.6vw, 1.4rem); }
.rf-join__title { font-size: clamp(2.3rem, 4.4vw, 5rem); font-weight: 500; line-height: 1.04; letter-spacing: -.05em; }
.rf-join__title span { color: var(--muted); }
.rf-join__lede { max-width: 32rem; margin-top: 1.2rem; color: var(--muted); font-size: .98rem; line-height: 1.75; }
.rf-join__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.8rem; }
.rf-join__actions .pill { color: var(--on-gold); }
.rf-join__wa { display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem; border-bottom: 1px solid var(--field-line); font-size: .9rem; font-weight: 600; transition: color 200ms ease, border-color 200ms ease; }
.rf-join__wa .wa-icon { width: 1.2rem; height: 1.2rem; flex: none; fill: none; stroke: var(--gold-ink); stroke-width: 1.5; stroke-linejoin: round; }
.rf-join__wa:hover { color: var(--gold-ink); border-color: var(--gold-deep); }
.rf-join__phone { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: 1.15rem; font-weight: 600; letter-spacing: -.02em; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--field-line); text-underline-offset: .3em; }
.rf-join__phone:hover { color: var(--gold-ink); }

/* ---------------------------------------------------------- responsive */
@media (max-width: 74.99em) { .rf-wall__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 63.99em) {
  .rf-hero__inner, .rf-join__inner { grid-template-columns: 1fr; grid-template-areas: "crumbs" "copy" "aside"; }
  .rf-hero__aside { margin-top: 2rem; }
}
@media (max-width: 47.99em) {
  .rf-crumbs ol { margin-bottom: 2rem; }
  .rf-hero__title { font-size: clamp(2.5rem, 11vw, 3.6rem); }
  .rf-wall__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem .8rem; }
  .client__logo { max-width: 86%; max-height: 62%; }
  .client__caption { gap: .45rem; padding-top: .7rem; }
  .client__name { font-size: .8rem; }
  .rf-join__inner { padding-block: 3.8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .client__plate, .client__plate::after, .client__logo, .rf-join__wa { transition: none; }
  .client:hover .client__plate, .client:hover .client__logo { transform: none; }
}