/*
 * Demo demo36 "Connect · Masthead Index" — the Connect page as an editorial index.
 * Type: Cormorant Garamond (self-hosted, fonts/) for the display names, Lato small caps for the
 * metadata, Lazurski for numerals. Dark site ground (#18171a) with the shared background showing
 * through, thin hairline rules, generous whitespace, one warm accent (site yellow) used sparingly.
 */
@font-face { font-family: "Cormorant Garamond"; src: url("/demo36/fonts/CormorantGaramond-latin.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("/demo36/fonts/CormorantGaramond-Italic-latin.woff2") format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; }

:root {
    --mi-ink: #f3efe7;
    --mi-soft: rgb(243 239 231 / 0.62);
    --mi-faint: rgb(243 239 231 / 0.42);
    --mi-rule: rgb(243 239 231 / 0.14);
    --mi-rule-strong: rgb(243 239 231 / 0.32);
    --mi-gold: #ffb500;
    --mi-green: #53b167;
    --mi-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --mi-num: "Lazurski", Georgia, serif;
    --mi-sans: "Lato", "Source Sans 3", system-ui, sans-serif;
    --mi-max: 1360px;
    --mi-gut: clamp(20px, 4vw, 56px);
    --mi-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

.main { padding: 0 0 clamp(64px, 8vw, 120px); color: var(--mi-ink); }
.mi-wrap { width: 100%; max-width: var(--mi-max); margin: 0 auto; padding-inline: var(--mi-gut); }
.main img, .mi-float img { height: auto; }
.mi-card__media, .mi-row__thumb img { display: block; }
.main a:focus-visible { outline: 1px solid var(--mi-gold); outline-offset: 6px; }

/* small caps label, used everywhere for metadata */
.mi-kicker, .mi-head__note, .mi-head__all, .mi-row__cell, .mi-index__legend, .mi-banner__facts dt,
.mi-card__meta, .mi-person__meta, .mi-banner__cap span, .mi-badge {
    font: 700 11px/1.3 var(--mi-sans);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* ── banner ─────────────────────────────────────────────────────────────────────────────── */
.mi-banner { padding-block: clamp(48px, 7vw, 104px) clamp(56px, 7vw, 112px); border-bottom: 1px solid var(--mi-rule); }
.mi-banner__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: end; }
.mi-kicker { display: flex; flex-wrap: wrap; gap: 0 28px; margin-bottom: clamp(28px, 4vw, 48px); color: var(--mi-soft); }
.mi-kicker span:first-child { color: var(--mi-gold); }
.mi-banner__title {
    margin: 0;
    font: 300 clamp(48px, 7.2vw, 112px)/0.94 var(--mi-serif);
    letter-spacing: -0.02em;
    color: var(--mi-ink);
    text-wrap: balance;
}
.mi-banner__title em { font-style: italic; font-weight: 300; color: var(--mi-soft); }
.mi-banner__amp { color: var(--mi-gold); }
.mi-banner__lede { max-width: 36em; margin-top: clamp(28px, 3vw, 40px); font: 300 18px/1.65 var(--mi-sans); color: var(--mi-soft); }
.mi-banner__facts { display: flex; gap: clamp(28px, 5vw, 72px); margin: clamp(36px, 4vw, 56px) 0 0; padding-top: 22px; border-top: 1px solid var(--mi-rule); }
.mi-banner__facts div { display: flex; flex-direction: column-reverse; gap: 6px; }
.mi-banner__facts dt { color: var(--mi-faint); }
.mi-banner__facts dd { margin: 0; font: 400 clamp(34px, 3.4vw, 48px)/1 var(--mi-num); color: var(--mi-ink); font-variant-numeric: lining-nums; }

.mi-banner__figure { position: relative; justify-self: end; width: 100%; max-width: 560px; margin: 0; padding: 0 0 0 clamp(40px, 6vw, 96px); }
.mi-banner__img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(0.15) contrast(1.02); }
.mi-banner__img--small {
    position: absolute; left: 0; bottom: 64px;
    width: 36%; aspect-ratio: 2 / 3;
    box-shadow: 0 24px 60px -18px rgb(0 0 0 / 0.7);
    outline: 10px solid #18171a;
}
.mi-banner__cap { margin-top: 16px; font: italic 300 17px/1.4 var(--mi-serif); color: var(--mi-soft); }
.mi-banner__cap span { display: block; margin-bottom: 4px; font-style: normal; color: var(--mi-faint); }

/* ── section head ───────────────────────────────────────────────────────────────────────── */
.mi-section { padding-top: clamp(64px, 8vw, 120px); }
.mi-head {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr) auto auto;
    align-items: baseline;
    gap: 8px 32px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--mi-rule-strong);
}
.mi-head__no { font: italic 300 22px/1 var(--mi-serif); color: var(--mi-gold); }
.mi-head__title { font: 400 clamp(30px, 3vw, 40px)/1 var(--mi-serif); letter-spacing: 0.01em; color: var(--mi-ink); }
.mi-head__note { color: var(--mi-faint); }
.mi-head__all { color: var(--mi-ink); padding: 8px 0; border-bottom: 1px solid var(--mi-rule-strong); transition: border-color 0.3s, color 0.3s; }
.mi-head__all:hover { color: var(--mi-gold); border-color: var(--mi-gold); }

/* ── PARTNERS: the index ────────────────────────────────────────────────────────────────── */
.mi-index { --cols: 60px minmax(0, 1fr) 130px 190px 70px 64px; position: relative; }
.mi-index__legend, .mi-row__link {
    display: grid;
    grid-template-columns: var(--cols);
    column-gap: 24px;
    align-items: baseline;
}
.mi-index__legend { padding: 14px 0; border-bottom: 1px solid var(--mi-rule); color: var(--mi-faint); font-size: 10px; }
.mi-index__legend span:nth-child(5), .mi-index__legend span:nth-child(6) { text-align: right; }
.mi-index__list { margin: 0; padding: 0; list-style: none; }
.mi-row { border-bottom: 1px solid var(--mi-rule); transition: opacity 0.45s var(--mi-ease); }
.mi-row__link { position: relative; padding: clamp(10px, 1.4vw, 18px) 0 clamp(12px, 1.6vw, 22px); color: inherit; }
.mi-row__no { font: 400 15px/1 var(--mi-num); color: var(--mi-faint); font-variant-numeric: tabular-nums lining-nums; transition: color 0.3s; }
.mi-row__thumb { display: none; }
.mi-row__name {
    display: inline-flex; align-items: flex-start; gap: 14px;
    font: 300 clamp(46px, 7.4vw, 124px)/0.98 var(--mi-serif);
    letter-spacing: -0.025em;
    white-space: nowrap;
    transition: transform 0.6s var(--mi-ease), color 0.3s;
}
.mi-row__name .mi-badge { margin-top: 0.42em; letter-spacing: 0.16em; }
.mi-row__cell { color: var(--mi-soft); }
.mi-row__since, .mi-row__issues { text-align: right; font-variant-numeric: tabular-nums; }
.mi-row__key { display: none; }
.mi-row__line {
    grid-column: 2 / -1;
    max-height: 0; overflow: hidden; opacity: 0;
    font: italic 300 19px/1.4 var(--mi-serif); color: var(--mi-soft);
    transition: max-height 0.5s var(--mi-ease), opacity 0.4s, margin 0.5s var(--mi-ease);
}

.mi-index.is-hovering .mi-row { opacity: 0.22; }
.mi-index.is-hovering .mi-row.is-active { opacity: 1; }
.mi-row.is-active .mi-row__name { font-style: italic; transform: translateX(18px); }
.mi-row.is-active .mi-row__no { color: var(--mi-gold); }
.mi-row.is-active .mi-row__line { max-height: 2em; opacity: 1; margin-top: 4px; }

/* the cover that follows the cursor */
.mi-float {
    position: fixed; left: 0; top: 0; z-index: 30;
    width: clamp(220px, 19vw, 290px);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s var(--mi-ease);
    will-change: transform;
}
.mi-float img {
    width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
    box-shadow: 0 30px 80px -20px rgb(0 0 0 / 0.75), 0 0 0 1px rgb(255 255 255 / 0.06);
    transform: scale(0.92);
    transition: transform 0.5s var(--mi-ease);
}
.mi-float.is-shown { opacity: 1; }
.mi-float.is-shown img { transform: scale(1); }
.mi-float__line { display: none; }

/* badges, as in the data: paid magazines, free magazines, paid creators */
.mi-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 9px; color: var(--mi-gold); white-space: nowrap; }
.mi-badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.mi-badge--free { color: var(--mi-faint); }
.mi-badge--free::before { background: none; box-shadow: inset 0 0 0 1px currentColor; }
.mi-badge--creator { color: var(--mi-green); }

/* ── FREE: a calm grid of small cards ───────────────────────────────────────────────────── */
.mi-free__grid, .mi-people__grid {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(28px, 3vw, 44px) clamp(16px, 2.4vw, 32px);
    margin: clamp(28px, 3vw, 40px) 0 0; padding: 0; list-style: none;
}
.mi-card__link { display: grid; grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 18px; align-items: start; padding-bottom: 18px; border-bottom: 1px solid var(--mi-rule); color: inherit; }
.mi-card__media { grid-row: 1 / 3; overflow: hidden; background: rgb(255 255 255 / 0.04); }
.mi-card__media img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform 0.8s var(--mi-ease), filter 0.5s; filter: saturate(0.85); }
.mi-card__name { margin-top: 2px; font: 400 25px/1.05 var(--mi-serif); color: var(--mi-ink); transition: color 0.3s; }
.mi-card__meta { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; color: var(--mi-faint); font-size: 10px; }
.mi-card__link:hover .mi-card__media img { transform: scale(1.05); filter: saturate(1); }
.mi-card__link:hover .mi-card__name { font-style: italic; }
.mi-card--more .mi-card__link { display: flex; flex-direction: column; justify-content: space-between; min-height: 100%; padding: 4px 0 18px; }
.mi-card__more-label { font: italic 300 25px/1.1 var(--mi-serif); color: var(--mi-soft); }
.mi-card__more-arrow { font: 300 40px/1 var(--mi-serif); color: var(--mi-gold); transition: transform 0.5s var(--mi-ease); }
.mi-card--more .mi-card__link:hover .mi-card__more-arrow { transform: translateX(10px); }

/* ── People: portraits ──────────────────────────────────────────────────────────────────── */
.mi-people__grid { row-gap: clamp(40px, 4vw, 64px); }
.mi-person__link { display: block; color: inherit; }
.mi-person__media { display: block; overflow: hidden; background: rgb(255 255 255 / 0.04); }
.mi-person__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1s var(--mi-ease); }
.mi-person__link:hover .mi-person__media img { transform: scale(1.04); }
.mi-person__name { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--mi-rule); font: 400 24px/1.1 var(--mi-serif); color: var(--mi-ink); }
.mi-person__link:hover .mi-person__name { font-style: italic; }
.mi-person__meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; color: var(--mi-faint); font-size: 10px; }
.mi-person__meta span:first-child { color: var(--mi-soft); }

/* ── touch: no floating cover, an inline thumbnail in each row ─────────────────────────── */
@media (hover: none), (pointer: coarse) {
    .mi-float { display: none; }
    .mi-index { --cols: 60px 72px minmax(0, 1fr) 130px 190px 70px 64px; }
    .mi-index__legend span:nth-child(2) { grid-column: 2 / 4; }
    .mi-row__thumb { display: block; align-self: center; }
    .mi-row__thumb img { width: 72px; aspect-ratio: 4 / 5; object-fit: cover; }
    .mi-row__line { display: none; }
}

/* ── responsive ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .mi-index { --cols: 48px minmax(0, 1fr) 120px 70px 56px; }
    .mi-row__genre, .mi-index__legend span:nth-child(4) { display: none; }
    .mi-free__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mi-people__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) and (hover: none), (max-width: 1100px) and (pointer: coarse) {
    .mi-index { --cols: 48px 72px minmax(0, 1fr) 120px 70px 56px; }
}
@media (max-width: 860px) {
    .mi-banner__grid { grid-template-columns: 1fr; }
    .mi-banner__figure { max-width: 520px; }
    .mi-head { grid-template-columns: auto minmax(0, 1fr) auto; }
    .mi-head__note { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 720px) {
    /* the row becomes: thumb + name on top, metadata as one small-caps line underneath */
    .mi-index__legend { display: none; }
    .mi-row__link { grid-template-columns: 64px auto auto auto minmax(0, 1fr); column-gap: 12px; row-gap: 8px; align-items: end; padding: 16px 0; }
    .mi-row__no { display: none; }
    .mi-row__thumb { display: block; grid-column: 1; grid-row: 1 / 3; align-self: start; }
    .mi-row__thumb img { width: 64px; aspect-ratio: 4 / 5; object-fit: cover; }
    .mi-row__name { grid-column: 2 / -1; grid-row: 1; font-size: clamp(36px, 10.5vw, 56px); white-space: normal; flex-wrap: wrap; gap: 4px 12px; }
    .mi-row__name .mi-badge { margin-top: 0; align-self: center; }
    .mi-row__cell { grid-row: 2; text-align: left; font-size: 10px; letter-spacing: 0.12em; white-space: nowrap; align-self: start; }
    .mi-row__city { grid-column: 2; } .mi-row__since { grid-column: 3; } .mi-row__issues { grid-column: 4; }
    .mi-row__genre { display: none; }
    .mi-row__since::before { content: "since "; }
    .mi-row__issues::after { content: " issues"; }
    .mi-row__line, .mi-float { display: none; }
    .mi-row.is-active .mi-row__name { transform: none; }
    .mi-free__grid, .mi-people__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mi-card__link { grid-template-columns: 1fr; }
    .mi-card__media { grid-row: auto; margin-bottom: 12px; }
    .mi-card__name { font-size: 22px; }
    .mi-person__name { font-size: 20px; flex-direction: column; gap: 6px; }
    .mi-person__meta { flex-direction: column; gap: 4px; }
    .mi-banner__img--small { width: 40%; }
    .mi-banner__lede { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .mi-row, .mi-row__name, .mi-row__line, .mi-float, .mi-float img, .mi-card__media img, .mi-person__media img, .mi-card__more-arrow { transition: none; }
    .mi-row.is-active .mi-row__name { transform: none; }
}