@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"; }
  .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); }
  .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, .tub__grid, .ways__grid { 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); }
    .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; }
  }
}
@layer pages {
  table { border-collapse: separate; border-spacing: 0; inline-size: 100%; }
  th, td { text-align: start; vertical-align: top; padding: 14px 16px; }
  .guide { padding-block: 84px 0; }
  .guide > h2 { text-align: center; }
  .guide__intro { text-align: center; max-inline-size: 720px; margin-inline: auto; margin-block: 16px 34px; font-size: 1.12rem; color: var(--luv-soft); }
  .guide__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 40px; }
  .guide__body section { border-block-start: 4px solid var(--luv-mint); padding-block-start: 18px; }
  .guide__body section:nth-child(4), .guide__body section:last-child { grid-column: 1 / -1; }
  .guide h3 { color: var(--luv-plum-deep); margin-block-end: 10px; font-size: 1.32rem; }
  .guide__steps { margin: 0; padding: 0; list-style: none; counter-reset: gs; }
  .guide__steps li { counter-increment: gs; position: relative; padding-inline-start: 44px; margin-block-end: 10px; }
  .guide__steps li::before { content: counter(gs); position: absolute; inset-inline-start: 0; inset-block-start: 0; inline-size: 30px; block-size: 30px; border-radius: 50%; background: var(--luv-teal); color: #fff; font: 800 1rem/30px var(--luv-display); text-align: center; }
  .guide__table { border: 4px solid var(--luv-teal); border-radius: 26px; overflow: hidden; font-size: .97rem; }
  .guide__table th { background: var(--luv-teal); color: #fff; font-family: var(--luv-display); }
  .guide__table tbody tr:nth-child(even) td { background: var(--luv-foam); }
  .guide__table td:first-child a { font: 800 1.05rem/1.2 var(--luv-display); }
  .guide__table td:last-child { font: 800 1.1rem/1.3 var(--luv-display); color: var(--luv-plum-deep); white-space: nowrap; }
  .guide__check { margin-block-start: 34px; background: var(--luv-plum); color: #fff; border-radius: 40px 40px 40px 10px; padding: 28px clamp(20px, 4vw, 40px); }
  .guide__check h3 { color: #fff; }
  .guide__check ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 24px; }
  .guide__check li { padding-inline-start: 34px; position: relative; }
  .guide__check li::before { content: "\2713"; position: absolute; inset-inline-start: 0; inset-block-start: 1px; inline-size: 24px; block-size: 24px; border-radius: 7px; background: #fff; color: var(--luv-pink); font-weight: 800; text-align: center; line-height: 24px; }
  .sidenote { margin-block-start: 26px; padding: 18px 22px; border-inline-start: 8px solid var(--luv-pink); background: var(--luv-foam); border-radius: 0 22px 22px 0; }
  .cert { position: relative; margin-block-start: 34px; border: 5px double var(--luv-plum); border-radius: 18px; padding: 44px clamp(18px, 5vw, 54px) 30px; background: #fffdf8; outline: 12px solid var(--luv-mint); outline-offset: 0; text-align: center; }
  .cert__seal { position: absolute; inset-block-start: -44px; inset-inline: 0; margin: 0; }
  .cert__seal img { inline-size: 96px; margin-inline: auto; }
  .cert h2 { font-size: 1.7rem; margin: 6px 0 20px; letter-spacing: .04em; text-transform: uppercase; }
  .cert dl { margin: 0; text-align: start; }
  .cert dl div { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding-block: 11px; border-block-end: 2px dotted #cdbfd6; }
  .cert dt { font: 700 .82rem/1.6 var(--luv-text); letter-spacing: .12em; text-transform: uppercase; color: var(--luv-soft); }
  .cert dd { margin: 0; font: 700 1.12rem/1.35 var(--luv-display); color: var(--luv-ink); }
  .cert__sign { margin: 22px 0 0; font: 800 1.5rem/1 var(--luv-display); color: var(--luv-pink); transform: rotate(-3deg); }
  .twofur { display: grid; grid-template-columns: 1fr 1fr; margin-block-start: 46px; border-radius: 34px; overflow: hidden; }
  .twofur > div { padding: 26px; }
  .twofur h2 { margin: 0 0 12px; font-size: 1.3rem; }
  .twofur__was { background: #e9e2ee; } .twofur__was h2 { color: var(--luv-soft); }
  .twofur__now { background: var(--luv-pink); color: #fff; } .twofur__now h2 { color: #fff; }
  .twofur li { padding-block: 7px; border-block-end: 1px solid rgb(255 255 255 / .5); }
  .tagline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-block-start: 60px; padding-block-start: 30px; border-block-start: 12px solid var(--luv-teal); border-radius: 6px; }
  .tagline__tag { position: relative; background: var(--luv-foam); border: 4px solid var(--luv-plum); border-radius: 40px 40px 120px 120px; padding: 46px 20px 40px; text-align: center; display: flex; flex-direction: column; align-items: center; }
  .tagline__tag::before { content: ""; position: absolute; inset-block-start: -40px; inset-inline-start: calc(50% - 4px); inline-size: 8px; block-size: 52px; background: var(--luv-teal-deep); border-radius: 4px; }
  .tagline__tag::after { content: ""; position: absolute; inset-block-start: 12px; inset-inline-start: calc(50% - 11px); inline-size: 22px; block-size: 22px; border-radius: 50%; background: #fff; border: 4px solid var(--luv-plum); }
  .tagline__tag:nth-child(2) { border-color: var(--luv-pink); } .tagline__tag:nth-child(2)::after { border-color: var(--luv-pink); }
  .tagline__tag:nth-child(3) { border-color: var(--luv-teal-deep); } .tagline__tag:nth-child(3)::after { border-color: var(--luv-teal-deep); }
  .tagline__tag h2 { margin: 0 0 10px; font-size: 1.3rem; }
  .tagline__tag p { font-size: .97rem; }
  .tagline__tag .pill, .tagline__where { margin-block-start: auto; }
  .tagline__where { font: 800 1rem/1.3 var(--luv-display); color: var(--luv-teal-deep); margin-block-end: 0; }
  .askwell { margin-block-start: 40px; }
  .askwell ol { padding-inline-start: 1.3em; margin: 0; } .askwell li { margin-block: 6px; padding-inline-start: 6px; } .askwell li::marker { font: 800 1.1rem var(--luv-display); color: var(--luv-pink); }
  .postcard { margin-block-start: 44px; display: grid; grid-template-columns: 1.2fr 1fr; background: #fffdf8; border: 3px solid var(--luv-ink); border-radius: 10px; box-shadow: 10px 10px 0 var(--luv-mint); }
  .postcard > div { padding: 26px; }
  .postcard__note h2 { margin: 0 0 10px; font-size: 1.3rem; }
  .postcard__to { border-inline-start: 3px dashed var(--luv-soft); }
  .postcard__to img { inline-size: 84px; margin-inline-start: auto; margin-block-end: 14px; border: 3px dotted var(--luv-pink); padding: 6px; border-radius: 8px; }
  .postcard__to address { font-style: normal; font: 600 1.05rem/2 var(--luv-text); background: repeating-linear-gradient(transparent 0 calc(2em - 2px), #cdbfd6 calc(2em - 2px) 2em); }
  .pawpath { list-style: none; padding: 0; margin: 40px 0 46px; display: grid; gap: 22px; }
  .pawpath li { inline-size: min(100%, 560px); background: #fff; border: 4px solid var(--luv-teal); border-radius: 30px 30px 30px 6px; padding: 20px 24px; position: relative; }
  .pawpath li:nth-child(even) { margin-inline-start: auto; border-color: var(--luv-pink); border-radius: 30px 30px 6px 30px; }
  .pawpath li + li::before { content: "\2665  \2665"; white-space: pre; position: absolute; inset-block-start: -27px; inset-inline-start: 44%; font-size: 1rem; color: var(--luv-pink); transform: rotate(-12deg); }
  .pawpath__who { display: inline-block; font: 800 .8rem/1 var(--luv-display); letter-spacing: .06em; text-transform: uppercase; background: var(--luv-plum); color: #fff; padding: 7px 12px; border-radius: 999px; }
  .pawpath h2 { margin: 10px 0 6px; font-size: 1.3rem; } .pawpath p { margin: 0; }
  .who, .route { border: 3px solid var(--luv-plum); border-radius: 22px; overflow: hidden; margin-block-start: 14px; }
  .who th, .route th { background: var(--luv-plum); color: #fff; font-family: var(--luv-display); }
  .who td, .route td { border-block-start: 2px solid var(--luv-mint); }
  .who td:nth-child(2) { font-weight: 700; color: var(--luv-plum-deep); } .route td:first-child { font-weight: 700; }
  .bathcheck { margin-block-start: 34px; background: var(--luv-mint); border-radius: 34px; padding: 26px clamp(18px, 4vw, 34px); }
  .bathcheck h2 { margin: 0 0 14px; font-size: 1.4rem; color: var(--luv-plum-deep); }
  .bathcheck label { display: flex; gap: 14px; align-items: flex-start; padding-block: 9px; cursor: pointer; font-weight: 500; }
  .bathcheck input { appearance: none; flex: none; inline-size: 28px; block-size: 28px; border-radius: 9px; border: 3px solid var(--luv-plum); background: #fff; margin: 0; display: grid; place-items: center; }
  .bathcheck input:checked { background: var(--luv-plum); }
  .bathcheck input:checked::after { content: "\2713"; color: #fff; font-weight: 800; }
  .bathcheck input:checked + span { text-decoration: line-through; color: var(--luv-soft); }
  .ledger { display: grid; grid-template-columns: 1fr 1.25fr; gap: 20px; margin-block-start: 34px; }
  .ledger > div { border-radius: 30px; padding: 24px; }
  .ledger h2 { margin: 0 0 12px; font-size: 1.3rem; }
  .ledger__on { background: var(--luv-foam); border: 3px solid var(--luv-teal); }
  .ledger__off { background: #fdf0f8; border: 3px dashed var(--luv-pink); } .ledger__off h2 { color: var(--luv-berry); }
  .ledger li { position: relative; padding-inline-start: 30px; margin-block: 9px; }
  .ledger__on li::before { content: "\2713"; position: absolute; inset-inline-start: 0; color: var(--luv-teal-deep); font-weight: 800; }
  .ledger__off li::before { content: "\2715"; position: absolute; inset-inline-start: 0; color: var(--luv-pink); font-weight: 800; }
  .smallwords { margin: 14px 0 0; }
  .smallwords div { display: grid; grid-template-columns: 220px 1fr; gap: 20px; padding-block: 16px; border-block-end: 3px dotted var(--luv-mint); }
  .smallwords dt { font: 800 1.08rem/1.3 var(--luv-display); color: var(--luv-plum-deep); } .smallwords dd { margin: 0; }
  .doorrules { list-style: none; padding: 0; margin: 34px 0 0; counter-reset: dr; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .doorrules li { counter-increment: dr; background: #fff; border: 4px solid var(--luv-teal); border-radius: 12px 40px 12px 40px; padding: 22px; display: flex; flex-direction: column; }
  .doorrules li:nth-child(3n+2) { border-color: var(--luv-plum); } .doorrules li:nth-child(3n) { border-color: var(--luv-pink); }
  .doorrules li::before { content: "Rule " counter(dr); font: 800 .85rem/1 var(--luv-display); letter-spacing: .08em; text-transform: uppercase; color: var(--luv-pink); }
  .doorrules h2 { margin: 8px 0 8px; font-size: 1.25rem; }
  .doorrules__short { margin: auto 0 0; background: var(--luv-mint); border-radius: 14px; padding: 10px 14px; font-size: .96rem; }
  .clock { display: flex; flex-wrap: wrap; gap: 10px; margin-block: 26px 10px; }
  .hour { margin-block-start: 34px; scroll-margin-top: 20px; }
  .hour > h2 { margin: 0 0 14px; font-size: 1.5rem; display: flex; align-items: center; gap: 12px; }
  .hour > h2::before { content: ""; inline-size: 18px; block-size: 18px; border-radius: 50%; background: var(--luv-pink); box-shadow: 0 0 0 5px var(--luv-mint); }
  .hour details { border-block-end: 3px solid var(--luv-mint); padding-block: 4px; }
  .hour summary { font: 700 1.1rem/1.35 var(--luv-display); padding-block: 14px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 14px; }
  .hour summary::-webkit-details-marker { display: none; }
  .hour summary::after { content: "+"; color: var(--luv-teal-deep); font-size: 1.5rem; line-height: 1; }
  .hour details[open] summary::after { content: "\2212"; }
  @media (max-width: 780px) {
    .guide__body, .ledger, .doorrules, .tagline, .postcard, .twofur { grid-template-columns: minmax(0, 1fr); }
    .guide__check ul { grid-template-columns: minmax(0, 1fr); }
    .tagline { gap: 56px; } .tagline__tag { border-radius: 40px 40px 80px 80px; }
    .postcard__to { border-inline-start: 0; border-block-start: 3px dashed var(--luv-soft); }
    .cert dl div, .smallwords div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .stackable thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
    .stackable, .stackable tbody, .stackable tr, .stackable td { display: block; inline-size: 100%; }
    .stackable tr { padding: 12px 0; border-block-end: 4px solid var(--luv-mint); }
    .stackable tr:last-child { border-block-end: 0; }
    .stackable td { padding: 5px 16px; border: 0 !important; background: none !important; }
    .stackable td::before { content: attr(data-th); display: block; font: 700 .72rem/1.5 var(--luv-text); letter-spacing: .1em; text-transform: uppercase; color: var(--luv-soft); }
  }
}