/*
 * demo49 "Connect · Frames per picture" — demo46's Connect page (sizes, type, pills, arrows and
 * badges of dev0.dphub.net/connect, rows / grid view switch, two partner rows that fit the
 * screen) where every picture wears its own frame or effect: 100 numbered styles .fx-1 … .fx-100
 * (bottom of this file), Like / Favourite on each picture, and its style number after a 3 s hold.
 * Base rules: as demo46.css, with the card split into a link + buttons (js/demo49.js).
 */
.cn {
    --hdr: 70px;            /* the sticky site header */
    --head: 44px;           /* section head: title, view switch, View all, position */
    --sec-top: 14px;        /* space above the head */
    --gap: 24px;            /* between cards (the site: 40px — a little tighter so more fits) */
    --row-gap: 18px;        /* between the two partner rows */
    --spare: 14px;          /* room left under the second row (at least 10 px after rounding) */
    --side: max(16px, calc((100vw - 1360px) / 2));
    --card-h: min(
        clamp(120px, calc((100svh - var(--hdr) - var(--sec-top) - var(--head) - var(--row-gap) - var(--spare)) / 2), 440px),
        calc(44vw * 1.2)    /* phones: at least two cards side by side */
    );
    --card-w: calc(var(--card-h) / 1.2);      /* the site's 1 : 1.2 card */
    --radius: 10px;
    --green: #469a58;
    --muted: rgb(255 255 255 / 0.7);
    --pill: rgb(255 255 255 / 0.2);
    display: block;
    padding: 0 0 64px;   /* site.css .main has 24px on top; the banner sits right under the header */
}
.cn-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── banner: as the site's .page-banner (edge to edge, 8 : 3, at most 480 px) ─────────────── */
.page-banner { position: relative; width: 100%; aspect-ratio: 8 / 3; max-height: 480px; overflow: hidden; background: #111; }
.page-banner__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
.page-banner__slide.is-on { opacity: 1; }
.page-banner__slide img { width: 100%; height: 100%; object-fit: cover; user-select: none; }

/* ── sections ──────────────────────────────────────────────────────────────────────────────── */
.cn-sec { padding-top: var(--sec-top); scroll-margin-top: var(--hdr); }
.cn-sec + .cn-sec { margin-top: 26px; }
.cn-head {
    display: flex; align-items: center; gap: 16px; height: var(--head);
    padding-inline: var(--side);
}
.cn-title { margin: 0; color: #fff; font: 600 15px/1.08 "Lato", sans-serif; letter-spacing: 0.02em; text-transform: uppercase; text-shadow: 0 0 6px rgb(0 0 0 / 0.5); }
.cn-tools { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.cn-view { display: flex; gap: 2px; padding: 2px; border-radius: 50px; background: var(--pill); }
.cn-view__btn {
    display: grid; place-items: center; width: 34px; height: 28px; padding: 0; border: 0; border-radius: 50px;
    background: transparent; color: var(--muted); cursor: pointer; transition: color 0.3s ease, background-color 0.3s ease;
}
.cn-view__btn:hover { color: #fff; }
.cn-view__btn[aria-pressed="true"] { color: var(--green); background: rgb(0 0 0 / 0.28); }
.cn-view__btn:focus-visible, .cn-all:focus-visible, .cn-step:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.cn-all {
    display: inline-flex; align-items: center; height: 30px; padding: 0 18px; border-radius: 50px; background: var(--pill);
    color: var(--muted); font: 700 15px/1.2 "Lato", sans-serif; text-transform: uppercase; text-decoration: none; transition: color 0.5s ease;
}
.cn-all:hover { color: var(--green); }
.cn-pos { min-width: 5ch; color: #fff; font: 400 15px/1 "Lato", sans-serif; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cn-step { display: grid; place-items: center; width: 50px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; opacity: 0.9; transition: opacity 0.3s ease; }
.cn-step img { width: 50px; height: 20px; }
.cn-step--prev img { transform: scaleX(-1); }
.cn-step:hover { opacity: 1; }
.cn-step:disabled { opacity: 0.22; cursor: default; }

/* ── rails (rows view): js/rail.js, full bleed, first card on the content edge ──────────────── */
.cn-rail { --rail-card: var(--card-w); --rail-gap: var(--gap); --rail-pad: var(--side); --rail-bar-h: 0px; --rail-fade: rgb(24 23 26 / 0.5); --rail-ui-rest: 0.22; }
.cn-rail .rail__track { row-gap: var(--row-gap); padding-block: 2px; }
.cn-sec--people .cn-rail { --rail-card: calc(var(--card-w) * 0.86); }   /* people: the same card, a little smaller */

/* ── cards: the site's Publish_item ────────────────────────────────────────────────────────── */
.cn-card { position: relative; display: block; }
.cn-card__link { position: relative; display: block; color: #fff; text-decoration: none; -webkit-user-drag: none; }
.cn-card__frame { position: relative; display: block; aspect-ratio: 1 / 1.2; overflow: hidden; border-radius: var(--radius); background: #222; }
/* --pad: a band between the frame's edge and the picture (styles with a border / mount set it) */
.cn-card__img, .cn-card__shade { position: absolute; inset: var(--pad, 0px); width: calc(100% - 2 * var(--pad, 0px)); height: calc(100% - 2 * var(--pad, 0px)); border-radius: var(--in-r, 0); }
.cn-card__img { object-fit: cover; transition: transform 0.6s ease, filter 0.6s ease; }
.cn-card:hover .cn-card__img { transform: scale(1.03); }
.cn-card__shade { background: linear-gradient(180deg, rgb(0 0 0 / 0) 35%, rgb(0 0 0 / 0.75) 100%); pointer-events: none; }
.cn-card__meta {
    position: absolute; left: clamp(10px, 6%, 20px); right: 10px; bottom: clamp(10px, 6%, 20px); z-index: 2;
    display: flex; align-items: center; gap: 8px; min-width: 0; pointer-events: none;
}
.cn-card__name {
    overflow: hidden; color: #fff; font: 600 clamp(10px, calc(var(--card-w) / 19), 16px)/1.08 "Lato", sans-serif;
    text-transform: uppercase; text-shadow: 0 0 6px rgb(0 0 0 / 0.5); white-space: nowrap; text-overflow: ellipsis;
}
.cn-card__badge { flex-shrink: 0; width: auto; height: 15px; max-width: 57px; object-fit: contain; }
.cn-card__more { display: none; }
.cn-card__link:focus-visible { outline: none; }
.cn-card__link:focus-visible .cn-card__frame { outline: 2px solid var(--green); outline-offset: 3px; }

/* People: avatar + badge, name, profession, location (the site's people slider) */
.cn-person { position: absolute; left: clamp(10px, 8%, 24px); right: 10px; bottom: clamp(10px, 8%, 24px); z-index: 2; display: flex; align-items: center; gap: 8px; pointer-events: none; }
.cn-person__avatar { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #d9d9d9; }
.cn-person__text { display: grid; gap: 2px; min-width: 0; }
.cn-person__badge { width: auto; height: 13px; max-width: 57px; object-fit: contain; object-position: left; }
.cn-person__name { overflow: hidden; font: 700 14px/1.2 "Lato", sans-serif; white-space: nowrap; text-overflow: ellipsis; text-shadow: 0 0 6px rgb(0 0 0 / 0.5); }
.cn-person__prof, .cn-person__loc { overflow: hidden; color: rgb(255 255 255 / 0.75); font: 400 12px/1.2 "Lato", sans-serif; white-space: nowrap; text-overflow: ellipsis; }


/* ── grid view: the same cards, the same size and gaps as in rows — they only wrap ─────────── */
html[data-view="grid"] .cn-rail .rail__track {
    grid-auto-flow: row; grid-template-rows: none; grid-template-columns: repeat(auto-fill, var(--rail-card));
    justify-content: start; gap: var(--row-gap) var(--gap); overflow: visible; cursor: auto; scroll-snap-type: none;
}
html[data-view="grid"] .cn-rail .rail__edge, html[data-view="grid"] .cn-step { display: none; }
html[data-view="grid"] .cn-pos::after { content: " cards"; color: var(--muted); }

@media (max-width: 991.98px) {
    .cn { --gap: 12px; --row-gap: 12px; --head: 40px; }
    .cn-tools { gap: 8px; }
    .cn-all { height: 26px; padding: 0 12px; font-size: 11px; }
    .cn-step { display: none; }
    .cn-pos { font-size: 12px; min-width: 0; }
    .cn-card__badge { height: 12px; }
}
@media (max-width: 767.98px) {
    .cn-view__btn { width: 30px; height: 26px; }
    .cn-person__avatar { width: 28px; height: 28px; }
    .cn-person__name { font-size: 12px; }
}
@media (max-width: 420px) {
    .cn-pos { display: none; }
}
/* the copied site footer: the 280 px "Contact us" button overflows its column at 992–1365 px
   (the same in front/public/css/site-chrome.css; docs/backlog.md) */
@media (min-width: 992px) and (max-width: 1365.98px) {
    #site-footer .site-footer__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: 3%; }
    #site-footer .site-footer__contact { min-width: 0; width: 100%; padding-inline: 12px; font-size: 16px; }
    #site-footer .site-footer__socials { flex-wrap: wrap; justify-content: center; }
}


/* ══ Like / Favourite (top right) and the style number (top left, after a 3 s hold) ═════════ */
.cn-acts { position: absolute; top: 8px; right: 8px; z-index: 5; display: flex; gap: 6px; }
.cn-act {
    display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
    background: rgb(18 18 20 / 0.42); color: rgb(255 255 255 / 0.92); cursor: pointer;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14); transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.cn-act:hover { background: rgb(18 18 20 / 0.66); transform: scale(1.06); }
.cn-act:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.cn-act--like[aria-pressed="true"] { color: #ff5a6e; --fill: #ff5a6e; }
.cn-act--fav[aria-pressed="true"] { color: #ffb500; --fill: #ffb500; }
.cn-act.is-pop svg { animation: cn-pop 0.4s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes cn-pop { 0% { transform: scale(0.6); } 100% { transform: scale(1); } }

.cn-fxno {
    position: absolute; top: 8px; left: 8px; z-index: 5; display: grid; place-items: center;
    width: 38px; height: 38px; border-radius: 50%; pointer-events: none;
    background: #ffb500; color: #18171a; font: 800 15px/1 "Lato", sans-serif; font-variant-numeric: tabular-nums;
    box-shadow: 0 6px 16px -4px rgb(0 0 0 / 0.6); opacity: 0; transform: scale(0.6); transition: opacity 0.25s ease, transform 0.3s cubic-bezier(.3, 1.5, .5, 1);
}
/* while holding: a thin ring fills up over the 3 s; then the number pops in */
.cn-card::before {
    content: ""; position: absolute; top: 12px; left: 12px; z-index: 5; width: 30px; height: 30px; border-radius: 50%; pointer-events: none;
    background: conic-gradient(rgb(255 181 0 / 0.95) calc(var(--hold, 0) * 1turn), rgb(255 255 255 / 0.16) 0);
    -webkit-mask: radial-gradient(circle, transparent 11px, #000 12px); mask: radial-gradient(circle, transparent 11px, #000 12px);
    opacity: 0; transition: opacity 0.2s ease;
}
@property --hold { syntax: "<number>"; inherits: false; initial-value: 0; }
.cn-card.is-holding::before { opacity: 1; animation: cn-hold 3s linear forwards; }
@keyframes cn-hold { from { --hold: 0; } to { --hold: 1; } }
.cn-card.is-held .cn-fxno { opacity: 1; transform: none; }
@media (max-width: 767.98px) {
    .cn-acts { top: 6px; right: 6px; gap: 4px; }
    .cn-act { width: 28px; height: 28px; }
}

/* ══ the 100 styles: one per picture, numbered (docs/demo49.md lists them) ══════════════════════
   Each sets the frame (.cn-card__frame.fx-N): its band (--pad / --in-r), shadows, overlays on
   ::before / ::after, or a filter on the picture. */
@property --fx-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.cn-card__frame::before, .cn-card__frame::after { content: none; position: absolute; inset: var(--pad, 0px); z-index: 1; border-radius: var(--in-r, 0); pointer-events: none; }

/* 1 Hairline — a thin white line inside the edge */
.fx-1::after { content: ""; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.4); }
/* 2 Gilded — gold gradient band, dark inner hair, warm glow; the gold turns on hover */
.fx-2 { --pad: 3px; --in-r: 8px; background: linear-gradient(var(--fx-a), #fbe9b0, #c9993f 22%, #fff6d8 45%, #a87a2a 62%, #e9c56c 82%, #8d6420); box-shadow: 0 0 0 1px rgb(0 0 0 / 0.6), 0 14px 30px -16px rgb(233 190 98 / 0.6); transition: --fx-a 1.4s ease; --fx-a: 135deg; }
.cn-card:hover .fx-2 { --fx-a: 315deg; }
.fx-2::after { content: ""; box-shadow: inset 0 0 0 1px rgb(20 16 8 / 0.85); }
/* 3 Matted — dark passe-partout with a silver hairline round the picture */
.fx-3 { --pad: 8px; --in-r: 3px; background: #26252a; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); }
.fx-3::after { content: ""; box-shadow: inset 0 0 0 1px rgb(214 220 228 / 0.6); }
/* 4 DEPO ring — green gradient band */
.fx-4 { --pad: 2px; --in-r: 9px; background: linear-gradient(160deg, #8dfaa8, #469a58 45%, #18341e); }
.cn-card:hover .fx-4 { box-shadow: 0 0 0 4px rgb(83 245 126 / 0.14), 0 16px 34px -14px rgb(83 245 126 / 0.5); }
/* 5 Double line — two white lines with a gap */
.fx-5 { --pad: 6px; --in-r: 5px; background: #18171a; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.55); }
.fx-5::after { content: ""; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.55); }
/* 6 Offset block — a green block shadow down-right */
.fx-6 { box-shadow: 7px 7px 0 #469a58; }
.cn-card:hover .fx-6 { box-shadow: 10px 10px 0 #53f57e; }
/* 7 Neon — green line and glow */
.fx-7 { box-shadow: 0 0 0 2px #53f57e, 0 0 22px rgb(83 245 126 / 0.55); }
/* 8 Turning border — DEPO green / yellow sweep runs round the edge */
.fx-8 { --pad: 3px; --in-r: 8px; background: conic-gradient(from var(--fx-a), #53f57e, #18341e 25%, #ffb500 50%, #18341e 75%, #53f57e); animation: fx-turn 6s linear infinite; }
@keyframes fx-turn { to { --fx-a: 360deg; } }
/* 9 Corner brackets — yellow L-marks in two corners */
.fx-9::before, .fx-9::after { content: ""; inset: auto; width: 28%; height: 22%; border: 2px solid #ffb500; border-radius: 0; }
.fx-9::before { left: 10px; bottom: 10px; border-width: 0 0 2px 2px; }
.fx-9::after { right: 10px; top: 46px; border-width: 2px 2px 0 0; }
/* 10 Black & white → colour on hover */
.fx-10 .cn-card__img { filter: grayscale(1) contrast(1.05); }
.cn-card:hover .fx-10 .cn-card__img { filter: none; }
/* 11 Green duotone */
.fx-11 .cn-card__img { filter: grayscale(1) contrast(1.1) brightness(0.95); }
.fx-11::before { content: ""; background: linear-gradient(160deg, #53f57e, #0f2a17); mix-blend-mode: multiply; opacity: 0.85; }
.cn-card:hover .fx-11::before { opacity: 0.35; }
/* 12 Warm sepia with a vignette */
.fx-12 .cn-card__img { filter: sepia(0.55) saturate(1.2) contrast(1.05); }
.fx-12::before { content: ""; background: radial-gradient(ellipse at center, transparent 55%, rgb(40 20 5 / 0.55)); }
/* 13 Deep vignette */
.fx-13::before { content: ""; background: radial-gradient(ellipse 70% 60% at 50% 42%, transparent 40%, rgb(0 0 0 / 0.75)); }
/* 14 Film grain */
.fx-14::before { content: ""; opacity: 0.22; mix-blend-mode: overlay; background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.fx-14 .cn-card__img { filter: contrast(1.1) saturate(0.85); }
/* 15 Scanlines */
.fx-15::before { content: ""; background: repeating-linear-gradient(0deg, rgb(0 0 0 / 0.28) 0 1px, transparent 1px 3px); }
/* 16 Sheen — a light band crosses on hover */
.fx-16::before { content: ""; background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / 0.32) 48%, transparent 62%) -160% 0 / 250% 100% no-repeat; transition: background-position 1.1s ease; }
.cn-card:hover .fx-16::before { background-position: 160% 0; }
/* 17 Glass — a reflection over the top-left */
.fx-17::before { content: ""; background: linear-gradient(135deg, rgb(255 255 255 / 0.28), rgb(255 255 255 / 0.04) 38%, transparent 40%); }
.fx-17 { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.25); }
/* 18 Bevel — raised edge, light top-left, dark bottom-right */
.fx-18::after { content: ""; box-shadow: inset 3px 3px 0 rgb(255 255 255 / 0.28), inset -3px -3px 0 rgb(0 0 0 / 0.45); }
/* 19 Chromatic — red / cyan fringes */
.fx-19 .cn-card__img { filter: drop-shadow(-3px 0 0 rgb(255 0 80 / 0.55)) drop-shadow(3px 0 0 rgb(0 220 255 / 0.5)); }
/* 20 Halftone dots */
.fx-20::before { content: ""; background: radial-gradient(circle, rgb(0 0 0 / 0.55) 1.1px, transparent 1.6px) 0 0 / 6px 6px; mix-blend-mode: multiply; }
/* 21 Slow zoom — Ken Burns on hover */
.cn-card:hover .fx-21 .cn-card__img { transform: scale(1.14) translate(-2%, -2%); transition: transform 6s ease-out; }
/* 22 Tilt — leans back in 3D on hover */
.fx-22 { transition: transform 0.6s cubic-bezier(.2, .7, .2, 1), box-shadow 0.6s ease; }
.cn-card:hover .fx-22 { transform: perspective(900px) rotateX(5deg) rotateY(-8deg); box-shadow: 14px 18px 30px -12px rgb(0 0 0 / 0.8); }
/* 23 Cut corners — two corners clipped off */
.fx-23 { border-radius: 0; clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px); }
/* 24 Soft round — big corners and a deep soft shadow */
.fx-24 { border-radius: 26px; box-shadow: 0 22px 40px -20px rgb(0 0 0 / 0.95); }
/* 25 Arch — round top */
.fx-25 { border-radius: 999px 999px 10px 10px / 34% 34% 10px 10px; }
/* 26 Dashed yellow outline at a distance */
.fx-26 { outline: 1px dashed rgb(255 181 0 / 0.85); outline-offset: 5px; }
/* 27 Stack — two sheets peeking behind */
.fx-27 { overflow: visible; }
.fx-27 .cn-card__img, .fx-27 .cn-card__shade { border-radius: 10px; }
.fx-27 { box-shadow: 6px -6px 0 -1px #3a393f, 12px -12px 0 -2px #2a292e; }
/* 28 Sunrise band — yellow → green gradient border */
.fx-28 { --pad: 2px; --in-r: 9px; background: linear-gradient(135deg, #ffb500, #53f57e); }
/* 29 Inner glow — green light from the edge */
.fx-29::after { content: ""; box-shadow: inset 0 0 46px rgb(83 245 126 / 0.45); }
/* 30 Colour pop — rich saturation and contrast */
.fx-30 .cn-card__img { filter: saturate(1.45) contrast(1.12); }
/* 31 Soft edges — the picture melts into the page */
.fx-31 { background: transparent; }
.fx-31 .cn-card__img { -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 45%, #000 58%, transparent 100%); mask-image: radial-gradient(ellipse 72% 70% at 50% 45%, #000 58%, transparent 100%); }
/* 32 Drawn line — a white line draws itself round the picture on hover */
.fx-32::after { content: ""; inset: 6px; border: 1px solid rgb(255 255 255 / 0.85); border-radius: 6px; clip-path: inset(0 100% 100% 0); transition: clip-path 0.9s ease; }
.cn-card:hover .fx-32::after { clip-path: inset(0 0 0 0); }
/* 33 Pulse — a green glow breathes on hover */
.cn-card:hover .fx-33 { animation: fx-pulse 1.6s ease-in-out infinite; }
@keyframes fx-pulse { 0%, 100% { box-shadow: 0 0 0 1px rgb(83 245 126 / 0.5), 0 0 0 rgb(83 245 126 / 0); } 50% { box-shadow: 0 0 0 1px rgb(83 245 126 / 0.9), 0 0 30px rgb(83 245 126 / 0.55); } }
.fx-33 { box-shadow: 0 0 0 1px rgb(83 245 126 / 0.35); }
/* 34 Glow bar — a light bar along the bottom edge */
.fx-34::after { content: ""; inset: auto 12% 0; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, #53f57e, #ffb500, transparent); box-shadow: 0 0 14px #53f57e; }
/* 35 Cinema — letterbox bars */
.fx-35::before { content: ""; background: linear-gradient(#000 0 9%, transparent 9% 91%, #000 91%); }
/* 36 Frosted mount — a frosted-glass band of the picture's own colours */
.fx-36 { --pad: 7px; --in-r: 4px; background: rgb(255 255 255 / 0.1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.22), 0 12px 28px -16px rgb(0 0 0 / 0.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* 37 White mount — a wide white border */
.fx-37 { --pad: 9px; --in-r: 3px; background: #f4f1ea; }
/* 38 Black mount — a wide black border with a hair of grey */
.fx-38 { --pad: 9px; --in-r: 3px; background: #050505; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12); }
/* 39 Yellow hairline */
.fx-39::after { content: ""; box-shadow: inset 0 0 0 1.5px #ffb500; }
/* 40 Green dashed line inside */
.fx-40::after { content: ""; inset: 7px; border: 1.5px dashed rgb(83 245 126 / 0.85); border-radius: 6px; }
/* 41 Dotted white line inside */
.fx-41::after { content: ""; inset: 7px; border: 2px dotted rgb(255 255 255 / 0.7); border-radius: 6px; }
/* 42 Gold double line */
.fx-42 { --pad: 5px; --in-r: 6px; background: #18171a; box-shadow: inset 0 0 0 1.5px #d9b25a; }
.fx-42::after { content: ""; box-shadow: inset 0 0 0 1px #d9b25a; }
/* 43 Dark edges — a deep inner shadow */
.fx-43::after { content: ""; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.6), inset 0 0 38px 8px rgb(0 0 0 / 0.75); }
/* 44 Long shadow — a stepped diagonal shadow */
.fx-44 { box-shadow: 1px 1px 0 #2d4d34, 2px 2px 0 #2d4d34, 3px 3px 0 #2a4630, 4px 4px 0 #27402c, 5px 5px 0 #243a29, 6px 6px 0 #213525, 7px 7px 0 #1e3022, 8px 8px 0 #1b2b1f; }
/* 45 Float — rises on hover with a shadow under it */
.fx-45 { transition: transform 0.5s cubic-bezier(.2, .7, .2, 1), box-shadow 0.5s ease; }
.cn-card:hover .fx-45 { transform: translateY(-8px); box-shadow: 0 26px 30px -18px rgb(0 0 0 / 0.95); }
/* 46 Lifted — a soft shadow lifts it off the page */
.fx-46 { box-shadow: 0 2px 0 rgb(255 255 255 / 0.05), 0 30px 40px -22px rgb(0 0 0 / 0.95), 0 0 0 1px rgb(255 255 255 / 0.06); }
/* 47 Lean left — turned a little */
.fx-47 { transform: rotate(-1.6deg); }
/* 48 Lean right */
.fx-48 { transform: rotate(1.6deg); }
/* 49 Wobble — rocks once on hover */
.cn-card:hover .fx-49 { animation: fx-wobble 0.8s ease; }
@keyframes fx-wobble { 25% { transform: rotate(-2deg); } 50% { transform: rotate(1.6deg); } 75% { transform: rotate(-0.8deg); } }
/* 50 Zoom out — starts close, steps back on hover */
.fx-50 .cn-card__img { transform: scale(1.14); }
.cn-card:hover .fx-50 .cn-card__img { transform: scale(1); }
/* 51 Pan — the picture slides up on hover */
.fx-51 .cn-card__img { object-position: 50% 0; transition: object-position 2.5s ease; }
.cn-card:hover .fx-51 .cn-card__img { object-position: 50% 100%; transform: none; }
/* 52 Focus pull — blurred, sharp on hover */
.fx-52 .cn-card__img { filter: blur(3px) brightness(0.9); transform: scale(1.04); }
.cn-card:hover .fx-52 .cn-card__img { filter: none; }
/* 53 Dimmed — dark until pointed at */
.fx-53 .cn-card__img { filter: brightness(0.5); }
.cn-card:hover .fx-53 .cn-card__img { filter: none; }
/* 54 Hue shift on hover */
.cn-card:hover .fx-54 .cn-card__img { filter: hue-rotate(50deg) saturate(1.2); }
/* 55 Cool blue tint */
.fx-55::before { content: ""; background: linear-gradient(180deg, rgb(70 130 220 / 0.45), rgb(20 40 90 / 0.45)); mix-blend-mode: soft-light; }
.fx-55 .cn-card__img { filter: saturate(0.85) brightness(1.02); }
/* 56 Golden hour — warm light */
.fx-56::before { content: ""; background: linear-gradient(200deg, rgb(255 170 60 / 0.6), rgb(255 90 40 / 0.2) 60%, transparent); mix-blend-mode: soft-light; }
/* 57 Pink haze */
.fx-57::before { content: ""; background: rgb(255 120 170 / 0.4); mix-blend-mode: soft-light; }
.fx-57 .cn-card__img { filter: brightness(1.05) contrast(0.95); }
/* 58 Teal & purple wash */
.fx-58::before { content: ""; background: linear-gradient(135deg, rgb(0 200 190 / 0.55), rgb(140 60 220 / 0.55)); mix-blend-mode: overlay; }
/* 59 Red monochrome */
.fx-59 .cn-card__img { filter: grayscale(1) contrast(1.15); }
.fx-59::before { content: ""; background: #c4202f; mix-blend-mode: multiply; opacity: 0.8; }
/* 60 Hard black & white */
.fx-60 .cn-card__img { filter: grayscale(1) contrast(1.6) brightness(1.05); }
/* 61 Faded matte */
.fx-61 .cn-card__img { filter: contrast(0.82) brightness(1.1) saturate(0.7); }
.fx-61::before { content: ""; background: rgb(255 248 235 / 0.12); }
/* 62 Cross process */
.fx-62 .cn-card__img { filter: sepia(0.35) hue-rotate(-25deg) saturate(1.6) contrast(1.15); }
/* 63 Lomo — saturated with dark corners */
.fx-63 .cn-card__img { filter: saturate(1.5) contrast(1.2); }
.fx-63::before { content: ""; background: radial-gradient(ellipse at center, transparent 45%, rgb(0 0 0 / 0.7) 100%); }
/* 64 Light leak — warm flare in a corner */
.fx-64::before { content: ""; background: radial-gradient(circle at 92% 8%, rgb(255 160 60 / 0.75), rgb(255 60 80 / 0.25) 30%, transparent 55%); mix-blend-mode: screen; }
/* 65 Bokeh — soft out-of-focus lights */
.fx-65::before { content: ""; mix-blend-mode: screen; background: radial-gradient(circle at 18% 22%, rgb(255 230 160 / 0.35) 0 6%, transparent 7%), radial-gradient(circle at 78% 30%, rgb(160 255 200 / 0.3) 0 4%, transparent 5%), radial-gradient(circle at 64% 70%, rgb(255 200 230 / 0.3) 0 7%, transparent 8%), radial-gradient(circle at 30% 82%, rgb(255 255 255 / 0.25) 0 3%, transparent 4%); filter: blur(2px); }
/* 66 Pinstripes — fine diagonal lines */
.fx-66::before { content: ""; background: repeating-linear-gradient(45deg, rgb(255 255 255 / 0.08) 0 1px, transparent 1px 7px); }
/* 67 Thirds — rule-of-thirds guides */
.fx-67::before { content: ""; background: linear-gradient(90deg, transparent calc(33.3% - 0.5px), rgb(255 255 255 / 0.35) 0 calc(33.3% + 0.5px), transparent 0 calc(66.6% - 0.5px), rgb(255 255 255 / 0.35) 0 calc(66.6% + 0.5px), transparent 0), linear-gradient(180deg, transparent calc(33.3% - 0.5px), rgb(255 255 255 / 0.35) 0 calc(33.3% + 0.5px), transparent 0 calc(66.6% - 0.5px), rgb(255 255 255 / 0.35) 0 calc(66.6% + 0.5px), transparent 0); }
/* 68 Viewfinder — four corner marks and a centre cross */
.fx-68::before { content: ""; inset: 10px; background:
    linear-gradient(#fff, #fff) 0 0 / 18px 1.5px, linear-gradient(#fff, #fff) 0 0 / 1.5px 18px,
    linear-gradient(#fff, #fff) 100% 0 / 18px 1.5px, linear-gradient(#fff, #fff) 100% 0 / 1.5px 18px,
    linear-gradient(#fff, #fff) 0 100% / 18px 1.5px, linear-gradient(#fff, #fff) 0 100% / 1.5px 18px,
    linear-gradient(#fff, #fff) 100% 100% / 18px 1.5px, linear-gradient(#fff, #fff) 100% 100% / 1.5px 18px,
    linear-gradient(#fff, #fff) 50% 50% / 14px 1px, linear-gradient(#fff, #fff) 50% 50% / 1px 14px; background-repeat: no-repeat; opacity: 0.8; }
/* 69 Oval */
.fx-69 { border-radius: 50%; }
/* 70 Hexagon */
.fx-70 { border-radius: 0; clip-path: polygon(50% 0, 100% 18%, 100% 82%, 50% 100%, 0 82%, 0 18%); }
/* 71 Ticket — round notches in both sides */
.fx-71 { -webkit-mask: radial-gradient(circle 12px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 12px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat; mask: radial-gradient(circle 12px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 12px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat; }
/* 72 Zigzag — a serrated bottom edge */
.fx-72 { border-radius: 10px 10px 0 0; clip-path: polygon(0 0, 100% 0, 100% 97%, 95% 100%, 90% 97%, 85% 100%, 80% 97%, 75% 100%, 70% 97%, 65% 100%, 60% 97%, 55% 100%, 50% 97%, 45% 100%, 40% 97%, 35% 100%, 30% 97%, 25% 100%, 20% 97%, 15% 100%, 10% 97%, 5% 100%, 0 97%); }
/* 73 Chamfer — all four corners cut */
.fx-73 { border-radius: 0; clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px); }
/* 74 Slant — a leaning parallelogram */
.fx-74 { border-radius: 0; clip-path: polygon(7% 0, 100% 0, 93% 100%, 0 100%); }
/* 75 Torn — a ragged top edge */
.fx-75 { border-radius: 0 0 10px 10px; clip-path: polygon(0 3%, 6% 1%, 12% 3.5%, 19% 0.5%, 26% 2.5%, 33% 0, 41% 3%, 48% 1%, 56% 3.5%, 63% 0.5%, 71% 2.5%, 78% 0, 86% 3%, 93% 1%, 100% 2.5%, 100% 100%, 0 100%); }
/* 76 Leaf — one big rounded corner */
.fx-76 { border-radius: 46px 6px 46px 6px; }
/* 77 Inner window — a mount with a round-cornered opening */
.fx-77 { --pad: 10px; --in-r: 22px; background: #2b2a30; }
/* 78 Pink neon */
.fx-78 { box-shadow: 0 0 0 2px #ff4fa3, 0 0 22px rgb(255 79 163 / 0.6); }
/* 79 Yellow neon */
.fx-79 { box-shadow: 0 0 0 2px #ffd23c, 0 0 22px rgb(255 210 60 / 0.55); }
/* 80 Rainbow border — the full spectrum turning */
.fx-80 { --pad: 3px; --in-r: 8px; background: conic-gradient(from var(--fx-a), #ff5a6e, #ffb500, #53f57e, #3ad1ff, #9b6bff, #ff5a6e); animation: fx-turn 5s linear infinite; }
/* 81 Shimmer border — a light runs along a silver band */
.fx-81 { --pad: 2px; --in-r: 9px; background: linear-gradient(110deg, #6d6d73 0%, #6d6d73 40%, #f4f4f8 50%, #6d6d73 60%, #6d6d73 100%) 0 0 / 300% 100%; animation: fx-shimmer 3.2s linear infinite; }
@keyframes fx-shimmer { from { background-position: 100% 0; } to { background-position: -200% 0; } }
/* 82 White halo on hover */
.cn-card:hover .fx-82 { box-shadow: 0 0 0 1px rgb(255 255 255 / 0.7), 0 0 34px rgb(255 255 255 / 0.35); }
/* 83 Spotlight — a pool of light in the middle */
.fx-83::before { content: ""; background: radial-gradient(ellipse 55% 45% at 50% 40%, rgb(255 255 255 / 0.16), transparent 70%), radial-gradient(ellipse at center, transparent 50%, rgb(0 0 0 / 0.55)); }
/* 84 Side shade — dark from the left */
.fx-84::before { content: ""; background: linear-gradient(90deg, rgb(0 0 0 / 0.65), transparent 55%); }
/* 85 Top shade — dark from the top */
.fx-85::before { content: ""; background: linear-gradient(180deg, rgb(0 0 0 / 0.7), transparent 40%); }
/* 86 Green echo — a green shadow up-left */
.fx-86 { box-shadow: -7px -7px 0 rgb(83 245 126 / 0.55); }
/* 87 Double echo — yellow and green offsets */
.fx-87 { box-shadow: 6px 6px 0 #ffb500, 12px 12px 0 #469a58; }
/* 88 Inset line — a white line inside the edge */
.fx-88 { outline: 1.5px solid rgb(255 255 255 / 0.8); outline-offset: -9px; }
/* 89 Breathing line — an inner line that swells on hover */
.fx-89::after { content: ""; box-shadow: inset 0 0 0 2px rgb(83 245 126 / 0.6); transition: box-shadow 0.5s ease; }
.cn-card:hover .fx-89::after { box-shadow: inset 0 0 0 7px rgb(83 245 126 / 0.45); }
/* 90 Glass caption — a frosted band behind the caption */
.fx-90::after { content: ""; inset: auto 0 0; height: 22%; border-radius: 0; background: rgb(20 20 24 / 0.28); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.2); }
/* 91 Half & half — the left half black and white */
.fx-91::after { content: ""; inset: 0 50% 0 0; border-radius: 0; -webkit-backdrop-filter: grayscale(1); backdrop-filter: grayscale(1); box-shadow: 1px 0 0 rgb(255 255 255 / 0.4); }
/* 92 Frosted foot — the lower third blurred */
.fx-92::after { content: ""; inset: 66% 0 0; border-radius: 0; -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%); mask-image: linear-gradient(180deg, transparent, #000 40%); }
/* 93 Poster — flattened, punchy colour */
.fx-93 .cn-card__img { filter: contrast(1.8) saturate(1.8) brightness(0.95); }
/* 94 Emboss — deep light-and-dark relief round the edge */
.fx-94::after { content: ""; box-shadow: inset 6px 6px 10px rgb(255 255 255 / 0.18), inset -6px -6px 12px rgb(0 0 0 / 0.6); }
/* 95 Green rim — a wide translucent green edge */
.fx-95::after { content: ""; box-shadow: inset 0 0 0 7px rgb(70 154 88 / 0.55); }
/* 96 Sway — drifts side to side on hover */
.cn-card:hover .fx-96 .cn-card__img { animation: fx-sway 3s ease-in-out infinite; }
@keyframes fx-sway { 0%, 100% { transform: scale(1.08) translateX(-2%); } 50% { transform: scale(1.08) translateX(2%); } }
/* 97 Heartbeat — beats on hover */
.cn-card:hover .fx-97 { animation: fx-beat 1.1s ease-in-out infinite; }
@keyframes fx-beat { 0%, 40%, 100% { transform: scale(1); } 15% { transform: scale(1.03); } 28% { transform: scale(0.99); } }
/* 98 Glitch — jumps and splits colour on hover */
.cn-card:hover .fx-98 .cn-card__img { animation: fx-glitch 0.9s steps(2) infinite; }
@keyframes fx-glitch { 0% { transform: translate(0); filter: none; } 20% { transform: translate(-3px, 1px); filter: drop-shadow(3px 0 0 rgb(255 0 80 / 0.7)) drop-shadow(-3px 0 0 rgb(0 220 255 / 0.7)); } 40% { transform: translate(2px, -1px); } 60% { transform: translate(-1px, 2px); filter: hue-rotate(40deg); } 80% { transform: translate(3px, 0); } 100% { transform: translate(0); } }
/* 99 Colour cycle — the hues turn on hover */
.cn-card:hover .fx-99 .cn-card__img { animation: fx-hue 4s linear infinite; }
@keyframes fx-hue { to { filter: hue-rotate(360deg); } }
/* 100 Gold & matte — a gold band round a dark mount */
.fx-100 { --pad: 10px; --in-r: 3px; background: linear-gradient(#26252a, #26252a) padding-box, linear-gradient(135deg, #fbe9b0, #c9993f 30%, #fff6d8 50%, #a87a2a 70%, #e9c56c) border-box; border: 3px solid transparent; }
.fx-100::after { content: ""; box-shadow: inset 0 0 0 1px rgb(214 190 120 / 0.7); }

@media (prefers-reduced-motion: reduce) {
    .page-banner__slide, .cn-card__img, .fx-2, .fx-16::before, .fx-22, .fx-32::after { transition: none; }
    .fx-8, .fx-80, .fx-81, .cn-card:hover .fx-33, .cn-card:hover .fx-49, .cn-card:hover .fx-96 .cn-card__img, .cn-card:hover .fx-97, .cn-card:hover .fx-98 .cn-card__img, .cn-card:hover .fx-99 .cn-card__img, .cn-card.is-holding::before { animation: none; }
}

/* ══ the "Gallery" block in the site menu: layout (rows / grid) and effects ══════════════════ */
#site-header .cn-hview { --green: #469a58; --muted: rgb(255 255 255 / 0.7); --pill: rgb(255 255 255 / 0.2); display: flex; align-items: center; gap: 10px; margin-right: 18px; }
.cn-hview__label { color: rgb(255 255 255 / 0.5); font: 400 14px/1 "Lato", sans-serif; }
.cn-hview__fx select {
    height: 32px; max-width: 190px; padding: 0 30px 0 14px; border: 0; border-radius: 50px;
    background: rgb(255 255 255 / 0.2) url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center;
    color: rgb(255 255 255 / 0.85); font: 700 13px/1 "Lato", sans-serif; text-transform: uppercase; cursor: pointer; appearance: none;
}
.cn-hview__fx select:hover { color: #fff; }
.cn-hview__fx select:focus-visible { outline: 2px solid var(--green, #469a58); outline-offset: 2px; }
.cn-hview__fx option, .cn-hview__fx optgroup { background: #232227; color: #fff; text-transform: none; }
@media (max-width: 1365.98px) { .cn-hview__label { display: none; } }
@media (max-width: 1199px) {
    /* in the burger panel: a row of its own */
    #site-header .cn-hview { margin: 0; padding: 6px 0; }
    .cn-hview__label { display: inline; }
}