:root {
  color-scheme: light;
  --ink: #172d3b;
  --teal: #087e75;
  --teal-dark: #075d58;
  --pink: #f7d4df;
  --yellow: #ffe991;
  --paper: #fffdf2;
  --line: #173c51;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font: 17px/1.55 Verdana, Arial, sans-serif;
  background-color: #e9f1d1;
  background-image: radial-gradient(#97b99e 1px, transparent 1px), radial-gradient(#97b99e 1px, transparent 1px);
  background-position: 0 0, 9px 9px;
  background-size: 18px 18px;
}
a { color: #064fc4; }
a:hover { color: #bd164d; }
.page-shell {
  width: min(920px, calc(100% - 28px));
  margin: 25px auto;
  border: 3px ridge #d7d4b4;
  background: var(--paper);
  box-shadow: 7px 8px 0 #31555235;
}
.site-header {
  padding: 14px clamp(18px, 5vw, 46px) 27px;
  color: white;
  text-align: center;
  background: linear-gradient(135deg, #0b766d, #315ea0 55%, #773e88);
  border-bottom: 4px ridge #b2e0cb;
}
.tiny-top { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; opacity: .9; }
.eyebrow { margin: 26px 0 4px; color: #fff29c; font-size: .83rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
h1 { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(2.45rem, 8vw, 4.6rem); line-height: 1.05; text-shadow: 3px 3px #213460; }
.tagline { max-width: 600px; margin: 13px auto 18px; }
.rainbow { height: 8px; border: 1px solid #fff8; background: linear-gradient(90deg, #ff6c6c 0 16.6%, #ffc857 16.6% 33.2%, #ffff8b 33.2% 49.8%, #75df8e 49.8% 66.4%, #70d9ec 66.4% 83%, #d8a0ff 83%); }
.top-nav { display: flex; justify-content: space-between; text-align: left; }
.top-nav a { color: white; }
.compact-header .eyebrow { margin-top: 23px; }
main { padding: clamp(20px, 5vw, 42px); }
.panel { border: 2px ridge #bfbd9e; background: #fff9dc; padding: 15px 19px; }
.welcome h2 { margin: 0 0 5px; font: bold 1.35rem Georgia, serif; }
.welcome p { margin: 0; }
.portal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 23px 0; }
.portal-grid.two-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.portal-card { min-height: 245px; display: flex; flex-direction: column; align-items: center; padding: 18px 15px; text-align: center; text-decoration: none; border: 3px outset #d3cbb4; color: var(--ink); background: #f2f8e9; }
.portal-card:hover { transform: translateY(-2px); color: var(--ink); border-style: inset; background: #fff4c6; }
.dogs-card { background: #edf8e7; }
.directory-card { background: #f1edff; }
.home-card { background: #fff0f4; }
.card-icon { font-size: 2.7rem; line-height: 1.2; }
.card-label { margin: 8px 0 6px; font: bold 1.25rem Georgia, serif; color: #153a63; }
.card-copy { flex: 1; font-size: .9rem; }
.button-link { display: inline-block; margin-top: 16px; padding: 6px 10px; color: #073f91; font-weight: bold; background: linear-gradient(#fff, #dfe9fb); border: 2px outset #b7c5dd; }
.notice { margin-top: 19px; text-align: center; }
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 235px), 1fr)); gap: 17px; }
.photo-card { margin: 0; overflow: hidden; border: 3px ridge #c7c1a5; background: #f4f5e7; box-shadow: 3px 4px 0 #24394420; }
.photo-card img { display: block; width: 100%; height: 230px; object-fit: cover; background: #e8e3d3; }
.photo-card figcaption { padding: 12px 14px 14px; }
.photo-card figcaption strong, .photo-card figcaption span { display: block; }
.photo-card figcaption strong { color: #153a63; font: bold 1.1rem Georgia, serif; }
.photo-card figcaption span { margin-top: 3px; font-size: .9rem; }
.image-credit { text-align: center; font-size: .78rem; }
.link-list { display: grid; gap: 12px; margin-top: 20px; }
.directory-link { display: grid; grid-template-columns: 42px 1fr 24px; align-items: center; gap: 12px; padding: 13px 16px; color: var(--ink); text-decoration: none; background: #eef5e7; border: 3px outset #d3cbb4; }
.directory-link:hover { color: var(--ink); background: #fff4c6; border-style: inset; }
.directory-link > span:first-child { font-size: 1.75rem; text-align: center; }
.directory-link strong, .directory-link small { display: block; }
.directory-link strong { color: #124a88; font: bold 1.15rem Georgia, serif; }
.directory-link small { margin-top: 3px; font-size: .86rem; }
.site-footer { padding: 11px 14px 15px; text-align: center; font-size: .8rem; border-top: 2px groove #d2cbb0; background: #f2f0dc; }
.site-footer p { margin: 2px 0 5px; }
@media (max-width: 680px) {
  .page-shell { margin: 10px auto; }
  .tiny-top { font-size: 10px; }
  .portal-grid { grid-template-columns: 1fr; }
  .portal-card { min-height: 200px; }
  .photo-card img { height: 250px; }
  main { padding: 19px; }
}