@layer base, frame, parts, pages;
@layer base {
  :root {
    --luv-teal: #2dc0bc; --luv-teal-deep: #16a09c; --luv-mint: #c4f2ee; --luv-foam: #eefbfa;
    --luv-plum: #962db4; --luv-plum-deep: #5d1a73; --luv-pink: #ea47b8; --luv-berry: #b81899;
    --luv-fur: #f79cc4; --luv-fur-deep: #f06aa6; --luv-ink: #2c1838; --luv-soft: #6b5a76; --luv-paper: #ffffff;
    --luv-sun: #ffc93c; --luv-wide: 1240px; --luv-pad: clamp(16px, 4vw, 40px);
    --luv-display: "Grandstander", "Trebuchet MS", sans-serif; --luv-text: "Albert Sans", "Segoe UI", sans-serif;
  }
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  body { margin: 0; font: 400 17px/1.6 var(--luv-text); color: var(--luv-ink); background: var(--luv-paper); overflow-x: hidden; }
  img { max-inline-size: 100%; block-size: auto; display: block; }
  a { color: var(--luv-plum); text-underline-offset: 3px; }
  a:hover { color: var(--luv-berry); }
  h1, h2, h3 { font-family: var(--luv-display); font-weight: 800; line-height: 1.08; margin: 0; color: var(--luv-plum); letter-spacing: -.01em; }
  h1 { font-size: clamp(2.2rem, 5.4vw, 4rem); }
  h2 { font-size: clamp(1.8rem, 3.8vw, 2.8rem); }
  h3 { font-size: 1.3rem; }
  p { margin: 0 0 1em; }
  ul { margin: 0; padding: 0; list-style: none; }
  button { font: inherit; cursor: pointer; border: 0; background: none; padding: 0; color: inherit; }
  :focus-visible { outline: 3px solid var(--luv-sun); outline-offset: 3px; }
  .wrap { inline-size: min(100% - 2 * var(--luv-pad), var(--luv-wide)); margin-inline: auto; }
  .hush { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
}
@layer frame {
  .shout { margin: 0; background: var(--luv-mint); color: var(--luv-plum-deep); text-align: center; font: 700 .92rem/1.3 var(--luv-display); padding-block: 9px; padding-inline: 12px; letter-spacing: .02em; }
  .fur { position: relative; background: linear-gradient(180deg, var(--luv-fur-deep), var(--luv-fur)); padding-block: 26px 44px; z-index: 5; }
  .fur::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: -29px; block-size: 30px;
    background:
      linear-gradient(135deg, var(--luv-fur) 33%, transparent 34%) 0 0 / 26px 30px,
      linear-gradient(225deg, var(--luv-fur) 33%, transparent 34%) 0 0 / 26px 30px,
      linear-gradient(135deg, var(--luv-fur) 30%, transparent 31%) 9px 0 / 41px 21px,
      linear-gradient(225deg, var(--luv-fur) 30%, transparent 31%) 9px 0 / 41px 21px; }
  .perch { background: var(--luv-paper); border-radius: 999px; display: flex; align-items: center; gap: 18px; padding-block: 10px; padding-inline: 26px 14px; box-shadow: 0 10px 26px rgb(93 26 115 / .18); position: relative; }
  .perch__logo img { inline-size: 84px; margin-block: -22px; filter: drop-shadow(0 3px 5px rgb(0 0 0 / .18)); }
  .perch__nav { display: flex; gap: 6px; margin-inline: auto; flex-wrap: wrap; justify-content: center; }
  .perch__nav a { font: 700 1.02rem/1 var(--luv-display); color: var(--luv-ink); text-decoration: none; padding: 12px 15px; border-radius: 999px; }
  .perch__nav a:hover, .perch__nav a[aria-current] { background: var(--luv-mint); color: var(--luv-plum-deep); }
  .perch__buy { inline-size: 232px; flex: none; }
  .perch__logo { flex: none; }
  .perch__flip, .perch__burger { display: none; }
  .foot { margin-block-start: 90px; background: var(--luv-teal); color: #fff; clip-path: polygon(0 0, 100% 90px, 100% 100%, 0 100%); padding-block: 150px 0; border-end-start-radius: 46px; border-end-end-radius: 46px; }
  .foot a { color: #fff; text-decoration: none; font-weight: 600; }
  .foot a:hover { text-decoration: underline; color: #fff; }
  .foot__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr); gap: 34px; }
  .foot__cols h2 { font-size: 1.35rem; color: #fff; margin-block-end: 16px; }
  .foot__cols li { margin-block-end: 11px; }
  .foot__home { text-align: end; }
  .foot__home img { inline-size: 170px; margin-inline-start: auto; margin-block-end: 14px; }
  .foot__home address { font-style: normal; line-height: 1.5; }
  .foot__note { margin-block: 40px 26px; font-size: .9rem; opacity: .95; max-inline-size: 70ch; }
  .foot__ribbon { display: flex; block-size: 22px; }
  .foot__ribbon i { flex: 1; }
  .foot__ribbon i:nth-child(1) { background: var(--luv-teal-deep); flex: 1.6; } .foot__ribbon i:nth-child(2) { background: #1a8fd0; }
  .foot__ribbon i:nth-child(3) { background: var(--luv-plum); flex: 1.7; } .foot__ribbon i:nth-child(4) { background: var(--luv-sun); }
  .foot__ribbon i:nth-child(5) { background: var(--luv-pink); flex: 1.7; } .foot__ribbon i:nth-child(6) { background: #cfe02e; }
  .foot__ribbon i:nth-child(7) { background: var(--luv-teal-deep); flex: 1.6; }
  .tail { text-align: center; color: var(--luv-soft); font-size: .88rem; padding-block: 22px 30px; }
}
@layer parts {
  .adopt { display: inline-block; transition: transform .15s ease; }
  .adopt:hover { transform: translateY(-2px) rotate(-.6deg); }
  .adopt img { inline-size: 100%; }
  .adopt--card { display: block; inline-size: 100%; margin-block-start: auto; }
  .adopt--big { inline-size: min(100%, 420px); }
  .pill { display: inline-block; font: 700 1rem/1 var(--luv-display); background: var(--luv-teal); color: #fff; text-decoration: none; padding: 15px 26px; border-radius: 999px; }
  .pill:hover { background: var(--luv-teal-deep); color: #fff; }
  .pill--ghost { background: #fff; color: var(--luv-plum-deep); border: 3px solid var(--luv-teal); }
  .pill--ghost:hover { background: var(--luv-mint); color: var(--luv-plum-deep); }
  .stars { --rate: 4.4; display: inline-block; inline-size: 5.2em; block-size: 1em; vertical-align: -2px;
    background: linear-gradient(90deg, var(--luv-sun) calc(var(--rate) / 5 * 100%), #dcd3e2 0);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 19'%3E%3Cpath d='M10 0l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L10 15.2 3.9 18.6l1.4-6.8L.2 7.1l6.9-.8z'/%3E%3C/svg%3E") 0 0 / 20% 100% repeat-x;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 19'%3E%3Cpath d='M10 0l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L10 15.2 3.9 18.6l1.4-6.8L.2 7.1l6.9-.8z'/%3E%3C/svg%3E") 0 0 / 20% 100% repeat-x; }
  .litter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
  .crate { position: relative; display: flex; flex-direction: column; background: #fff; border: 5px solid var(--luv-teal); border-radius: 34px; padding: 18px 18px 20px; }
  .crate:nth-child(3n+2) { border-radius: 58px 34px 58px 34px; }
  .crate:nth-child(3n) { border-color: var(--luv-pink); }
  .crate:nth-child(4n+1) { border-color: var(--luv-plum); }
  .crate__pic { display: block; border-radius: 22px; overflow: hidden; aspect-ratio: 1; background: #fff; }
  .crate__pic img { inline-size: 100%; block-size: 100%; object-fit: contain; transition: transform .25s ease; }
  .crate__pic:hover img { transform: scale(1.04); }
  .crate__flag { position: absolute; inset-block-start: 16px; inset-inline-start: 16px; z-index: 1; background: var(--luv-sun); color: var(--luv-ink); font: 800 .82rem/1 var(--luv-display); padding: 8px 12px; border-radius: 999px; transform: rotate(-4deg); }
  .crate__brand { font: 700 .74rem/1 var(--luv-text); letter-spacing: .14em; text-transform: uppercase; color: var(--luv-soft); margin-block: 14px 6px; text-align: center; }
  .crate__name { font-size: 1.28rem; text-align: center; color: var(--luv-ink); }
  .crate__name a { color: inherit; text-decoration: none; }
  .crate__name a:hover { color: var(--luv-plum); }
  .crate__row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-block: 12px 4px; font-size: .95rem; }
  .crate__price { font: 800 1.35rem/1 var(--luv-display); color: var(--luv-plum-deep); }
  .crate__price s { font: 500 .9rem/1 var(--luv-text); color: var(--luv-soft); margin-inline-end: 6px; }
  .crate__say { font-size: .95rem; color: var(--luv-soft); margin-block: 8px 10px; text-align: center; }
  .finds { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: .88rem; font-weight: 600; color: var(--luv-plum-deep); margin-block-end: 6px; }
  .finds i { inline-size: 20px; block-size: 20px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1.5px #cdbfd6; }
  .crate__size { text-align: center; font-size: .85rem; color: var(--luv-soft); margin-block-end: 14px; }
  .heading { text-align: center; max-inline-size: 760px; margin-inline: auto; margin-block-end: 38px; }
  .heading p { margin-block-start: 14px; color: var(--luv-soft); }
  .crumbs { font-size: .9rem; color: var(--luv-soft); padding-block: 46px 0; display: flex; flex-wrap: wrap; gap: 8px; }
  .crumbs a { color: var(--luv-plum-deep); font-weight: 600; }
  .crumbs li + li::before { content: "\2665"; color: var(--luv-pink); margin-inline-end: 8px; font-size: .7em; }
  .hub { background: var(--luv-plum); color: #fff; border-radius: clamp(40px, 9vw, 120px); padding: clamp(40px, 7vw, 84px) var(--luv-pad); text-align: center; margin-block-start: 90px; }
  .hub img.hub__logo { inline-size: 130px; margin-inline: auto; margin-block-end: 14px; }
  .hub h2 { color: #fff; }
  .hub p { max-inline-size: 560px; margin-inline: auto; margin-block: 16px 24px; font-size: 1.1rem; }
  .hub a.hub__more { color: #fff; display: block; margin-block-start: 16px; font-weight: 600; }
  .tale { background: var(--luv-foam); border-radius: 30px; padding: 24px; border: 2px solid var(--luv-mint); display: flex; flex-direction: column; }
  .tale h3 { color: var(--luv-ink); font-size: 1.15rem; margin-block: 10px 8px; }
  .tale blockquote { margin: 0; font-size: .98rem; }
  .tale footer { margin-block-start: auto; padding-block-start: 14px; font-size: .86rem; color: var(--luv-soft); }
  .tale footer b { color: var(--luv-ink); }
  .tale footer a { font-weight: 600; }
  .tales { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
}
@layer pages {
  .rescue { background: linear-gradient(180deg, var(--luv-teal) 0%, #7fdcd6 55%, var(--luv-mint) 100%); padding-block: 74px 60px; margin-block-start: -1px; }
  .rescue__grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 70px); align-items: center; }
  .rescue__logo { inline-size: min(78%, 400px); filter: drop-shadow(0 12px 14px rgb(22 110 108 / .35)); margin-block-end: 18px; }
  .rescue h1 { color: var(--luv-plum-deep); }
  .rescue__lede { font-size: 1.16rem; color: var(--luv-ink); margin-block: 18px 24px; max-inline-size: 34em; }
  .rescue__scene { position: relative; }
  .rescue__scene > img { border-radius: 46% 54% 50% 50% / 52% 46% 54% 48%; border: 10px solid #fff; aspect-ratio: 1.08; object-fit: cover; object-position: 100% 50%; box-shadow: 0 22px 40px rgb(22 110 108 / .3); }
  .rescue__q { position: absolute; inset-block-start: 4%; inset-inline-end: 2%; inline-size: 74px; block-size: 74px; border-radius: 50%; background: var(--luv-plum); color: #fff; font: 800 2.6rem/74px var(--luv-display); text-align: center; border: 5px solid #fff; transform: rotate(12deg); }
  .rescue__chips { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 44px; justify-content: center; }
  .range { padding-block: 76px 20px; }
  .tub { background: var(--luv-teal-deep); margin-block-start: 80px; }
  .tub__wave { display: block; inline-size: 100%; block-size: clamp(50px, 9vw, 120px); background: #fff; }
  .tub__wave--end { transform: scaleY(-1) scaleX(-1); margin-block-start: 60px; }
  .tub__wave path { fill: var(--luv-teal-deep); }
  .tub__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px; margin-block-start: 30px; }
  .panel { background: var(--luv-mint); overflow: hidden; display: grid; }
  .panel h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); }
  .panel p { margin-block-start: 12px; margin-block-end: 0; color: var(--luv-ink); }
  .panel__say { padding: clamp(24px, 4vw, 48px); text-align: center; align-self: center; }
  .panel img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .panel--wide { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; border-radius: 60px 60px 60px 60px; }
  .panel--left { border-radius: 60px 60px 28px 28px; grid-template-rows: auto 1fr; }
  .panel--right { border-radius: 150px 150px 28px 28px; grid-template-rows: auto 1fr; }
  .panel--left img, .panel--right img { aspect-ratio: 1; }
  .ritual { padding-block: 84px 10px; }
  .ritual__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; counter-reset: step; }
  .ritual__step { counter-increment: step; position: relative; background: #fff; border-radius: 30px; border: 3px dashed var(--luv-pink); padding: 14px 14px 20px; }
  .ritual__step img { border-radius: 20px; aspect-ratio: 1; object-fit: cover; inline-size: 100%; }
  .ritual__step::before { content: counter(step); position: absolute; inset-block-start: -18px; inset-inline-start: -8px; inline-size: 50px; block-size: 50px; border-radius: 50%; background: var(--luv-pink); color: #fff; font: 800 1.5rem/50px var(--luv-display); text-align: center; border: 4px solid #fff; box-shadow: 0 4px 10px rgb(0 0 0 / .15); }
  .ritual__step h3 { margin-block: 14px 6px; }
  .ritual__step p { font-size: .96rem; margin: 0; }
  .ways { padding-block: 84px 0; }
  .ways__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .way { position: relative; display: block; border-radius: 40px; overflow: hidden; aspect-ratio: 16 / 9; color: #fff; text-decoration: none; }
  .way img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .3s ease; }
  .way:hover img { transform: scale(1.05); }
  .way span { position: absolute; inset-block-end: 16px; inset-inline-start: 16px; background: var(--luv-plum); color: #fff; font: 800 1.3rem/1 var(--luv-display); padding: 14px 22px; border-radius: 999px; border: 4px solid #fff; }
  .stories { padding-block: 84px 0; }
  .asked { padding-block: 84px 0; max-inline-size: 880px; margin-inline: auto; }
  .asked details { border: 3px solid var(--luv-teal); border-radius: 26px; padding: 0 22px; margin-block-end: 14px; background: #fff; }
  .asked details[open] { background: var(--luv-foam); }
  .asked summary { font: 700 1.14rem/1.3 var(--luv-display); padding-block: 18px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 14px; color: var(--luv-ink); }
  .asked summary::-webkit-details-marker { display: none; }
  .asked summary::after { content: "+"; color: var(--luv-pink); font-size: 1.5rem; line-height: 1; }
  .asked details[open] summary::after { content: "\2212"; }
  .primer { padding-block: 84px 0; }
  .primer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-block-start: 26px; }
  .primer h2 { text-align: center; }
  .linehead { position: relative; margin-block-start: 22px; border-radius: 46px; overflow: hidden; min-block-size: 340px; display: grid; align-items: end; }
  .linehead img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
  .linehead::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(44 24 56 / .72), transparent 62%); }
  .linehead h1 { position: relative; z-index: 1; color: #fff; padding: 30px clamp(20px, 4vw, 46px); font-size: clamp(2rem, 4.6vw, 3.4rem); }
  .lineintro { font-size: 1.14rem; max-inline-size: 800px; margin-block: 30px 40px; }
  .hints { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-block-start: 60px; }
  .hint { background: var(--luv-mint); border-radius: 30px 30px 30px 6px; padding: 24px; }
  .hint h3 { margin-block-end: 8px; color: var(--luv-plum-deep); }
  .hint p { margin: 0; font-size: .98rem; }
  .others { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 50px; align-items: center; }
  .others b { font-family: var(--luv-display); margin-inline-end: 6px; }
  .pet { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); margin-block-start: 24px; align-items: start; }
  .album { display: grid; gap: 14px; }
  .album input { position: absolute; opacity: 0; pointer-events: none; }
  .album__stage { border: 5px solid var(--luv-teal); border-radius: 44px; overflow: hidden; background: #fff; aspect-ratio: 1; }
  .album__stage img { display: none; inline-size: 100%; block-size: 100%; object-fit: contain; }
  .album input:nth-of-type(1):checked ~ .album__stage img:nth-child(1), .album input:nth-of-type(2):checked ~ .album__stage img:nth-child(2),
  .album input:nth-of-type(3):checked ~ .album__stage img:nth-child(3), .album input:nth-of-type(4):checked ~ .album__stage img:nth-child(4),
  .album input:nth-of-type(5):checked ~ .album__stage img:nth-child(5), .album input:nth-of-type(6):checked ~ .album__stage img:nth-child(6) { display: block; }
  .album__strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
  .album__strip label { border: 3px solid var(--luv-mint); border-radius: 16px; overflow: hidden; cursor: pointer; aspect-ratio: 1; background: #fff; }
  .album__strip img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .album input:nth-of-type(1):checked ~ .album__strip label:nth-child(1), .album input:nth-of-type(2):checked ~ .album__strip label:nth-child(2),
  .album input:nth-of-type(3):checked ~ .album__strip label:nth-child(3), .album input:nth-of-type(4):checked ~ .album__strip label:nth-child(4),
  .album input:nth-of-type(5):checked ~ .album__strip label:nth-child(5), .album input:nth-of-type(6):checked ~ .album__strip label:nth-child(6) { border-color: var(--luv-pink); }
  .pet__flag { display: inline-block; background: var(--luv-sun); font: 800 .85rem/1 var(--luv-display); padding: 8px 14px; border-radius: 999px; margin-block-end: 14px; color: var(--luv-ink); }
  .pet h1 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
  .pet__rate { margin-block: 14px 6px; font-weight: 600; }
  .pet__price { font: 800 2.3rem/1 var(--luv-display); color: var(--luv-plum-deep); margin-block: 14px 4px; }
  .pet__price s { font: 500 1.1rem/1 var(--luv-text); color: var(--luv-soft); margin-inline-end: 10px; }
  .pet__price em { font: 800 .95rem/1 var(--luv-display); background: var(--luv-pink); color: #fff; border-radius: 999px; padding: 6px 10px; margin-inline-start: 10px; vertical-align: middle; font-style: normal; }
  .pet__small { font-size: .86rem; color: var(--luv-soft); margin-block-end: 18px; }
  .pet__lede { font-size: 1.08rem; margin-block: 18px; }
  .pet .finds { justify-content: flex-start; margin-block: 18px 6px; font-size: .96rem; }
  .pet__size { color: var(--luv-soft); font-size: .95rem; }
  .inside { background: var(--luv-mint); border-radius: 30px 30px 30px 6px; padding: 22px 24px; margin-block-start: 22px; }
  .inside h2 { font-size: 1.25rem; margin-block-end: 10px; color: var(--luv-plum-deep); }
  .inside li { padding-inline-start: 26px; position: relative; margin-block-end: 6px; }
  .inside li::before { content: "\2665"; position: absolute; inset-inline-start: 0; color: var(--luv-pink); }
  .more { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); margin-block-start: 64px; }
  .more h2 { font-size: 1.8rem; margin-block-end: 16px; }
  .perks li { border: 3px solid var(--luv-teal); border-radius: 22px; padding: 14px 18px; margin-block-end: 12px; font-weight: 500; background: #fff; }
  .perks li:nth-child(even) { border-color: var(--luv-pink); border-radius: 22px 40px 22px 40px; }
  .petstories, .siblings { margin-block-start: 70px; }
  .buyband { margin-block-start: 70px; background: var(--luv-teal); border-radius: 60px 60px 60px 12px; padding: clamp(26px, 5vw, 50px); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
  .buyband h2 { color: #fff; font-size: clamp(1.5rem, 3vw, 2.2rem); }
  .buyband p { margin: 6px 0 0; color: var(--luv-ink); font-weight: 500; }
  .sheet { max-inline-size: 860px; margin-inline: auto; }
  .sheet > h1 { margin-block: 22px 18px; }
  .sheet__lede { font-size: 1.16rem; color: var(--luv-soft); }
  .sheet__pic { border-radius: 40px; margin-block: 26px; aspect-ratio: 16 / 9; object-fit: cover; inline-size: 100%; border: 5px solid var(--luv-teal); }
  .sheet h2 { font-size: 1.6rem; margin-block: 34px 12px; }
  .notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-block-start: 30px; }
  .note { border-radius: 30px; overflow: hidden; border: 3px solid var(--luv-mint); text-decoration: none; color: var(--luv-ink); display: block; background: #fff; }
  .note img { aspect-ratio: 16 / 10; object-fit: cover; inline-size: 100%; }
  .note b { display: block; font: 800 1.12rem/1.2 var(--luv-display); padding: 16px 18px 20px; color: var(--luv-plum-deep); }
  .chapters { counter-reset: ch; display: grid; gap: 18px; margin-block-start: 30px; }
  .chapter { display: grid; grid-template-columns: 150px 1fr; gap: 22px; align-items: center; background: var(--luv-foam); border-radius: 999px 40px 40px 999px; padding: 14px 30px 14px 14px; }
  .chapter b { inline-size: 150px; block-size: 150px; border-radius: 50%; display: grid; place-items: center; font: 800 1.5rem/1 var(--luv-display); color: #fff; background: var(--luv-plum); }
  .chapter:nth-child(2) b { background: var(--luv-teal-deep); } .chapter:nth-child(3) b { background: var(--luv-pink); } .chapter:nth-child(4) b { background: var(--luv-berry); }
  .chapter p { margin: 0; }
  .facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-block-start: 34px; text-align: center; }
  .facts li { border: 4px solid var(--luv-teal); border-radius: 30px; padding: 20px 10px; }
  .facts b { display: block; font: 800 2.4rem/1 var(--luv-display); color: var(--luv-pink); }
  .doors { display: grid; gap: 18px; margin-block-start: 28px; }
  .door { border: 4px solid var(--luv-teal); border-radius: 34px 34px 34px 8px; padding: 22px 24px; background: #fff; }
  .door:nth-child(2) { border-color: var(--luv-pink); } .door:nth-child(3) { border-color: var(--luv-plum); }
  .door h2 { font-size: 1.3rem; margin: 0 0 8px; }
  .door p { margin-block-end: 12px; }
  .tagcard { background: var(--luv-plum); color: #fff; border-radius: 40px; padding: 28px; margin-block-start: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .tagcard h2 { color: #fff; font-size: 1.2rem; margin: 0 0 8px; }
  .tagcard a { color: #fff; font-weight: 700; }
  .tagcard address { font-style: normal; }
  .trail { margin-block-start: 30px; display: grid; gap: 0; }
  .trail li { position: relative; padding: 0 0 30px 74px; }
  .trail li::before { content: attr(data-n); position: absolute; inset-inline-start: 0; inset-block-start: 0; inline-size: 52px; block-size: 52px; border-radius: 50%; background: var(--luv-teal); color: #fff; font: 800 1.4rem/52px var(--luv-display); text-align: center; }
  .trail li::after { content: ""; position: absolute; inset-inline-start: 24px; inset-block: 52px 0; border-inline-start: 4px dotted var(--luv-teal); }
  .trail li:last-child::after { display: none; }
  .trail h2 { font-size: 1.3rem; margin: 0 0 6px; padding-block-start: 10px; }
  .smallprint { background: var(--luv-foam); border-radius: 26px; padding: 20px 24px; }
  .smallprint li { padding-inline-start: 22px; position: relative; margin-block: 6px; }
  .smallprint li::before { content: "\2022"; color: var(--luv-pink); position: absolute; inset-inline-start: 4px; font-weight: 800; }
  .ifthen { display: grid; gap: 16px; margin-block-start: 28px; }
  .ifthen div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); border-radius: 30px; overflow: hidden; border: 3px solid var(--luv-plum); }
  .ifthen h2 { background: var(--luv-plum); color: #fff; font-size: 1.15rem; margin: 0; padding: 20px; display: grid; align-items: center; }
  .ifthen p { margin: 0; padding: 20px; }
  .cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-block-start: 28px; }
  .cards section { background: var(--luv-foam); border-radius: 28px; padding: 22px; border-block-start: 8px solid var(--luv-teal); }
  .cards section:nth-child(3n+2) { border-color: var(--luv-pink); } .cards section:nth-child(3n) { border-color: var(--luv-plum); }
  .cards h2 { font-size: 1.2rem; margin: 0 0 8px; }
  .cards p { margin: 0; font-size: .98rem; }
  .rules { counter-reset: rule; margin-block-start: 28px; }
  .rules li { counter-increment: rule; display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding-block: 18px; border-block-end: 3px dotted var(--luv-mint); }
  .rules li::before { content: counter(rule, decimal-leading-zero); font: 800 1.9rem/1 var(--luv-display); color: var(--luv-pink); }
  .rules h2 { font-size: 1.2rem; margin: 0 0 4px; }
  .rules p { margin: 0; }
  .faqgroup { margin-block-start: 34px; }
  .faqgroup > h2 { display: inline-block; background: var(--luv-pink); color: #fff; padding: 10px 22px; border-radius: 999px; font-size: 1.2rem; margin-block-end: 16px; }
  .faqgroup.asked { padding-block: 0; max-inline-size: none; }
  .lost { text-align: center; padding-block: 70px 10px; }
  .lost img { inline-size: 240px; margin-inline: auto; margin-block-end: 20px; }
  @media (max-width: 1020px) {
    .perch__buy { inline-size: 190px; }
    .perch__nav a { padding-inline: 10px; font-size: .95rem; }
    .litter, .tales { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ritual__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 22px; }
    .foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .foot__home { text-align: start; } .foot__home img { margin-inline-start: 0; }
  }
  @media (max-width: 780px) {
    body { font-size: 16px; }
    .perch { padding-inline: 16px 12px; flex-wrap: wrap; border-radius: 36px; }
    .perch__burger { display: grid; place-items: center; inline-size: 46px; block-size: 46px; border-radius: 50%; background: var(--luv-mint); order: 3; cursor: pointer; }
    .perch__burger span, .perch__burger span::before, .perch__burger span::after { content: ""; display: block; inline-size: 20px; block-size: 3px; border-radius: 3px; background: var(--luv-plum-deep); position: relative; }
    .perch__burger span::before { position: absolute; inset-block-start: -7px; } .perch__burger span::after { position: absolute; inset-block-start: 7px; }
    .perch__buy { margin-inline-start: auto; order: 2; inline-size: 168px; }
    .perch__nav { display: none; order: 4; flex-basis: 100%; flex-direction: column; margin: 8px 0 6px; }
    .perch__nav a { text-align: center; font-size: 1.05rem; }
    .perch__flip:checked ~ .perch__nav { display: flex; }
    .perch__logo img { inline-size: 70px; margin-block: -14px; }
    .rescue { padding-block: 54px 44px; }
    .rescue__grid, .pet, .more, .primer__cols, .tub__grid, .ways__grid, .tagcard, .cards { grid-template-columns: minmax(0, 1fr); }
    .rescue__scene { order: -1; max-inline-size: 420px; margin-inline: auto; }
    .rescue__logo { inline-size: 210px; margin-inline: auto; }
    .rescue__text { text-align: center; } .rescue__lede { margin-inline: auto; }
    .panel--wide { grid-template-columns: 1fr; grid-column: auto; border-radius: 44px; }
    .panel--right { border-radius: 90px 90px 28px 28px; }
    .hints, .notes { grid-template-columns: minmax(0, 1fr); }
    .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .chapter { grid-template-columns: 96px 1fr; border-radius: 60px 30px 30px 60px; padding-inline-end: 20px; }
    .chapter b { inline-size: 96px; block-size: 96px; font-size: 1.05rem; }
    .ifthen div { grid-template-columns: 1fr; }
    .foot { clip-path: polygon(0 0, 100% 46px, 100% 100%, 0 100%); padding-block-start: 96px; }
    .way { aspect-ratio: 4 / 3; border-radius: 30px; } .way span { font-size: 1.05rem; padding: 11px 16px; }
    .linehead { min-block-size: 240px; border-radius: 32px; }
    .buyband { border-radius: 40px 40px 40px 10px; }
  }
  @media (max-width: 560px) {
    .litter, .tales, .ritual__steps { grid-template-columns: minmax(0, 1fr); }
    .foot__cols { grid-template-columns: minmax(0, 1fr); }
    .crate { max-inline-size: 420px; margin-inline: auto; inline-size: 100%; }
    .album__strip { gap: 6px; } .album__stage { border-radius: 30px; }
    .rules li { grid-template-columns: 46px 1fr; }
  }
}