/* Pretty Ragdolls, the album layer (October 2026 design refresh).
   Loaded after site.css, or after a page's inline copy of it, on every page.
   It sets the shared foundation (type, captions, focus, motion) and the
   components added in the refresh: the album hero, the colony today strip,
   the litter register, the litter timeline, the colour explorer and the
   library shelf. Overrides of site.css rules here are deliberate. */

:root{
  --ink:#2F262C;            /* body text, a touch deeper than charcoal for contrast on cream */
  --rose-ink:#8A4660;       /* captions and links on light backgrounds */
  --blush:#F3DCE2;          /* hairlines and mounts */
  --mount:#FFFDFC;          /* the photo mount white */
  --line:rgba(58,49,56,.12);
  --shadow:0 6px 22px rgba(90,55,70,.09);
  --shadow-lift:0 16px 40px rgba(90,55,70,.16);
  --ease-settle:cubic-bezier(.22,.9,.3,1.04); /* the flop: quick, then a relaxed settle */
  --ease-out:cubic-bezier(.2,.7,.2,1);
}

/* ---------- foundation ---------- */
html{-webkit-text-size-adjust:100%}
body{color:var(--ink)}
h1,h2,h3,h4{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;letter-spacing:-.012em;text-wrap:balance}
h1{line-height:1.04}
h2{line-height:1.08;font-size:clamp(31px,3.4vw,44px);margin-bottom:14px}
h3{line-height:1.18}
p,li{text-wrap:pretty}
.prose,.lead{max-width:66ch}
a{text-underline-offset:.16em;text-decoration-thickness:1px;transition:color .15s}
a:hover{text-decoration-thickness:2px}
.btn,.btn:hover,nav a,.ccard,.card a.btn{text-decoration:none}

/* captions instead of tracked capitals: every kicker becomes a serif caption */
.kicker,.hero2-text .kicker,.hero3 .kicker,.herox-text .kicker,.heroS-text .kicker{
  font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:500;font-size:21px;line-height:1.2;
  letter-spacing:0;text-transform:none;color:var(--rose-ink);margin-bottom:8px}
.kicker::first-letter{text-transform:uppercase}
.pagehero .kicker,.hero .kicker,.band .kicker{color:#FCF3E6}
.card .kicker{font-size:18px}

/* focus that is visible on every background */
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}
.pagehero :focus-visible,.hero :focus-visible,.band :focus-visible,footer :focus-visible,.ribbon:not(.alt) :focus-visible{outline-color:#fff}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:none}

/* buttons: the settle easing answers a press */
.btn{transition:background .18s,box-shadow .18s,transform .45s var(--ease-settle);box-shadow:0 3px 12px rgba(156,85,112,.26)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px) scale(.985);transition-duration:.1s}
.btn.line:hover{transform:none}

/* cards read as album mounts: a hairline and a soft, lower shadow */
.card{box-shadow:var(--shadow);border:1px solid rgba(156,85,112,.09)}
.photo{box-shadow:var(--shadow)}
details{box-shadow:none;border:1px solid var(--blush)}

/* tables and notices pick up the same hairline */
.wtable{box-shadow:none;border:1px solid var(--blush)}

/* motion: nothing moves unless asked, and nothing moves for those who asked it not to */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ---------- the album hero (home) ---------- */
.album{padding:clamp(34px,5vw,72px) 0 clamp(26px,3vw,40px);background:var(--ivory);overflow:hidden}
.album .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,72px);align-items:center}
.album h1{font-size:clamp(38px,4.9vw,62px);font-weight:600;margin:6px 0 18px;max-width:15ch;color:var(--ink)}
.album .lead{font-size:clamp(17px,1.6vw,20px);color:var(--soft);margin-bottom:26px;max-width:44ch}
.album .ctas{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.album .btn.line{background:#fff}
.album .hero-more{margin-top:18px;font-size:15px}
.album .hero-more a{color:var(--rose-ink)}
/* the photo stack: two prints on a mount, the back one leaning */
.stack{position:relative;aspect-ratio:1/1;max-width:520px;margin-left:auto;width:100%}
.stack .print{position:absolute;background:var(--mount);padding:10px 10px 36px;border-radius:6px;box-shadow:var(--shadow-lift);border:1px solid rgba(156,85,112,.08)}
.stack .print img{display:block;width:100%;height:100%;object-fit:cover;border-radius:3px;background:var(--cream)}
.stack .print.back{left:0;top:2%;width:58%;aspect-ratio:1/1;transform:rotate(-6deg);padding-bottom:10px}
.stack .print.back img{object-position:12% center}
.stack .print.front{right:0;top:10%;width:68%;aspect-ratio:1/1.07}
.stack .print.front figcaption{position:absolute;left:14px;right:14px;bottom:9px;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:17px;line-height:1.15;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:900px){.stack .print.front figcaption{font-size:15px}}
.stack .print.back img{aspect-ratio:1/1}
/* the one orchestrated moment: the prints settle into place on first paint */
@media (prefers-reduced-motion:no-preference){
  .stack .print.front{animation:settle .9s var(--ease-settle) both}
  .stack .print.back{animation:settle-back 1s .08s var(--ease-settle) both}
  .album h1,.album .lead,.album .ctas,.album .hero-more,.album .kicker{animation:rise .7s var(--ease-out) both}
  .album .lead{animation-delay:.06s}.album .ctas{animation-delay:.12s}.album .hero-more{animation-delay:.16s}
}
@keyframes settle{from{opacity:0;transform:translateY(18px) rotate(2deg)}to{opacity:1;transform:none}}
@keyframes settle-back{from{opacity:0;transform:translateY(22px) rotate(-10deg)}to{opacity:1;transform:rotate(-6deg)}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* colony today: the live counters as one quiet line */
.today{border-top:1px solid var(--blush);border-bottom:1px solid var(--blush);background:#fff}
.today .wrap{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 30px;padding-top:12px;padding-bottom:12px}
.today .tlabel{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:19px;color:var(--rose-ink);display:flex;align-items:center;gap:9px}
.today .livedot{width:8px;height:8px;border-radius:50%;background:#5FB38E;display:inline-block;box-shadow:0 0 0 3px rgba(95,179,142,.18)}
.today a{display:flex;align-items:baseline;gap:7px;text-decoration:none;color:var(--ink);font-size:14.5px;padding:4px 0;white-space:nowrap}
.today a:hover .statnum{color:var(--rose-ink)}
.today .statnum{font-family:'Cormorant Garamond',Georgia,serif;font-weight:700;font-size:27px;line-height:1;color:var(--blue-dark);font-variant-numeric:lining-nums}
.today .livedot{animation:none}
.today p{margin:0;color:var(--soft)}

/* the litter register: litters now and next, as rows on a ledger rather than boxes */
.register{margin-top:12px;border-top:1px solid var(--blush)}
.register .lcard{display:grid;grid-template-columns:104px minmax(0,1fr) auto;gap:22px;align-items:start;padding:24px 0;border-bottom:1px solid var(--blush)}
.register .lthumb-wrap{padding-top:4px}
.register .lthumb{width:104px;height:104px;border-radius:6px;object-fit:cover;padding:5px;border:1px solid var(--blush);background:var(--mount);box-shadow:var(--shadow)}
.register .ldesc h3{font-size:27px;margin-bottom:4px}
.register .ldesc p{font-size:15.5px}
.register .lact{margin:0;align-self:start;padding-top:6px;white-space:nowrap}
.register .ltl.compact{max-width:620px}
@media(max-width:760px){
  .register .lcard{grid-template-columns:72px minmax(0,1fr);gap:12px 16px}
  .register .lthumb{width:72px;height:72px}
  .register .lact{grid-column:2;white-space:normal;padding-top:0}
  .register .ldesc h3{font-size:23px}
}

/* promises as a list with small marks, not four boxes */
.promises{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 48px;max-width:960px}
.promises li{padding:18px 0 18px 30px;border-top:1px solid var(--blush);position:relative}
.promises li::before{content:"";position:absolute;left:0;top:27px;width:14px;height:14px;border-radius:50%;background:var(--blue-pale);border:2px solid var(--blue)}
.promises h3{font-size:24px;margin-bottom:4px}
.promises p{color:var(--soft);font-size:15.5px}
@media(max-width:720px){.promises{grid-template-columns:1fr;gap:0}}

/* ---------- the litter timeline ---------- */
.ltl{margin-top:26px;background:#fff;border:1px solid var(--blush);border-radius:12px;padding:22px 22px 18px}
.ltl-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 18px;align-items:baseline}
.ltl-head b{font-family:'Cormorant Garamond',Georgia,serif;font-size:22px;font-weight:600}
.ltl-head span{color:var(--soft);font-size:14.5px}
.ltl-track{position:relative;height:10px;border-radius:999px;background:var(--blush);margin:18px 0 0;overflow:visible}
.ltl-fill{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:linear-gradient(90deg,var(--blue),var(--blue-dark));transform-origin:left center}
@media (prefers-reduced-motion:no-preference){.ltl-fill{animation:grow 1.1s var(--ease-settle) both}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.ltl-paw{position:absolute;top:50%;width:30px;height:30px;transform:translate(-50%,-50%);color:var(--blue-dark);filter:drop-shadow(0 2px 4px rgba(90,55,70,.25))}
.ltl-paw svg{width:100%;height:100%;display:block}
.ltl-ends{display:flex;justify-content:space-between;font-size:13.5px;color:var(--soft);margin-top:10px}
.ltl-ends b{color:var(--ink)}
.ltl-steps{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:12px 14px}
.ltl-steps li{position:relative;padding:10px 0 0;border-top:2px solid var(--blush);font-size:14px;color:var(--soft)}
.ltl-steps li b{display:block;color:var(--ink);font-size:14.5px;margin-bottom:2px}
.ltl-steps li.done{border-top-color:var(--blue)}
.ltl-steps li.now{border-top-color:var(--blue-dark)}
.ltl-steps li.now b{color:var(--blue-dark)}
.ltl-steps li.now::after{content:"now";position:absolute;right:0;top:-24px;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:15px;color:var(--blue-dark)}
.ltl-note{font-size:13.5px;color:var(--soft);margin-top:14px}
.ltl.compact{padding:14px 16px 12px;margin-top:12px}
.ltl.compact .ltl-head b{font-size:18px}
.ltl.compact .ltl-track{margin-top:12px;height:8px}
.ltl.compact .ltl-paw{width:24px;height:24px}

/* ---------- the colour and pattern explorer (breed page) ---------- */
.cx{margin-top:26px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(22px,4vw,48px);align-items:start}
.cx fieldset{border:0;padding:0;margin:0 0 18px;min-width:0}
.cx legend{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:20px;color:var(--rose-ink);margin-bottom:10px;padding:0}
.cx .opts{display:flex;flex-wrap:wrap;gap:8px}
.cx .opts label{position:relative;margin:0;font-weight:600;font-size:15px}
.cx .opts input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.cx .opts span{display:inline-flex;align-items:center;gap:9px;padding:9px 14px 9px 10px;border:1.5px solid var(--blush);border-radius:999px;background:#fff;cursor:pointer;transition:border-color .15s,background .15s,transform .35s var(--ease-settle)}
.cx .opts i{width:18px;height:18px;border-radius:50%;display:inline-block;border:1px solid rgba(0,0,0,.08)}
.cx .opts input:checked+span{border-color:var(--blue-dark);background:var(--blue-pale);transform:translateY(-1px)}
.cx .opts input:focus-visible+span{outline:3px solid var(--gold);outline-offset:2px}
.cx-result{background:#fff;border:1px solid var(--blush);border-radius:12px;padding:22px;display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;align-items:start}
.cx-artwrap{width:200px;background:var(--cream);border-radius:10px;padding:8px;overflow:hidden;transition:background .3s}
.cx-art{width:100%;height:auto;display:block}
.cx-result h3{font-size:28px;margin-bottom:6px}
.cx-result p{color:var(--soft);font-size:15.5px;margin-top:6px}
.cx-result .cx-cats{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}
.cx-result .cx-cats a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font-size:14px;font-weight:600;background:var(--ivory);border:1px solid var(--blush);border-radius:999px;padding:5px 12px 5px 5px}
.cx-result .cx-cats img{width:28px;height:28px;border-radius:50%;padding:0;background:var(--cream)}
.cx-result .cx-links{margin-top:16px;display:flex;flex-wrap:wrap;gap:10px}
.cx-note{font-size:13.5px;color:var(--soft);margin-top:12px}
@media(max-width:820px){.cx{grid-template-columns:1fr}.cx-result{grid-template-columns:140px 1fr;gap:16px;padding:18px}.cx-artwrap{width:140px}}
@media(max-width:480px){.cx-result{grid-template-columns:1fr}.cx-artwrap{width:150px}}

/* ---------- the library hub and your shelf ---------- */
.shelf{background:#fff;border:1px solid var(--blush);border-radius:12px;padding:22px 24px;margin-top:22px}
.shelf h3{font-size:26px;margin-bottom:4px}
.shelf .empty{color:var(--soft);font-size:15.5px;margin:0}
.shelf ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.shelf li{display:flex;gap:12px;align-items:center;justify-content:space-between;border-top:1px solid var(--blush);padding-top:10px}
.shelf li a{font-weight:700;text-decoration:none;color:var(--ink);font-size:16px}
.shelf li a:hover{color:var(--rose-ink)}
.shelf li small{color:var(--soft);display:block;font-weight:400;font-size:13.5px}
.shelf .unsave{background:none;border:0;color:var(--soft);font:inherit;font-size:13.5px;cursor:pointer;padding:6px 8px;border-radius:6px;white-space:nowrap}
.shelf .unsave:hover{color:var(--rose-ink);background:var(--blue-pale)}
.shelf .recent{margin-top:16px;font-size:14.5px;color:var(--soft)}
.shelf .recent a{color:var(--rose-ink)}
.savebtn{display:inline-flex;align-items:center;gap:8px;background:none;border:1.5px solid rgba(255,255,255,.7);color:#fff;border-radius:999px;padding:8px 14px;font:inherit;font-size:14px;font-weight:700;cursor:pointer;margin-top:14px;transition:background .15s,transform .35s var(--ease-settle)}
.savebtn:hover{background:rgba(255,255,255,.14)}
.savebtn[aria-pressed=true]{background:#fff;color:var(--blue-dark);border-color:#fff}
.savebtn svg{width:16px;height:16px}
.savebtn[aria-pressed=true] svg path{fill:currentColor}
.shelfrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start}
@media(max-width:820px){.shelfrow{grid-template-columns:1fr}}
/* the hub lists guides on each shelf, folded to four until asked */
.glist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;border-top:1px solid var(--blush);margin-top:12px}
.gcard{padding:14px 0 16px;border-bottom:1px solid var(--blush);min-width:0}
.gcard h3{font-size:22px;margin-bottom:4px;line-height:1.2}
.gcard h3 a{color:var(--ink);text-decoration:none}
.gcard h3 a:hover{color:var(--rose-ink);text-decoration:underline}
.gcard p{color:var(--soft);font-size:15px}
.shelfsec[data-fold] .gcard:nth-child(n+5){display:none}
.shelfsec[data-fold].open .gcard:nth-child(n+5){display:block}
@media(max-width:720px){.glist{grid-template-columns:1fr}}
.showall{margin-top:16px;display:inline-flex;align-items:center;gap:8px;background:none;border:1.5px solid var(--blue);color:var(--blue-dark);border-radius:999px;padding:9px 16px;font:inherit;font-size:14.5px;font-weight:700;cursor:pointer}
.showall:hover{background:var(--blue-pale)}
.showall svg{width:14px;height:14px;transition:transform .3s var(--ease-settle)}
.shelfsec.open .showall svg{transform:rotate(180deg)}

/* search panel hint */
.srchpanel .srchhint{font-size:13.5px;color:var(--soft);margin:8px 0 0}
.srchpanel .srchhint kbd{font:inherit;font-size:12.5px;border:1px solid var(--blush);border-bottom-width:2px;border-radius:5px;padding:1px 6px;background:#fff}
.srchpanel{transform-origin:top center}
@media (prefers-reduced-motion:no-preference){.srchpanel.on{animation:drop .4s var(--ease-settle)}}
@keyframes drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.mobilemenu{transform-origin:top center}
@media (prefers-reduced-motion:no-preference){body.navopen .mobilemenu{animation:drop .35s var(--ease-settle)}}

/* parent labels take the caption treatment too */
.prole{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:500;font-size:17px;letter-spacing:0;text-transform:none;color:var(--rose-ink)}

/* forms: fields that need attention, once a submit has been tried */
form.checked :invalid{border-color:#B4443F;box-shadow:0 0 0 3px rgba(180,68,63,.16)}
form.checked :invalid:focus{box-shadow:0 0 0 3px rgba(180,68,63,.3)}
.formnote{color:#8F2F2B;font-weight:700;font-size:15px;margin:14px 0;padding:10px 14px;background:#FBEDEC;border-radius:8px;border:1px solid rgba(180,68,63,.25)}

/* past kittens: one album per litter, names printed on the photos */
.litter{margin-top:48px;padding-top:40px;border-top:1px solid var(--blush)}
.litter:first-child{margin-top:0;padding-top:0;border-top:0}
.litter .lead{margin-bottom:18px}
.gallery.lalbum .ph{position:relative}
.gallery.lalbum .phname{position:absolute;left:0;right:0;bottom:0;padding:30px 12px 10px;color:#fff;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:500;font-size:20px;line-height:1.1;background:linear-gradient(to top,rgba(47,38,44,.78),rgba(47,38,44,0));pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.gallery.lalbum.folded .ph:nth-child(n+13){display:none}
.showall.open svg{transform:rotate(180deg)}

/* ---------- small screens ---------- */
@media(max-width:900px){
  .album .wrap{grid-template-columns:1fr;gap:26px}
  .stack{order:-1;max-width:330px;margin:0 auto;aspect-ratio:1/1.02}
  .album h1{max-width:none}
  .today .wrap{gap:4px 22px}
  .today .tlabel{width:100%;margin-bottom:2px}
}
@media(max-width:720px){
  section{padding:46px 0}
  .kicker{font-size:19px}
  .album .ctas .btn{width:100%;text-align:center}
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}