/*
 * demo43 "Connect · Feature + Rail" — a gallery-wall Connect page: every section is a large
 * feature panel (cover + details, Cormorant Garamond) beside a horizontal rail (js/rail.js);
 * the rail card under the pointer or in focus crossfades into the panel. Champagne on the dark
 * site ground, quiet in-row controls. Site chrome: css/site.css, site-chrome.css, header.css.
 */
:root {
    --ink: #f3eee6;
    --soft: rgb(243 238 230 / 0.68);
    --faint: rgb(243 238 230 / 0.44);
    --rule: rgb(243 238 230 / 0.13);
    --champ: #d9c49c;
    --green: #53f57e;
    --panel: rgb(22 21 24 / 0.72);
    --serif: "Cormorant Garamond", "Cormorant", Garamond, Georgia, serif;
    --sans: "Hanken Grotesk", "Lato", system-ui, sans-serif;
    --gut: clamp(16px, 3.4vw, 56px);
}

/* site.css scrolls smoothly; here only the banner's own links glide (js) */
html { scroll-behavior: auto; }

.fr { padding: 0 0 clamp(64px, 8vw, 128px); color: var(--ink); font-family: var(--sans); }
.fr a { color: inherit; text-decoration: none; }
.fr :focus-visible { outline: 2px solid var(--champ); outline-offset: 3px; border-radius: 4px; }
.fr img { display: block; max-width: 100%; }

.fr-kicker, .fr-head__no, .fr-all, .fr-ft__top, .fr-ft__genre, .fr-ft__facts dt, .fr-card__sub, .fr-banner__links a {
    font: 600 11px/1.2 var(--sans);
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

/* ── banner: headline + a strip of portraits, the one under the pointer opens ───────────────── */
.fr-banner {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: clamp(24px, 4vw, 72px);
    max-width: 1720px;
    margin: 0 auto;
    padding: clamp(28px, 4vw, 64px) var(--gut) clamp(24px, 3vw, 48px);
}
.fr-kicker { margin: 0 0 24px; color: var(--champ); }
.fr-banner__title { margin: 0; font: 500 clamp(64px, 9vw, 156px)/0.86 var(--serif); letter-spacing: -0.02em; }
.fr-banner__title em { display: block; margin-top: 0.16em; font-size: 0.34em; font-style: italic; letter-spacing: 0; color: var(--champ); }
.fr-banner__lede { max-width: 44ch; margin: 28px 0 0; color: var(--soft); font-size: clamp(15px, 1.15vw, 18px); line-height: 1.65; }
.fr-banner__links { display: flex; flex-wrap: wrap; gap: 10px; margin: 32px 0 0; }
.fr-banner__links a { padding: 11px 18px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--rule); color: var(--soft); transition: color 0.3s ease, box-shadow 0.3s ease; }
.fr-banner__links a:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--champ); }

.fr-banner__strip { display: flex; gap: 10px; height: clamp(320px, 38vw, 560px); margin: 0; padding: 0; list-style: none; }
.fr-banner__strip li { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: 16px; transition: flex-grow 0.8s cubic-bezier(0.2, 0.75, 0.2, 1); }
.fr-banner__strip li.is-open { flex-grow: 4.2; }
.fr-banner__strip img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85) brightness(0.78); transition: filter 0.8s ease; }
.fr-banner__strip li.is-open img { filter: none; }

/* ── section head ───────────────────────────────────────────────────────────────────────────── */
.fr-sec { max-width: 1720px; margin: 0 auto; padding: clamp(48px, 6vw, 96px) var(--gut) 0; scroll-margin-top: 70px; }
.fr-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 22px; margin-bottom: clamp(20px, 2.4vw, 32px); }
.fr-head__no { margin: 0; color: var(--champ); }
.fr-head__title { margin: 0; font: 500 clamp(40px, 4.4vw, 72px)/1 var(--serif); letter-spacing: -0.01em; }
.fr-head__note { flex: 1 1 260px; margin: 0; color: var(--faint); font-size: 14px; }
.fr-all { display: inline-flex; gap: 10px; padding-bottom: 4px; border-bottom: 1px solid var(--rule); color: var(--soft); transition: color 0.3s ease, border-color 0.3s ease; }
.fr-all:hover { color: var(--ink); border-color: var(--champ); }

/* ── feature + rail ─────────────────────────────────────────────────────────────────────────── */
.fr-split { display: grid; grid-template-columns: minmax(0, 0.46fr) minmax(0, 0.54fr); gap: clamp(16px, 2vw, 32px); align-items: stretch; }
.fr-split--people { grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); }
.fr-split--partners .fr-feature { min-height: 440px; }
.fr-split--people .fr-feature { min-height: 420px; }

.fr-feature {
    position: relative;
    display: grid;
    min-height: 360px;
    overflow: hidden;
    border-radius: 20px;
    background: var(--panel);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}
.fr-ft {
    grid-area: 1 / 1;
    display: grid;
    grid-template-columns: minmax(0, 0.54fr) minmax(0, 0.46fr);
    gap: clamp(16px, 2vw, 30px);
    padding: clamp(12px, 1.2vw, 18px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.55s ease, visibility 0s linear 0.55s;
}
.fr-ft.is-on { opacity: 1; visibility: visible; transition: opacity 0.55s ease, visibility 0s; }
.fr-ft__media { position: relative; display: block; min-height: 0; overflow: hidden; border-radius: 12px; }
.fr-ft__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.fr-ft.is-on .fr-ft__media img { transform: none; }
.fr-ft__body { display: flex; flex-direction: column; min-width: 0; padding: clamp(6px, 1vw, 16px) clamp(4px, 1vw, 14px) clamp(6px, 1vw, 12px) 0; }
.fr-ft__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; color: var(--faint); font-variant-numeric: tabular-nums; }
.fr-ft__genre { margin: auto 0 0; padding-top: 16px; color: var(--champ); }
.fr-ft__name { margin: 10px 0 0; font: 500 clamp(36px, 3.4vw, 64px)/0.95 var(--serif); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.fr-ft__line { margin: 14px 0 0; max-width: 32ch; color: var(--soft); font: italic 500 clamp(17px, 1.3vw, 21px)/1.35 var(--serif); }
.fr-ft__facts { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 20px 0 0; padding-top: 14px; border-top: 1px solid var(--rule); }
.fr-ft__facts div { display: grid; gap: 5px; }
.fr-ft__facts dt { color: var(--faint); font-size: 10px; }
.fr-ft__facts dd { margin: 0; font: 500 19px/1.1 var(--serif); }
.fr-ft__issues { display: flex; gap: 8px; margin-top: 18px; }
.fr-ft__issues img { width: 46px; aspect-ratio: 4 / 5; height: auto; object-fit: cover; border-radius: 4px; opacity: 0.85; }
.fr-ft__avatar { margin-top: 18px; }
.fr-ft__avatar img { width: 44px; height: 44px; border-radius: 50%; box-shadow: 0 0 0 2px var(--champ); }
.fr-ft__open {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    padding: 12px 18px;
    border-radius: 999px;
    background: var(--champ);
    color: #1a1714 !important;
    font: 600 13px/1 var(--sans);
    letter-spacing: 0.02em;
    transition: gap 0.3s ease, background-color 0.3s ease;
}
.fr-ft__open:hover { gap: 15px; background: #e9d8b6; }

.fr-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--rule); color: var(--ink); font: 600 10px/1 var(--sans); letter-spacing: 0.16em; }
.fr-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.fr-badge--paid { color: #ffb500; box-shadow: inset 0 0 0 1px rgb(255 181 0 / 0.35); }
.fr-badge--creator { color: var(--green); box-shadow: inset 0 0 0 1px rgb(83 245 126 / 0.35); }

/* the rail: restyled rail.css */
.fr-rail {
    --rail-card: clamp(220px, 20vw, 320px);
    --rail-gap: clamp(12px, 1.2vw, 18px);
    --rail-ui: var(--ink);
    --rail-ui-bg: rgb(20 19 22 / 0.42);
    --rail-ui-rest: 0.22;
    --rail-fade: rgb(18 17 20 / 0.5);
    --rail-line: rgb(243 238 230 / 0.1);
    --rail-thumb: rgb(217 196 156 / 0.75);
    --rail-bar-h: 34px;
    align-self: end;
    min-width: 0;
}
.fr-split--free .fr-rail { --rail-card: clamp(140px, 12vw, 196px); }
.fr-split--people .fr-rail { --rail-card: clamp(180px, 15vw, 240px); }
.fr-rail .rail__edge { border-radius: 0; }
.fr-rail .rail__edge--prev { border-radius: 14px 0 0 14px; }
.fr-rail .rail__edge--next { border-radius: 0 14px 14px 0; }
.fr-rail .rail__bar { padding-top: 6px; }
.fr-rail .rail__pos { font-family: var(--sans); letter-spacing: 0.2em; }

.fr-card { display: block; }
.fr-card__media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 12px; background: rgb(255 255 255 / 0.04); }
.fr-card--free .fr-card__media, .fr-card--person .fr-card__media { aspect-ratio: 2 / 3; }
.fr-card__media::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06); transition: box-shadow 0.35s ease; }
.fr-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.4s ease, filter 0.4s ease; }
.fr-card__cap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; padding: 12px 2px 0; }
.fr-card--free .fr-card__cap { padding-top: 8px; }
.fr-card__name { font: 500 21px/1.1 var(--serif); }
.fr-card--free .fr-card__name { font-size: 17px; }
.fr-card__sub { color: var(--faint); font-size: 10px; }
/* the card shown in the feature; the others step back while the pointer is over the rail */
.fr-card.is-feature .fr-card__media::after { box-shadow: inset 0 0 0 2px var(--champ); }
.fr-card.is-feature .fr-card__name { color: var(--champ); }
.fr-rail:hover .fr-card:not(.is-feature) .fr-card__media img { filter: brightness(0.62) saturate(0.8); }
.fr-card:hover .fr-card__media img { transform: scale(1.04); }

/* ── responsive ─────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
    .fr-split, .fr-split--people { grid-template-columns: minmax(0, 0.5fr) minmax(0, 0.5fr); }
    .fr-ft__issues { display: none; }
}
@media (max-width: 899px) {
    .fr-banner { grid-template-columns: 1fr; }
    .fr-banner__strip { height: 300px; }
    .fr-split, .fr-split--people { grid-template-columns: minmax(0, 1fr); }
    .fr-split .fr-feature { min-height: 380px; }
    .fr-rail { --rail-card: 44vw; }
    .fr-split--free .fr-rail { --rail-card: 30vw; }
    .fr-split--people .fr-rail { --rail-card: 38vw; }
}
@media (max-width: 560px) {
    .fr-split .fr-feature { min-height: 0; }
    .fr-ft { grid-template-columns: 42% minmax(0, 1fr); gap: 14px; }
    .fr-ft__name { overflow-wrap: break-word; }
    .fr-ft__media { aspect-ratio: 4 / 5; align-self: start; }
    .fr-split--free .fr-ft__media, .fr-split--people .fr-ft__media { aspect-ratio: 2 / 3; }
    .fr-ft__name { font-size: 30px; }
    .fr-ft__line { font-size: 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    .fr-ft__facts { gap: 8px 18px; margin-top: 12px; }
    .fr-ft__facts dd { font-size: 16px; }
    .fr-ft__open { margin-top: 14px; padding: 10px 14px; font-size: 12px; }
    .fr-ft__avatar { display: none; }
    .fr-banner__strip { height: 240px; gap: 6px; }
    .fr-banner__strip li { border-radius: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .fr-ft, .fr-ft.is-on, .fr-ft__media img, .fr-card__media img, .fr-banner__strip li, .fr-banner__strip img { transition: none; }
}