.hlm-directory,
.hlm-profile-wrap {
  width: min(calc(100% - 36px), 1180px);
  margin-inline: auto;
  padding-block: clamp(70px, 9vw, 120px);
}

.hlm-directory > h1 {
  margin: 0 0 45px;
  text-align: center;
  font-size: clamp(2.5rem, 6vw, 4.8rem);
}

.hlm-dog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.hlm-litter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.hlm-litter-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid #ebded9;
  box-shadow: 0 16px 45px rgba(55, 40, 34, .08);
}

.hlm-litter-photo img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.hlm-litter-card-body { padding: 28px; }
.hlm-litter-card h2 { margin: 0 0 16px; font-size: 1.8rem; }
.hlm-litter-parents a { color: inherit; }
.hlm-litter-copy > :last-child { margin-bottom: 0; }
.hlm-litter-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 22px; }
.hlm-litter-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; }

.hlm-dog-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid #ebded9;
  box-shadow: 0 16px 45px rgba(55, 40, 34, .08);
}

.hlm-dog-photo {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  color: #746963;
  background: #f7eeeb;
  text-decoration: none;
}

.hlm-dog-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hlm-dog-card-body { padding: 24px; }
.hlm-dog-card h2 { margin: 0 0 8px; font-size: 1.8rem; }
.hlm-dog-card h2 a { color: inherit; text-decoration: none; }
.hlm-status { margin: 0 0 8px; color: #a64f37; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.hlm-traits { color: #665d59; }
.hlm-price { font-size: 1.1rem; font-weight: 700; }
.hlm-card-link { color: #2e2724; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.hlm-empty { max-width: 720px; margin: 0 auto; padding: 50px 30px; text-align: center; background: #fcedea; }

.hlm-button {
  display: inline-block;
  padding: 13px 22px;
  color: #fff;
  background: #2e2724;
  text-decoration: none;
  border-radius: 3px;
}

.hlm-dog-page {
  --hlm-ink: var(--hl-ink, #302a27);
  --hlm-muted: var(--hl-muted, #665f5b);
  --hlm-action: var(--hl-action, #3e594a);
  --hlm-action-hover: var(--hl-action-hover, #2f4639);
  --hlm-rust: var(--hl-rust, #8e4d49);
  --hlm-cream: var(--hl-cream, #fcf9f5);
  --hlm-mist: var(--hl-mist, #f1f5f0);
  --hlm-blush: var(--hl-blush-light, #fbf4f2);
  --hlm-line: var(--hl-line, rgba(74, 55, 47, .14));
  background: var(--hlm-cream);
  color: var(--hlm-ink);
}

.hlm-profile-page { overflow: clip; }
.hlm-profile-shell { width: min(calc(100% - 64px), 1180px); margin-inline: auto; }
.hlm-profile-hero { padding: clamp(66px, 8vw, 112px) 0 clamp(84px, 10vw, 132px); background: linear-gradient(145deg, #fff 0%, var(--hlm-cream) 68%, var(--hlm-blush) 100%); }
.hlm-profile-back { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 34px; color: var(--hlm-action-hover); font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.hlm-profile-back span { font-size: 1rem; transition: transform .18s ease; }
.hlm-profile-back:hover span,
.hlm-profile-back:focus-visible span { transform: translateX(-3px); }

.hlm-profile-layout { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(340px, .82fr); grid-template-areas: "media identity" "media details"; align-items: start; gap: 0 clamp(48px, 7vw, 92px); }
.hlm-profile-identity { grid-area: identity; align-self: end; padding-top: 12px; }
.hlm-profile-media { grid-area: media; min-width: 0; }
.hlm-profile-details { grid-area: details; }
.hlm-profile-status,
.hlm-profile-kicker { margin: 0 0 12px; color: var(--hlm-rust); font-size: .71rem; font-weight: 800; letter-spacing: .15em; line-height: 1.35; text-transform: uppercase; }
.hlm-profile-identity h1 { max-width: 620px; margin: 0; font-size: clamp(3.5rem, 6.7vw, 6.5rem); font-weight: 500; letter-spacing: -.045em; line-height: .91; overflow-wrap: anywhere; text-wrap: balance; }
.hlm-profile-lede { max-width: 560px; margin: 22px 0 0; color: var(--hlm-muted); font-size: 1.07rem; line-height: 1.72; }

.hlm-profile-main-photo { position: relative; width: 100%; aspect-ratio: 5 / 4; display: block; overflow: hidden; padding: 0; cursor: zoom-in; background: var(--hlm-mist); border: 0; border-radius: 26px; box-shadow: 0 22px 56px rgba(64, 43, 35, .12); }
.hlm-profile-main-photo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.hlm-photo-expand { position: absolute; right: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 9px; padding: 10px 13px; color: #fff; background: rgba(38, 56, 47, .9); border-radius: 999px; font-size: .69rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; backdrop-filter: blur(8px); }
.hlm-photo-expand b { min-width: 24px; height: 24px; display: grid; place-items: center; color: var(--hlm-action-hover); background: #fff; border-radius: 50%; font-size: .7rem; }
.hlm-profile-thumbnails { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.hlm-profile-thumbnails button { aspect-ratio: 1; overflow: hidden; padding: 0; cursor: pointer; background: var(--hlm-mist); border: 2px solid transparent; border-radius: 13px; opacity: .72; transition: border-color .18s ease, opacity .18s ease, transform .18s ease; }
.hlm-profile-thumbnails button:hover,
.hlm-profile-thumbnails button:focus-visible,
.hlm-profile-thumbnails button.is-active { border-color: var(--hlm-action); opacity: 1; transform: translateY(-2px); }
.hlm-profile-thumbnails img { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--hlm-mist); }
.hlm-profile-photo-placeholder { min-height: 540px; display: grid; place-items: center; align-content: center; gap: 12px; color: var(--hlm-muted); background: var(--hlm-mist); border-radius: 26px; }
.hlm-profile-photo-placeholder span { font-size: 3rem; color: var(--hlm-rust); }

.hlm-profile-availability { margin: 30px 0 0; padding: 20px 22px; background: #fff; border: 1px solid var(--hlm-line); border-radius: 16px; }
.hlm-profile-availability p { margin: 0; color: var(--hlm-muted); line-height: 1.6; }
.hlm-profile-availability .hlm-profile-price { margin: 0 0 7px; color: var(--hlm-ink); font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif; font-size: 1.65rem; font-weight: 600; line-height: 1.1; }
.hlm-profile-memorial-message { position: relative; margin: 27px 0 0; padding: 24px 25px 24px 52px; color: #55495d; background: #f4f0f5; border: 1px solid rgba(91,72,103,.13); border-radius: 17px; }
.hlm-profile-memorial-message > span { position: absolute; top: 11px; left: 18px; color: #8a7198; font-family: Georgia, serif; font-size: 3.2rem; line-height: 1; }
.hlm-profile-memorial-message p { margin: 0; font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif; font-size: 1.12rem; font-style: italic; line-height: 1.68; }
.hlm-dog-page--remembered { --hlm-action: #685777; --hlm-action-hover: #51415f; --hlm-rust: #79658b; --hlm-mist: #f0edf2; --hlm-blush: #f6f1f5; }
.hlm-dog-page--remembered .hlm-profile-hero { background: linear-gradient(145deg, #fff 0%, #f8f5f7 70%, #f1ebf3 100%); }
.hlm-dog-page--remembered .hlm-profile-availability { background: #faf8fb; border-color: rgba(91,72,103,.14); }
.hlm-profile-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; margin: 26px 0 0; padding: 7px 0; border-block: 1px solid var(--hlm-line); }
.hlm-profile-fact { min-width: 0; padding: 15px 0; border-bottom: 1px solid var(--hlm-line); }
.hlm-profile-fact:nth-last-child(-n+2) { border-bottom: 0; }
.hlm-profile-fact dt { margin: 0 0 5px; color: var(--hlm-muted); font-size: .69rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.hlm-profile-fact dd { margin: 0; color: var(--hlm-ink); font-weight: 650; line-height: 1.45; overflow-wrap: anywhere; }
.hlm-profile-fact a { color: var(--hlm-action-hover); text-decoration-color: rgba(47, 70, 57, .32); text-underline-offset: 3px; }

.hlm-profile-story { margin-top: 34px; }
.hlm-profile-story h2,
.hlm-profile-home h2 { margin: 0 0 15px; font-size: clamp(2rem, 3vw, 2.8rem); font-weight: 500; letter-spacing: -.025em; line-height: 1; text-wrap: balance; }
.hlm-profile-story > div { color: var(--hlm-muted); font-size: 1.03rem; line-height: 1.78; }
.hlm-profile-story > div > :first-child { margin-top: 0; }
.hlm-profile-story > div > :last-child { margin-bottom: 0; }
.hlm-profile-home { margin-top: 38px; padding: 28px; background: var(--hlm-mist); border-radius: 20px; }
.hlm-home-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hlm-home-detail { padding: 15px; background: rgba(255, 255, 255, .8); border-radius: 12px; }
.hlm-home-detail span,
.hlm-home-detail strong { display: block; }
.hlm-home-detail span { margin-bottom: 5px; color: var(--hlm-muted); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hlm-home-detail strong { font-size: .94rem; line-height: 1.4; }
.hlm-ideal-home { margin-top: 14px; padding-top: 17px; border-top: 1px solid rgba(74, 55, 47, .14); }
.hlm-ideal-home strong { font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; }
.hlm-ideal-home p { margin: 7px 0 0; color: var(--hlm-muted); line-height: 1.65; }

.hlm-profile-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 34px; }
.hlm-profile-button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 12px 20px; border: 1px solid var(--hlm-action); border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-align: center; text-decoration: none; text-transform: uppercase; transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease; }
.hlm-profile-button:hover { transform: translateY(-2px); }
.hlm-profile-button--primary { color: #fff; background: var(--hlm-action); box-shadow: 0 10px 24px rgba(47, 70, 57, .18); }
.hlm-profile-button--primary:hover,
.hlm-profile-button--primary:focus-visible { color: #fff; background: var(--hlm-action-hover); border-color: var(--hlm-action-hover); }
.hlm-profile-button--secondary { color: var(--hlm-action-hover); background: transparent; border-color: rgba(47, 70, 57, .35); }
.hlm-profile-button--secondary:hover,
.hlm-profile-button--secondary:focus-visible { color: #fff; background: var(--hlm-action-hover); border-color: var(--hlm-action-hover); }

.hlm-profile-related { padding: clamp(78px, 9vw, 120px) 0; background: #fff; }
.hlm-related-heading { display: flex; align-items: end; justify-content: space-between; gap: 36px; margin-bottom: 38px; }
.hlm-related-heading h2 { max-width: 720px; margin: 0; font-size: clamp(2.65rem, 5vw, 4.5rem); font-weight: 500; letter-spacing: -.035em; line-height: .96; text-wrap: balance; }
.hlm-related-heading > a { flex: 0 0 auto; color: var(--hlm-action-hover); font-size: .73rem; font-weight: 800; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.hlm-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.hlm-related-card { min-width: 0; overflow: hidden; color: var(--hlm-ink); background: var(--hlm-cream); border: 1px solid var(--hlm-line); border-radius: 20px; text-decoration: none; transition: box-shadow .2s ease, transform .2s ease; }
.hlm-related-card:hover { color: var(--hlm-ink); box-shadow: 0 18px 42px rgba(64, 43, 35, .1); transform: translateY(-3px); }
.hlm-related-photo { display: grid; place-items: center; aspect-ratio: 4 / 3; color: var(--hlm-muted); background: var(--hlm-mist); }
.hlm-related-photo img { width: 100%; height: 100%; object-fit: cover; }
.hlm-related-copy { display: block; padding: 22px; }
.hlm-related-copy small,
.hlm-related-copy strong,
.hlm-related-copy > span { display: block; }
.hlm-related-copy small { margin-bottom: 9px; color: var(--hlm-rust); font-size: .65rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.hlm-related-copy strong { font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif; font-size: 1.75rem; font-weight: 500; line-height: 1.05; overflow-wrap: anywhere; }
.hlm-related-copy > span { margin-top: 18px; color: var(--hlm-action-hover); font-size: .69rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.hlm-private-preview { display: flex; gap: 8px; margin: 24px 0 -34px; padding: 13px 16px; color: #70402f; background: #f8e9e4; border-left: 4px solid var(--hlm-rust); border-radius: 8px; }

.hlm-lightbox[hidden] { display: none; }
.hlm-lightbox { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 28px; }
.hlm-lightbox-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; background: rgba(19, 22, 20, .94); border: 0; }
.hlm-lightbox-panel { position: relative; z-index: 1; width: min(100%, 1200px); height: min(90vh, 900px); display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; align-items: center; gap: 12px; }
.hlm-lightbox figure { min-width: 0; max-height: 90vh; display: grid; grid-template-rows: minmax(0, 1fr) auto; margin: 0; }
.hlm-lightbox figure img { width: 100%; height: 100%; max-height: calc(90vh - 52px); object-fit: contain; }
.hlm-lightbox figcaption { display: flex; justify-content: space-between; gap: 24px; padding: 12px 4px 0; color: #fff; font-size: .84rem; }
.hlm-lightbox figcaption span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hlm-lightbox figcaption b { flex: 0 0 auto; }
.hlm-lightbox button { color: #fff; cursor: pointer; background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .3); }
.hlm-lightbox-nav { width: 50px; height: 50px; border-radius: 50%; font-size: 1.2rem; }
.hlm-lightbox-close { position: absolute; top: 0; right: 0; z-index: 2; width: 44px; height: 44px; border-radius: 50%; font-size: 1.7rem; line-height: 1; }
.hlm-lightbox button:hover,
.hlm-lightbox button:focus-visible { background: rgba(255, 255, 255, .24); outline: 2px solid #fff; outline-offset: 3px; }
body.hlm-lightbox-open { overflow: hidden; }

@media (max-width: 900px) {
  .hlm-dog-grid { grid-template-columns: 1fr 1fr; }
  .hlm-litter-grid { grid-template-columns: 1fr; }
  .hlm-profile-layout { grid-template-columns: 1fr; grid-template-areas: "identity" "media" "details"; gap: 30px; }
  .hlm-profile-identity { padding-top: 0; }
  .hlm-profile-identity h1 { max-width: 780px; font-size: clamp(3.6rem, 10vw, 6rem); }
  .hlm-profile-main-photo img { aspect-ratio: 5 / 4; }
  .hlm-profile-details { max-width: 760px; }
  .hlm-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .hlm-profile-shell { width: min(calc(100% - 36px), 1180px); }
  .hlm-profile-hero { padding: 42px 0 74px; }
  .hlm-profile-back { margin-bottom: 28px; }
  .hlm-profile-layout { gap: 24px; }
  .hlm-profile-identity h1 { font-size: clamp(3rem, 15vw, 4.5rem); line-height: .93; }
  .hlm-profile-lede { margin-top: 16px; font-size: 1rem; }
  .hlm-profile-main-photo { border-radius: 20px; }
  .hlm-profile-main-photo { aspect-ratio: 4 / 3; }
  .hlm-photo-expand { right: 11px; bottom: 11px; }
  .hlm-profile-thumbnails { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-top: 8px; }
  .hlm-profile-thumbnails button { border-radius: 9px; }
  .hlm-profile-availability { margin-top: 0; }
  .hlm-profile-facts { grid-template-columns: 1fr; }
  .hlm-profile-fact:nth-last-child(-n+2) { border-bottom: 1px solid var(--hlm-line); }
  .hlm-profile-fact:last-child { border-bottom: 0; }
  .hlm-home-grid { grid-template-columns: 1fr; }
  .hlm-profile-home { padding: 24px 20px; }
  .hlm-profile-actions { display: grid; }
  .hlm-profile-button { width: 100%; }
  .hlm-profile-related { padding: 70px 0; }
  .hlm-related-heading { display: block; }
  .hlm-related-heading > a { display: inline-block; margin-top: 20px; }
  .hlm-related-grid { grid-template-columns: 1fr; }
  .hlm-lightbox { padding: 14px; }
  .hlm-lightbox-panel { height: 94vh; grid-template-columns: 42px minmax(0, 1fr) 42px; gap: 5px; }
  .hlm-lightbox-nav { width: 40px; height: 40px; }
  .hlm-lightbox figcaption span { display: none; }
  .hlm-lightbox figcaption { justify-content: center; }
  .hlm-dog-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .hlm-profile-main-photo img,
  .hlm-profile-back span,
  .hlm-profile-button,
  .hlm-related-card,
  .hlm-profile-thumbnails button { transition: none; }
}