/* Vendellek*PL: prototyp 2026 */

:root {
  --bg: #f7f5f0;
  --surface: #ffffff;
  --ink: #1d2721;
  --muted: #5f6b63;
  --line: #e6e1d7;
  --forest: #2e5a44;
  --forest-soft: #e5eee8;
  --amber: #a8712a;
  --amber-soft: #f5ead9;
  --rose-soft: #f3e4e1;
  --slate-soft: #e7eaee;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(29, 39, 33, .06), 0 8px 24px rgba(29, 39, 33, .06);
  --font-head: "Playfair Display", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-logo: "Kaushan Script", cursive;
  --wrap: 1160px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.65 var(--font-body);
}

img { max-width: 100%; height: auto; display: block; }

figure { margin: 0; }

a { color: var(--forest); text-underline-offset: 3px; }

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0;
  margin: 0 0 .5em;
}

h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1em; }

.wrap { width: min(100% - 32px, var(--wrap)); margin-inline: auto; }

.eyebrow {
  display: inline-block;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--forest);
  margin-bottom: .8rem;
}

.lead { font-size: 1.15rem; color: var(--muted); max-width: 60ch; }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 245, 240, .88);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}

.site-header .wrap {
  width: min(100% - 32px, 1360px);   /* a little wider than the text: a long menu still fits the row on a wide screen */
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 68px;
}

.brand { text-decoration: none; color: var(--ink); line-height: 1.1; margin-right: auto; display: flex; align-items: center; gap: 10px; }
.brand-mark { height: 54px; width: auto; flex: none; }
.brand-name { display: block; font-family: var(--font-head); font-weight: 700; font-size: 1.45rem; letter-spacing: -.01em; color: var(--ink); }
.brand .star { color: var(--amber); }
@media (max-width: 520px) { .brand-mark { height: 44px; } .brand-name { font-size: 1.25rem; } .brand { gap: 8px; } }
.brand-tag { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

.nav { display: flex; align-items: center; gap: 2px; min-width: 0; }
@media (min-width: 1181px) { .brand { flex-shrink: 0; } }   /* the menu gives way (and folds), not the name */

.nav a {
  text-decoration: none;
  color: var(--ink);
  font-size: .92rem;
  font-weight: 500;
  padding: 7px 9px;
  border-radius: 999px;
  white-space: nowrap;           /* "Do poczytania" stays one item; a menu too long for the row becomes the burger */
}

.nav a:hover { background: var(--forest-soft); }
.nav a[aria-current="page"] { background: var(--forest); color: #fff; }

.lang {
  font-size: .8rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 10px;
}

.burger {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  padding: 0;
}

.burger span, .burger span::before, .burger span::after {
  display: block;
  width: 18px;
  height: 2px;
  margin: 0 auto;
  background: var(--ink);
  border-radius: 2px;
  position: relative;
  transition: transform .2s, background .2s;
}

.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; }
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* the burger: below 1180 px, or wider when the breeder's menu does not fit the row (.compact, set by the page's
   script after measuring the links) */
@media (max-width: 1180px) {
  .burger { display: block; }
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 12px 16px 20px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
  }
  .nav.open { display: flex; }
  .nav a { padding: 12px 14px; border-radius: var(--radius-sm); font-size: 1.05rem; }
}
.site-header.compact .burger { display: block; }
.site-header.compact .nav {
  display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px;
  padding: 12px 16px 20px; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
}
.site-header.compact .nav.open { display: flex; }
.site-header.compact .nav a { padding: 12px 14px; border-radius: var(--radius-sm); font-size: 1.05rem; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 20px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .98rem;
  text-decoration: none;
  border: 1px solid transparent;
}

.btn-primary { background: var(--forest); color: #fff; }
.btn-primary:hover { background: #244a37; }
.btn-ghost { border-color: var(--line); color: var(--ink); background: var(--surface); }
.btn-ghost:hover { border-color: var(--forest); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.6rem; }

/* ---------- Sections ---------- */

.section { padding: clamp(48px, 8vw, 96px) 0; }
.section-alt { background: var(--surface); border-block: 1px solid var(--line); }

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.section-head h2 { margin: 0; }
.section-head p { margin: 6px 0 0; color: var(--muted); }

/* ---------- Hero ---------- */

.hero { padding: clamp(32px, 6vw, 72px) 0 clamp(40px, 6vw, 72px); }

.hero .wrap {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

.hero-photo { position: relative; }
.hero-photo img { width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }

.hero-badge {
  position: absolute;
  left: -18px;
  bottom: 28px;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 12px 16px;
  box-shadow: var(--shadow);
  font-size: .85rem;
  line-height: 1.35;
  max-width: 250px;
}

.hero-badge strong { display: block; font-family: var(--font-head); font-size: 1rem; }

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  font-size: .92rem;
  color: var(--muted);
}

.facts .i { color: var(--forest); margin-right: 8px; }
.facts-bar { border-top: 1px solid var(--line); }
.facts-bar .facts { margin: 0; padding: 14px 0; justify-content: center; }

@media (max-width: 800px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero-photo { order: -1; }
  .hero-photo img { aspect-ratio: 4 / 3.4; border-radius: var(--radius); }
  .hero-badge { left: 12px; bottom: 12px; }
}

/* ---------- Cards ---------- */

.grid { display: grid; gap: 20px; }
.grid-4 { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.card-img { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; background: var(--slate-soft); }
.card-img.square { aspect-ratio: 1; object-position: center 35%; }
.card-body { padding: 14px 16px 18px; }
.card-body h3 { margin-bottom: .25em; }
.card-meta { font-size: .88rem; color: var(--muted); margin: 0; }

a.card { text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s; }
a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

/* Horizontal scroller on phones for long card rows */
@media (max-width: 640px) {
  .scroller {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 72%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    margin-inline: -16px;
    padding-inline: 16px;
    scroll-padding-inline: 16px;
  }
  .scroller > * { scroll-snap-align: start; }
}

/* ---------- Kittens CTA ---------- */

.cta {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 32px;
  background: var(--forest);
  color: #eef4f0;
  border-radius: var(--radius);
  padding: clamp(28px, 5vw, 56px);
}

.cta h2 { color: #fff; }
.cta p { color: #d5e3da; }
.cta .btn-primary { background: #fff; color: var(--forest); }
.cta .btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }

.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; align-content: center; }
.legend li { display: flex; gap: 12px; align-items: baseline; font-size: .93rem; color: #d5e3da; }
.legend .badge { flex: none; }
@media (max-width: 560px) { .legend { gap: 14px; } .legend li { flex-direction: column; align-items: flex-start; gap: 4px; } }

@media (max-width: 800px) { .cta { grid-template-columns: 1fr; } }

/* ---------- Badges ---------- */

.badge {
  display: inline-block;
  font-size: .76rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--slate-soft);
  color: #3c4650;
  white-space: nowrap;
}

.badge-available { background: #d9efdf; color: #1f6a3a; }
.badge-watch { background: var(--amber-soft); color: #83561c; }
.badge-reserved { background: var(--rose-soft); color: #8a3d33; }
.badge-stays { background: var(--forest-soft); color: var(--forest); }
.badge-home { background: var(--slate-soft); color: #3c4650; }

/* ---------- Litters page ---------- */

.page-head { padding: clamp(36px, 6vw, 72px) 0 12px; }

.chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 12px;
  scrollbar-width: thin;
}

.chips a {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  font-family: var(--font-head);
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
}

.chips a:hover { border-color: var(--forest); color: var(--forest); }

.litters { display: grid; gap: 18px; padding-bottom: 80px; }

.litter {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  scroll-margin-top: 90px;
}

.litter > summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 18px 22px;
}

.litter > summary::-webkit-details-marker { display: none; }

.litter-letter {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: var(--forest-soft);
  color: var(--forest);
  font: 600 2rem/1 var(--font-head);
}

.litter-title h2 { font-size: 1.45rem; margin: 0; }
.litter-title p { margin: 2px 0 0; color: var(--muted); font-size: .92rem; }

.chev {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  transition: transform .2s;
}

.chev::before { content: ""; width: 8px; height: 8px; border: solid var(--ink); border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); }
.litter[open] .chev { transform: rotate(180deg); }

.litter-body { padding: 4px 22px 24px; border-top: 1px solid var(--line); }

.parents {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 18px 0;
}

.parent { display: flex; gap: 14px; align-items: center; min-width: 0; }
/* Crop 25% from the top, not the centre: on portrait photos the head sits above the middle. */
.parent img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; object-position: center 25%; flex: none; border: 3px solid var(--bg); box-shadow: 0 0 0 1px var(--line); cursor: zoom-in;
  position: relative; transform-origin: left center; transition: transform .25s ease, box-shadow .2s; }
.parent img:hover { box-shadow: 0 0 0 2px var(--forest); }
.parent img.zoomed { transform: scale(3); z-index: 20; cursor: zoom-out; border-width: 1px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .9), 0 6px 24px rgba(29, 39, 33, .35); }
.parent small { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.parent span { font-weight: 600; font-size: .95rem; line-height: 1.35; }

.kittens { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.kitten .card-body { padding: 12px 14px 16px; }
.kitten h3 { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 1.1rem; }
.sex { font-family: var(--font-body); font-size: .8rem; font-weight: 600; color: var(--muted); }
.kitten .badge { margin-top: 10px; white-space: normal; }

@media (max-width: 720px) {
  .litter > summary { gap: 14px; padding: 14px 16px; }
  .litter-letter { width: 50px; height: 50px; font-size: 1.6rem; border-radius: var(--radius); }
  .litter-title h2 { font-size: 1.2rem; }
  .litter-body { padding: 4px 16px 18px; }
  .parents { grid-template-columns: 1fr; gap: 12px; }
  .parent img { width: 60px; height: 60px; }
  .kittens { grid-template-columns: 1fr 1fr; gap: 12px; }
  .kitten h3 { font-size: 1rem; flex-wrap: wrap; }
}

/* ---------- Footer ---------- */

.site-footer { background: #1f2d25; color: #c9d6cd; padding: 56px 0 28px; font-size: .95rem; }
.site-footer a { color: #fff; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px 40px; }
/* the logo beside the breeder's name and description, not above them */
.footer-about { display: flex; gap: 22px; align-items: flex-start; }
.footer-about-text { min-width: 0; }
.footer-grid > div:first-child p { max-width: 280px; margin-bottom: 14px; }
.site-footer ul.footer-members { gap: 8px; max-width: 280px; font-size: .9rem; line-height: 1.45; }
.footer-members li { position: relative; padding-left: 16px; }
.footer-members li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: #7fae92; }
.footer-grid > div:nth-child(2), .footer-grid > div:nth-child(3) { justify-self: center; min-width: 0; }
.footer-contacts { display: grid; grid-template-columns: repeat(2, auto); gap: 20px 44px; align-items: start; }
.site-footer ul { align-content: start; }
.footer-contacts .who { color: #fff; font-weight: 600; }
.footer-contacts a { overflow-wrap: anywhere; }
.site-footer ul.footer-nav { grid-template-columns: repeat(2, auto); gap: 6px 40px; }
.site-footer h3 { color: #fff; font-size: 1.05rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.site-footer ul a { color: #c9d6cd; text-decoration: none; }
.site-footer ul a:hover { color: #fff; }
.footer-logo { flex: none; background: #f4efe4; border-radius: var(--radius); padding: 10px 14px 6px; }
.footer-logo img { display: block; height: 92px; width: auto; }
.footer-brand { font-family: var(--font-head); font-weight: 700; font-size: 1.6rem; letter-spacing: -.01em; color: #fff; margin-bottom: 6px; }
.footer-brand .star { color: #e5b96a; }
.copy { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 36px; padding-top: 20px; font-size: .82rem; color: #93a59a; }

@media (max-width: 980px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > div:nth-child(2) { grid-column: 1 / -1; grid-row: 2; } }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr; } .footer-grid > div:nth-child(2) { grid-row: auto; } .footer-grid > div:nth-child(2), .footer-grid > div:nth-child(3) { justify-self: stretch; } .footer-grid > div:first-child p { max-width: none; } }
@media (max-width: 520px) { .footer-contacts { grid-template-columns: 1fr; gap: 18px; } .site-footer ul.footer-nav { grid-template-columns: 1fr 1fr; }
  /* on a phone: a small logo in one line with the name, the description and the memberships under them at full width
     (beside a tall logo they were squeezed into half the screen) */
  .footer-about { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 14px; align-items: center; }
  .footer-about-text { display: contents; }
  .footer-about-text > :not(.footer-brand) { grid-column: 1 / -1; }
  .footer-brand { margin: 0; font-size: 1.45rem; }
  .footer-logo { padding: 6px 8px 3px; } .footer-logo img { height: 44px; }
  .footer-grid > div:first-child p { margin-bottom: 4px; }
  .site-footer ul.footer-members { max-width: none; }
  .footer-contacts ul { gap: 2px; } }

/* ---------- Hero slider ---------- */

.slider .slides {
  position: relative;
  aspect-ratio: 4 / 4.4;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #2a2f2b;
}

.slider .slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1.2s ease, transform 6s ease-out;
}

.slider .slide.is-active { opacity: 1; transform: scale(1); }

.dots {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(20, 25, 22, .35);
  backdrop-filter: blur(6px);
}

.dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  cursor: pointer;
  transition: width .3s, background .3s;
}

.dot.is-active { width: 22px; background: #fff; }
/* bigger invisible touch area than the 8px dot itself */
.dot { position: relative; }
.dot::after { content: ""; position: absolute; inset: -14px -3px; }
.hero-badge span { display: block; }

@media (max-width: 800px) {
  .slider .slides { aspect-ratio: 4 / 3.4; border-radius: var(--radius); }
  .dots { right: 12px; bottom: auto; top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .slider .slide { transition: none; transform: none; }
}
.slider .slide { border-radius: 0; box-shadow: none; aspect-ratio: auto; }
.hero-badge em {
  display: block;
  font-style: normal;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--forest);
  margin: 2px 0 3px;
}
.hero-badge { max-width: min(330px, calc(100% - 24px)); }

.litter-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.btn-sm { min-height: 38px; padding: 6px 14px; font-size: .88rem; }
@media (max-width: 720px) { .litter-links { justify-content: flex-start; } }

.kitten h3 a { color: inherit; text-decoration-color: var(--line); }
.kitten h3 a:hover { color: var(--forest); }

/* ---------- Converted content pages ---------- */

.wrap.narrow { width: min(100% - 32px, 900px); }
.prose { padding-bottom: 80px; }

.prose > * + * { margin-top: 1em; }
.prose p { margin: 0 0 1em; }
.prose h2 { margin: 1.8em 0 .6em; font-size: clamp(1.4rem, 3vw, 1.9rem); }
.prose h3 { margin: 1.5em 0 .5em; font-size: 1.25rem; }
.prose h2 a, .prose h3 a { color: inherit; }

.prose img {
  display: block;
  margin: 1.2em auto;
  border-radius: var(--radius-sm);
  max-height: 80vh;
  width: auto;
  cursor: zoom-in;
}

.prose a img { cursor: pointer; }

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
  margin: 1.2em 0;
}

.gallery img, .gallery a img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  margin: 0;
  border-radius: var(--radius-sm);
  cursor: zoom-in;
}

.gallery a { display: block; }

@media (max-width: 640px) {
  .gallery { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin: 1.2em 0;
}

.prose table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 560px; }
.prose td, .prose th { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose tr:first-child td { background: var(--forest-soft); color: var(--forest); font-weight: 600; white-space: nowrap; }
.prose th { background: var(--bg); font-family: var(--font-head); font-size: 1rem; text-align: center; padding: 12px; }
.prose tr:last-child td { border-bottom: 0; }

mark { background: none; font-weight: 600; }
mark.hl-green { color: #1f7a3d; }
mark.hl-red { color: #b3261e; }

/* ---------- Lightbox ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: rgba(15, 20, 17, .9);
  padding: 20px;
  cursor: zoom-out;
}

.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 90vh; border-radius: var(--radius-sm); }

.lb-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  color: #fff;
  font-size: 1.6rem;
  cursor: pointer;
}

.card.more { display: none; }
.more-row { text-align: center; margin: 24px 0 0; }
@media (max-width: 640px) {
  /* on phones the wins row scrolls sideways, so show all of them there */
  .scroller .card.more { display: flex; }
  .scroller ~ .more-row { display: none; }
}

.gallery-lg { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: start; }
.gallery-lg img { aspect-ratio: auto; height: auto; object-fit: contain; }
.prose a > img { max-width: 100%; }
@media (max-width: 640px) { .gallery-lg { grid-template-columns: 1fr; } }

/* ---------- Our cats ---------- */

.cats-page { padding-bottom: 80px; }
.cat-section { margin-top: 40px; }
.cat-section h2 { margin-bottom: 18px; }
.cat h3 { font-size: 1.15rem; }
.cat .card-body { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.cat .card-meta { margin: 0; }
/* a cat's photo: most are taken across, so a landscape frame keeps the face (a tall one cut it off at the side);
   a little above the middle, where the head usually is */
.cat .card-img { aspect-ratio: 4 / 3; object-position: center 30%; }
.cat-sex { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 600; letter-spacing: .02em;
  padding: 3px 10px; border-radius: 999px; background: var(--slate-soft); color: #3a4a5c; }
.cat-sex .i { width: 1.1em; height: 1.1em; vertical-align: 0; }
.cat-sex-f { background: var(--rose-soft); color: #8a3b33; }
.cat-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 6px; }
.health summary { cursor: pointer; font-size: .88rem; font-weight: 600; color: var(--forest); }
.health p { font-size: .86rem; color: var(--muted); margin: 8px 0 0; line-height: 1.55; }

/* ---------- Contact ---------- */

.contact { padding-bottom: 80px; }
.contact-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(22px, 4vw, 36px); }
.contact-card h2, .contact-card h3 { margin-bottom: .3em; }
.home-contact { padding-top: 0; padding-bottom: 40px; scroll-margin-top: 70px; }
.home-contact .contact { padding-bottom: 0; }
.home-contact .lead { margin-bottom: 22px; }
.contact-card p { color: var(--muted); }
.contact-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.prose p > a > img, .prose a > img { margin: .6em auto; }

/* ---------- Photo placeholder ---------- */

.card-img.placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #9aa79f;
  background:
    radial-gradient(circle at 50% 42%, #eef2ee 0 38%, transparent 39%),
    repeating-linear-gradient(135deg, #f1f3ef 0 12px, #e9ede8 12px 24px);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .02em;
}

.card-img.placeholder svg { width: 34%; max-width: 110px; }

/* ---------- Collapsible year / cat / litter groups (news, shows, gallery) ---------- */

.years { display: grid; gap: 12px; padding-bottom: 80px; }

.year {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  scroll-margin-top: 90px;
}

.year > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
}

.year > summary::-webkit-details-marker { display: none; }
.year-num { font: 600 1.35rem/1.2 var(--font-head); }
.year-num.cat-name { font-size: 1.1rem; }
.year-count { color: var(--muted); font-size: .9rem; margin-left: auto; white-space: nowrap; }
.year[open] .chev { transform: rotate(180deg); }
.year > .prose { padding: 4px 20px 20px; border-top: 1px solid var(--line); }

.news-item { padding: 18px 0; border-bottom: 1px solid var(--line); }
.news-item:last-child { border-bottom: 0; }
.news-item h2 { margin: 0 0 .5em; font-size: 1.3rem; }
.news-date { margin: 0 0 4px; font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--forest); }
.news-item ul { padding-left: 1.2em; }
.news-item ul > b { display: block; margin: .6em 0 .2em -1.2em; }

/* ---------- Shows ---------- */

.title-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin: 18px 0 8px; }
.title-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.title-card h3 { font-size: 1rem; margin: 0 0 6px; color: var(--forest); }
.title-card ul { list-style: none; margin: 0; padding: 0; font-size: .9rem; display: grid; gap: 2px; }
.mt { margin-top: 44px; }
/* Reading room: Hall of Fame as a featured flip-book above the articles */
.hof-feature { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 32px; align-items: center;
  background: var(--forest-soft); border-radius: var(--radius); padding: 28px 32px; margin: 8px 0 44px; scroll-margin-top: 90px; }
.hof-feature .hof-cover { gap: 0; }
.hof-feature .hof-cover img { aspect-ratio: auto; }   /* letter-size pages, not the magazines' A4 */
.hof-text h2 { margin: 6px 0 8px; font-size: clamp(1.6rem, 3vw, 2.1rem); }
.hof-text p { margin: 0; color: var(--muted); }
.hof-text .hof-meta { margin-top: 6px; font-size: .9rem; }
.hof-text .btn-row { margin-top: 1.2rem; }
@media (max-width: 640px) {
  .hof-feature { grid-template-columns: 1fr; gap: 20px; padding: 20px; }
  .hof-feature .hof-cover { max-width: 220px; margin: 0 auto; }
  .hof-text .btn { flex: 1 1 100%; justify-content: center; }
}

/* ---------- Litter show results ---------- */

.results { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px; }
.results > summary { cursor: pointer; font-weight: 600; color: var(--forest); }
.results h3 { font-size: 1.05rem; margin: 18px 0 6px; }
.results table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 560px; }
.results td, .results th { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.results tr:first-child td { background: var(--forest-soft); color: var(--forest); font-weight: 600; }
.results th { background: var(--bg); font-family: var(--font-head); text-align: center; }

.muted { color: var(--muted); font-size: .92rem; }

/* grid items must be allowed to shrink so wide tables scroll inside their frame on phones */
.years > *, .litters > *, .litter-body, .year > .prose { min-width: 0; }
.results .table-wrap, .year .table-wrap { max-width: 100%; }

/* show results on a phone: one block per show (date and place on top, class, result and judge under them),
   the title the shows led to as a band; nothing scrolls sideways */
@media (max-width: 640px) {
  .prose table.results-table { min-width: 0; }
  .results-table, .results-table tbody { display: block; }
  .results-table tr.rt-head { display: none; }
  .results-table tr { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; padding: 10px 14px;
    border-bottom: 1px solid var(--line); }
  .results-table tr:last-child { border-bottom: 0; }
  .results-table td { display: block; padding: 1px 0; border: 0; overflow-wrap: anywhere; grid-column: 1 / -1; }
  .results-table td:empty { display: none; }
  .results-table td.rt-date { grid-column: 1; font-weight: 600; color: var(--forest); white-space: nowrap; }
  .results-table td.rt-place { grid-column: 2; font-weight: 600; }
  .results-table td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-size: .85rem; }
  .results-table tr.rt-stage { display: block; padding: 0; }
  .results-table tr.rt-stage th { display: block; padding: 10px 14px; font-size: .95rem; }
}

.prose code { display: block; white-space: pre-wrap; word-break: break-all; font-size: .82rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; }

/* ---------- Litters: letter bar pinned under the header while scrolling ---------- */

:root { --header-h: 69px; }
.chips-bar {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  background: rgba(247, 245, 240, .94);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
}
.chips-bar .chips { padding: 10px 0; }
.litter { scroll-margin-top: calc(var(--header-h) + 76px); }

/* ---------- Cats over the rainbow bridge ---------- */

.cat.deceased .card-img { filter: grayscale(1); opacity: .85; }

/* ---------- Contact form ---------- */

.contact-form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(20px, 3vw, 28px); margin-top: 14px; scroll-margin-top: 90px; }
.contact-form h2 { font-size: 1.25rem; margin: 0 0 .7em; }
.contact-form label { display: block; font-weight: 600; font-size: .86rem; margin-bottom: 10px; }
.contact-form input, .contact-form select, .contact-form textarea {
  display: block; width: 100%; margin-top: 6px; font: 400 1rem/1.4 var(--font-body); color: var(--ink);
  padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); min-height: 42px; }
.contact-form textarea { resize: vertical; min-height: 96px; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: 2px solid var(--forest); outline-offset: 1px; background: #fff; }
.cf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.cf-rodo { font-size: .76rem; color: var(--muted); line-height: 1.45; margin: 4px 0 12px; }
.cf-status:empty { display: none; }
.cf-status { padding: 12px 14px; border-radius: var(--radius-sm); margin: 4px 0 16px; font-size: .95rem; }
.cf-status.ok { background: #d9efdf; color: #1f4d30; }
.cf-status.err { background: #f8e1de; color: #7a221b; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 640px) { .cf-grid { grid-template-columns: 1fr; } }

/* ---------- Reading room (flip-book) ---------- */

.reading { padding-bottom: 80px; scroll-margin-top: 90px; }
.mag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 22px; margin-top: 20px; }
.mag { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--ink); }
.mag img { width: 100%; height: auto; aspect-ratio: 1100 / 1556; object-fit: cover; border-radius: 6px 12px 12px 6px;
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 10px 26px rgba(29,39,33,.16), inset 6px 0 10px rgba(0,0,0,.08); transition: transform .2s, box-shadow .2s; }
.mag:hover img { transform: translateY(-4px) rotate(-.6deg); box-shadow: 0 2px 4px rgba(0,0,0,.14), 0 16px 34px rgba(29,39,33,.22); }
.mag-title { font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; line-height: 1.25; margin-top: 6px; }
.mag-sub { font-size: .85rem; color: var(--muted); }
@media (max-width: 640px) { .mag-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
.ws-h { margin-top: 48px; scroll-margin-top: 90px; }
.mag-grid-sm { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 18px; }
.mag-sm .mag-title { font-size: 1.15rem; margin-top: 2px; }
.mag-sm .mag-sub { font-size: .8rem; line-height: 1.35; }
@media (max-width: 640px) { .mag-grid-sm { grid-template-columns: repeat(3, 1fr); gap: 12px; } .mag-sm .mag-sub { font-size: .78rem; } }

.reader { position: fixed; inset: 0; z-index: 200; background: #1d2320; display: flex; flex-direction: column; }
.reader[hidden] { display: none; }
.reader-bar { display: flex; align-items: center; gap: 14px; padding: 10px 16px; color: #e8efe9; font-size: .92rem; }
.reader-title { margin-right: auto; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reader-count { opacity: .8; white-space: nowrap; }
.reader-pdf { color: #e8efe9; }
.reader-close { width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 1.6rem; cursor: pointer; flex: none; }
.reader-stage { flex: 1; display: grid; place-items: center; padding: 8px 56px 20px; min-height: 0; }
.reader-book { display: grid; place-items: center; }
.reader-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 64px; border: 0; border-radius: var(--radius-sm);
  background: rgba(255,255,255,.12); color: #fff; font-size: 2rem; cursor: pointer; }
.reader-nav.prev { left: 6px; }
.reader-nav.next { right: 6px; }
@media (max-width: 640px) {
  .reader-stage { padding: 4px 4px 12px; }
  .reader-nav { top: auto; bottom: 10px; transform: none; width: 52px; height: 44px; }
  .reader-pdf { display: none; }
}
.reader-book .stf__parent, .reader-book .stf__wrapper, .reader-book .stf__block { background: transparent !important; }
.reader-book .stf__item { background: #fff; }
.mag-page { background: #fff; overflow: hidden; }
.mag-page img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* ---------- World Winners: highlighted block on the home page ---------- */

.ww-block {
  --gold: #b8892b;
  background: linear-gradient(135deg, #fbf5e6 0%, #fffdf8 60%);
  border: 1px solid #ead9b0;
  border-radius: var(--radius);
  padding: clamp(20px, 4vw, 36px);
  margin-bottom: 36px;
}
.ww-head { max-width: 680px; margin-bottom: 22px; }
.ww-head h3 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 8px 0 6px; }
.ww-head p { color: var(--muted); margin: 0; }
.ww-badge { display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: var(--gold); border-radius: 999px; padding: 4px 12px; }
.ww-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ww-card { margin: 0; background: var(--surface); border-radius: var(--radius); overflow: hidden; border: 1px solid #ead9b0;
  box-shadow: 0 10px 26px rgba(120, 90, 30, .12); display: flex; flex-direction: column; }
.ww-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 25%; background: #efe6d2; }
.ww-card figcaption { padding: 14px 16px 18px; display: grid; gap: 2px; }
.ww-year { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.ww-card b { font-family: var(--font-head); font-size: 1.2rem; font-weight: 600; }
.wins-sub { font-size: 1.15rem; margin: 0 0 16px; color: var(--muted); font-family: var(--font-body); font-weight: 600; }
@media (max-width: 800px) { .ww-grid { grid-template-columns: 1fr; } .ww-card img { aspect-ratio: 16 / 10; } }

/* World Winner strip on the shows page */
.ww-strip { --gold: #b8892b; background: linear-gradient(135deg, #fbf5e6 0%, #fffdf8 70%); border: 1px solid #ead9b0;
  border-radius: var(--radius); padding: 16px 18px; margin: 18px 0 12px; }
.ww-strip ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.ww-strip li { display: grid; gap: 2px; background: var(--surface); border: 1px solid #ead9b0; border-radius: var(--radius-sm); padding: 10px 12px; }
.ww-strip li b { font-family: var(--font-head); font-weight: 600; }

/* ---------- Latest news on the home page ---------- */

.home-news + .section { padding-top: 0; }  /* news and our cats share one plain background */
.news-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.news-card {
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 20px 18px; color: var(--ink); text-decoration: none;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.news-card:hover { border-color: var(--forest); box-shadow: var(--shadow); transform: translateY(-2px); }
.news-card-date { font-size: .78rem; font-weight: 600; letter-spacing: .06em; color: var(--forest); }
.news-card h3 { margin: 0; font-size: 1.12rem; line-height: 1.3; overflow-wrap: anywhere; }
.news-card p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.5; overflow-wrap: anywhere; }
.news-card-more { margin-top: auto; padding-top: 6px; font-size: .88rem; font-weight: 600; color: var(--forest); }
.news-item { scroll-margin-top: calc(var(--header-h, 72px) + 16px); }

@media (max-width: 980px) { .news-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .news-cards { grid-template-columns: 1fr; gap: 12px; } .news-card { padding: 16px; } }

/* ---------- Kittens page: pointer to the litters and status legend ---------- */

.kitten-status-box, .info-box {
  display: flex; align-items: center; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap;
  background: var(--forest-soft); border-radius: var(--radius); padding: 22px 26px; margin-bottom: 28px;
}
.kitten-status-box > div, .info-box > div { min-width: 0; flex: 1 1 320px; }
.kitten-status-box h2, .info-box h2 { margin: 0 0 4px; font-size: 1.35rem; }
.kitten-status-box p, .info-box p { margin: 0; color: var(--muted); }
.status-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
@media (max-width: 560px) {
  .kitten-status-box, .info-box { padding: 18px; }
  .kitten-status-box .btn, .info-box .btn { width: 100%; justify-content: center; }
}

/* Kittens page: when can a kitten move to its new home (date of birth + 16 weeks) */
.home-date { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 26px; margin-bottom: 28px; }
.home-date h2 { margin: 0 0 4px; font-size: 1.35rem; }
.home-date > p { margin: 0 0 14px; color: var(--muted); }
.home-date label { display: block; font-weight: 600; margin-bottom: 6px; }
.home-date input[type="date"] { font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); min-height: 48px; max-width: 100%; box-sizing: border-box;
  /* iOS Safari: a native date field ignores width/max-width and sticks out of its box unless its look is reset */
  -webkit-appearance: none; appearance: none; min-width: 0; }
.home-date input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.home-date input[type="date"]:focus { outline: 2px solid var(--forest); outline-offset: 1px; }
.home-date-out { margin: 14px 0 0; font-size: 1.1rem; }
.home-date-out:empty { margin: 0; }
.home-date-out strong { color: var(--forest); }
@media (max-width: 560px) { .home-date { padding: 18px; } .home-date input[type="date"] { width: 100%; } }

/* ---------- Litters grouped by year ---------- */

.chips { align-items: center; }
.chip-year { flex: none; display: flex; align-items: center; gap: 6px; padding: 4px; border-radius: var(--radius); background: rgba(46, 90, 68, .06); }
.chips a.chip-y { width: auto; height: 42px; padding: 0 8px; border: 0; background: transparent; font-family: var(--font-body);
  font-size: .8rem; font-weight: 600; color: var(--forest); letter-spacing: .02em; }
.chips a.chip-y:hover { text-decoration: underline; }
.year-head { display: flex; align-items: baseline; gap: 14px; margin: 22px 0 -4px; font-size: 1.6rem;
  scroll-margin-top: calc(var(--header-h) + 100px); }
.year-head:first-child { margin-top: 0; }
.year-head small { font-family: var(--font-body); font-size: .9rem; font-weight: 500; color: var(--muted); }
@media (max-width: 720px) { .chip-year { gap: 4px; } .chips a.chip-y { padding: 0 4px; height: 38px; } .year-head { font-size: 1.35rem; } }

/* ---------- NFO Breed Council (About us: full box with logo; Skogkatt: short note) ---------- */

.bc-box { display: flex; gap: 32px; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px 32px; margin: 8px 0 64px; scroll-margin-top: 90px; }
.bc-logo { width: 140px; height: 140px; flex: none; border-radius: 50%; object-fit: cover; }
.bc-box > div { min-width: 0; max-width: 620px; }
main > section:has(+ #nfo-breed-council) { padding-bottom: 24px; margin-bottom: 0; }
.bc-box h2 { margin: 2px 0 10px; font-size: 1.35rem; }
.bc-box p { margin: 0 0 10px; }
.bc-box p:last-child { margin-bottom: 0; }
.bc-note { background: var(--forest-soft); border-radius: var(--radius); padding: 20px 24px; margin: 28px 0 48px; }
.bc-note h2 { margin: 0 0 6px; font-size: 1.2rem; }
.bc-note p { margin: 0; }
@media (max-width: 560px) { .bc-box { flex-direction: column; align-items: center; text-align: center; padding: 22px 20px; gap: 18px; } .bc-logo { width: 120px; height: 120px; } }

/* ---------- Icons (Phosphor Icons, MIT) drawn as masks, so they take the text colour ---------- */

.i { display: inline-block; width: 1.05em; height: 1.05em; flex: none; vertical-align: -.16em; background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.i-phone { --i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 256 256%22 fill=%22currentColor%22%3E%3Cpath d=%22M224%2C154.8l-47.09-21.11-.18-.08a19.94%2C19.94%2C0%2C0%2C0-19%2C1.75%2C13.08%2C13.08%2C0%2C0%2C0-1.12.84l-22.31%2C19c-13-7.05-26.43-20.37-33.49-33.21l19.06-22.66a11.76%2C11.76%2C0%2C0%2C0%2C.85-1.15%2C20%2C20%2C0%2C0%2C0%2C1.66-18.83%2C1.42%2C1.42%2C0%2C0%2C1-.08-.18L101.2%2C32A20.06%2C20.06%2C0%2C0%2C0%2C80.42%2C20.15%2C60.27%2C60.27%2C0%2C0%2C0%2C28%2C80c0%2C81.61%2C66.39%2C148%2C148%2C148a60.27%2C60.27%2C0%2C0%2C0%2C59.85-52.42A20.06%2C20.06%2C0%2C0%2C0%2C224%2C154.8ZM176%2C204A124.15%2C124.15%2C0%2C0%2C1%2C52%2C80%2C36.29%2C36.29%2C0%2C0%2C1%2C80.48%2C44.46l18.82%2C42L80.14%2C109.28a12%2C12%2C0%2C0%2C0-.86%2C1.16A20%2C20%2C0%2C0%2C0%2C78%2C130.08c9.42%2C19.28%2C28.83%2C38.56%2C48.31%2C48A20%2C20%2C0%2C0%2C0%2C146%2C176.63a11.63%2C11.63%2C0%2C0%2C0%2C1.11-.85l22.43-19.07%2C42%2C18.81A36.29%2C36.29%2C0%2C0%2C1%2C176%2C204Z%22/%3E%3C/svg%3E"); }
.i-female { --i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 256 256%22 fill=%22currentColor%22%3E%3Cpath d=%22M212%2C96a84%2C84%2C0%2C1%2C0-96%2C83.13V196H88a12%2C12%2C0%2C0%2C0%2C0%2C24h28v20a12%2C12%2C0%2C0%2C0%2C24%2C0V220h28a12%2C12%2C0%2C0%2C0%2C0-24H140V179.13A84.12%2C84.12%2C0%2C0%2C0%2C212%2C96ZM68%2C96a60%2C60%2C0%2C1%2C1%2C60%2C60A60.07%2C60.07%2C0%2C0%2C1%2C68%2C96Z%22/%3E%3C/svg%3E"); }
.i-male { --i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 256 256%22 fill=%22currentColor%22%3E%3Cpath d=%22M216%2C28H168a12%2C12%2C0%2C0%2C0%2C0%2C24h19L152.6%2C86.4a84%2C84%2C0%2C1%2C0%2C17%2C17L204%2C69V88a12%2C12%2C0%2C0%2C0%2C24%2C0V40A12%2C12%2C0%2C0%2C0%2C216%2C28ZM141.74%2C197.74a60%2C60%2C0%2C1%2C1%2C0-84.85A60.07%2C60.07%2C0%2C0%2C1%2C141.74%2C197.74Z%22/%3E%3C/svg%3E"); }
.i-mail { --i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 256 256%22 fill=%22currentColor%22%3E%3Cpath d=%22M224%2C44H32A12%2C12%2C0%2C0%2C0%2C20%2C56V192a20%2C20%2C0%2C0%2C0%2C20%2C20H216a20%2C20%2C0%2C0%2C0%2C20-20V56A12%2C12%2C0%2C0%2C0%2C224%2C44ZM193.15%2C68%2C128%2C127.72%2C62.85%2C68ZM44%2C188V83.28l75.89%2C69.57a12%2C12%2C0%2C0%2C0%2C16.22%2C0L212%2C83.28V188Z%22/%3E%3C/svg%3E"); }
.i-ext { --i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 256 256%22 fill=%22currentColor%22%3E%3Cpath d=%22M204%2C64V168a12%2C12%2C0%2C0%2C1-24%2C0V93L72.49%2C200.49a12%2C12%2C0%2C0%2C1-17-17L163%2C76H88a12%2C12%2C0%2C0%2C1%2C0-24H192A12%2C12%2C0%2C0%2C1%2C204%2C64Z%22/%3E%3C/svg%3E"); }
.i-arrow { --i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 256 256%22 fill=%22currentColor%22%3E%3Cpath d=%22M224.49%2C136.49l-72%2C72a12%2C12%2C0%2C0%2C1-17-17L187%2C140H40a12%2C12%2C0%2C0%2C1%2C0-24H187L135.51%2C64.48a12%2C12%2C0%2C0%2C1%2C17-17l72%2C72A12%2C12%2C0%2C0%2C1%2C224.49%2C136.49Z%22/%3E%3C/svg%3E"); }
.i-x { --i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 256 256%22 fill=%22currentColor%22%3E%3Cpath d=%22M208.49%2C191.51a12%2C12%2C0%2C0%2C1-17%2C17L128%2C145%2C64.49%2C208.49a12%2C12%2C0%2C0%2C1-17-17L111%2C128%2C47.51%2C64.49a12%2C12%2C0%2C0%2C1%2C17-17L128%2C111l63.51-63.52a12%2C12%2C0%2C0%2C1%2C17%2C17L145%2C128Z%22/%3E%3C/svg%3E"); }
.i-check { --i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 256 256%22 fill=%22currentColor%22%3E%3Cpath d=%22M232.49%2C80.49l-128%2C128a12%2C12%2C0%2C0%2C1-17%2C0l-56-56a12%2C12%2C0%2C1%2C1%2C17-17L96%2C183%2C215.51%2C63.51a12%2C12%2C0%2C0%2C1%2C17%2C17Z%22/%3E%3C/svg%3E"); }
.i-facebook { --i: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 256 256%22 fill=%22currentColor%22%3E%3Cpath d=%22M128%2C20A108%2C108%2C0%2C1%2C0%2C236%2C128%2C108.12%2C108.12%2C0%2C0%2C0%2C128%2C20Zm12%2C191.13V156h20a12%2C12%2C0%2C0%2C0%2C0-24H140V112a12%2C12%2C0%2C0%2C1%2C12-12h16a12%2C12%2C0%2C0%2C0%2C0-24H152a36%2C36%2C0%2C0%2C0-36%2C36v20H96a12%2C12%2C0%2C0%2C0%2C0%2C24h20v55.13a84%2C84%2C0%2C1%2C1%2C24%2C0Z%22/%3E%3C/svg%3E"); }

/* ---------- Keyboard focus ---------- */

:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; border-radius: 4px; }
.btn:focus-visible, .nav a:focus-visible, .lang:focus-visible { border-radius: 999px; }
.cta :focus-visible, .site-footer :focus-visible, .reader :focus-visible { outline-color: #fff; }

/* ---------- Home: other wins as one horizontal strip (4:3 crops centred on the cat) ---------- */

.wins-strip { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 12px; scrollbar-width: thin; }
.wins-strip .card { flex: 0 0 clamp(220px, 23vw, 270px); scroll-snap-align: start; }
.wins-strip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 30%; background: var(--slate-soft); }
.wins-strip h3 { font-size: 1.02rem; margin: 0; }
@media (max-width: 640px) { .wins-strip { margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; } .wins-strip .card { flex-basis: 70%; } }

/* ---------- Home: latest news as rows ---------- */

.news-list { border-bottom: 1px solid var(--line); }
.news-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 4px 28px; align-items: baseline; padding: 20px 4px;
  border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: background .2s; }
.news-row:hover { background: var(--surface); }
.news-row time { font-size: .85rem; font-weight: 600; color: var(--forest); letter-spacing: .04em; }
.news-row h3 { margin: 0 0 4px; font-size: 1.2rem; }
.news-row p { margin: 0; color: var(--muted); font-size: .95rem; max-width: 70ch; }
.news-row .i { color: var(--forest); align-self: center; }
@media (max-width: 640px) { .news-row { grid-template-columns: minmax(0, 1fr) auto; } .news-row time { grid-column: 1 / -1; } }

/* ---------- Home: our cats, one large featured photo and six smaller ---------- */

.cats-feature { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; grid-auto-rows: 270px; gap: 20px; }
.cats-feature .card:first-child { grid-row: span 2; }
.cats-feature .card-img { aspect-ratio: auto; flex: 1; min-height: 0; height: auto; }
.cats-feature .card-body { padding: 12px 16px 14px; }
.cats-feature .card-body h3 { font-size: 1.05rem; }
@media (max-width: 1100px) { .cats-feature { grid-template-columns: 1.6fr 1fr 1fr; } .cats-feature .card:first-child { grid-row: span 3; } }
@media (max-width: 800px) {
  .cats-feature { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%; grid-auto-rows: auto; overflow-x: auto;
    scroll-snap-type: x mandatory; padding-bottom: 8px; margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
  .cats-feature .card:first-child { grid-row: auto; }
  .cats-feature .card { scroll-snap-align: start; }
  .cats-feature .card-img { aspect-ratio: 4 / 5; flex: none; }
}

/* ---------- Links page: logos in equal tiles, text links in two columns ---------- */

.logo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.logo-tile { display: grid; place-items: center; height: 128px; padding: 14px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); text-decoration: none; font-weight: 600; text-align: center; transition: border-color .2s; }
.logo-tile:hover { border-color: var(--forest); }
.prose .logo-tile img { max-width: 100%; max-height: 96px; width: auto; height: auto; object-fit: contain; margin: 0; border-radius: 6px; box-shadow: none; }
.link-list { list-style: none; padding: 0; margin: 1.2em 0 0; columns: 2; column-gap: 40px; }
.link-list li { break-inside: avoid; margin: 0 0 10px; }
@media (max-width: 640px) { .link-list { columns: 1; } }
.embed-code { margin: 1em 0 1.4em; }
.embed-code summary { cursor: pointer; font-weight: 600; color: var(--forest); }
.embed-code code { margin-top: 10px; }

/* ---------- Kittens page: kittens looking for a home, and the information rows ---------- */

.kittens-now { padding-bottom: 36px; }
.kittens-now h2 { margin-bottom: .3em; }
.kittens-now .lead { margin-bottom: 22px; font-size: 1.05rem; }
.kittens-now .kittens { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.kittens-none { margin-bottom: 28px; }
.info-rows { border-bottom: 1px solid var(--line); margin: 1.2em 0 1.6em; }
.info-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 8px 32px; padding: 22px 0; border-top: 1px solid var(--line); }
.prose .info-row h3 { margin: 0; font-size: 1.2rem; }
.prose .info-row ul { margin: 0; padding-left: 1.1em; }
.info-row li + li { margin-top: .5em; }
@media (max-width: 700px) { .info-row { grid-template-columns: 1fr; padding: 18px 0; } }

/* ---------- Photos inside long text (breed page) ---------- */

.prose-figure { float: right; width: min(300px, 42%); margin: 4px 0 16px 28px; }
.prose .prose-figure img { width: 100%; border-radius: var(--radius); margin: 0; }
.prose-figure figcaption { font-size: .82rem; color: var(--muted); margin-top: 6px; text-align: center; }
.prose h2 { clear: both; }
@media (max-width: 640px) { .prose-figure { float: none; width: 100%; margin: 0 0 16px; } }

/* ---------- Kittens page layout ---------- */

.kittens-head .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.kittens-head .lead p { margin: 0 0 .7em; }
.kittens-head .lead p:last-child { margin-bottom: 0; }
.kittens-head img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); }
@media (max-width: 800px) { .kittens-head .wrap { grid-template-columns: 1fr; } }
.kittens-now { padding-top: 12px; }
.status-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 20px; font-size: .92rem; color: var(--muted); }
.status-line a { margin-left: auto; font-weight: 600; }
@media (max-width: 640px) { .status-line a { margin-left: 0; flex-basis: 100%; } }
.kittens-end { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding-bottom: 80px; align-items: stretch; }
.kittens-end .home-date { margin: 0; }
.kittens-ask { background: var(--forest); color: #eef4f0; border-radius: var(--radius); padding: 22px 26px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.kittens-ask h2 { color: #fff; font-size: 1.35rem; margin: 0; }
.kittens-ask p { color: #d5e3da; margin: 0 0 10px; }
.kittens-ask .btn { background: #fff; color: var(--forest); margin-top: auto; }
@media (max-width: 800px) { .kittens-end { grid-template-columns: 1fr; padding-bottom: 56px; } }
.kittens-info { padding-bottom: 28px; }

/* ---------- motion: cards slide in as they scroll into view (only those below the fold, marked .rv by the script),
   cat photos ease on hover, the lightbox fades in, "Badania" opens smoothly. Nothing moves with reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .cat { transition: box-shadow .25s ease, transform .25s ease; }
  .cat:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
  .cat .card-img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
  .cat:hover .card-img { transform: scale(1.03); }
  .cat { overflow: hidden; }
  .cat.rv, .rv { opacity: 0; transform: translateY(18px); transition: opacity .55s cubic-bezier(.2, .7, .2, 1) var(--rv-d, 0s), transform .55s cubic-bezier(.2, .7, .2, 1) var(--rv-d, 0s); }
  .rv.in { opacity: 1; transform: none; }
  .lightbox:not([hidden]) { animation: lb-fade .22s ease both; }
  .lightbox:not([hidden]) img { animation: lb-pop .28s cubic-bezier(.2, .7, .2, 1) both; }
  .health { interpolate-size: allow-keywords; }
  .health::details-content { height: 0; overflow: clip; transition: height .3s ease, content-visibility .3s allow-discrete; }
  .health[open]::details-content { height: auto; }
  .health summary { transition: color .15s; }
}
@keyframes lb-fade { from { opacity: 0; } }
@keyframes lb-pop { from { opacity: 0; transform: scale(.94); } }
@media print { .rv { opacity: 1 !important; transform: none !important; } }