/* Chaotic Serendipity CSS File */

/*** Fonts ***/
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,600;0,700;1,600&family=Work+Sans:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@font-face{font-display:swap;font-family:'OpenDyslexic';font-style:normal;font-weight:400;src:url(https://cdn.jsdelivr.net/fontsource/fonts/opendyslexic@latest/latin-400-normal.woff2) format('woff2'),url(https://cdn.jsdelivr.net/fontsource/fonts/opendyslexic@latest/latin-400-normal.woff) format('woff')}


:root {
  --font-voice: 'Fraunces', Georgia, serif;
  --font-sans: 'Work Sans', system-ui, sans-serif;
  --font-opendyslexic: 'OpenDyslexic', sans-serif;
  --font-atkinson: 'Atkinson Hyperlegible', sans-serif;
  --font-body: var(--font-atkinson);/* Body copy default */
  --font-body-readable: var(--font-opendyslexic);/* Toggle target — switches between the two reading fonts */
  --mission-bg: var(--bg-warning, #faeeda);
  --mission-ink: var(--text-primary, #2c2c2a);
  --mission-accent: var(--text-warning, #854f0b);
  --search-overlay-bg: rgba(15, 15, 20, 0.9);
  --search-overlay-text: #fff;
  --search-overlay-accent: #e3e3e3;
  --color-primary: #2b2b26;
  --color-primary-hover: #3f3f38;
  --color-primary-text: #ffffff;
  --color-secondary: #4b5d45;
  --color-secondary-hover: #5d7057;
  --color-secondary-text: #ffffff;
  --color-disabled-bg: #c7c2b8;
  --color-disabled-text: #6b6558;
}

/*=== Initial ===*/
.com-content-article__body,.com-content-article__body li,.com-content-article__body p,.resident-story,.resident-story li,.resident-story p{font-family:var(--font-body);}
body.font-readable .com-content-article__body,body.font-readable .com-content-article__body li,body.font-readable .com-content-article__body p,body.font-readable .resident-story,body.font-readable .resident-story li,body.font-readable .resident-story p{font-family:var(--font-body-readable);}
h1,h2,h3,h4,h5,h6 {font-family: var(--font-voice);}
.image-left{float:left; margin:0 1rem 1rem 0;}
.image-right{float:right; margin:0 0 1rem 1rem;}
.image-center{margin:1rem auto;}
.clearbreak,.clearboth{clear:both;}
.buttons--centered{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-top:1.5rem}
.button{background-color:var(--color-primary);border-radius:4px;color:var(--color-primary-text);display:inline-block;font-family:var(--font-sans);font-weight:600;padding:.75em 1.5em;text-decoration:none;transition:.2s ease}
.button:focus-visible{outline:3px solid var(--color-primary-text);outline-offset:2px}
.button:hover{background-color:var(--color-primary-hover);box-shadow:.25rem .25rem .25rem #000;color:#FBF6EE;}
.button--disabled,.button[aria-disabled="true"]{background-color:var(--color-disabled-bg);color:var(--color-disabled-text);cursor:not-allowed;pointer-events:none}
.button--secondary{background-color:var(--color-secondary);color:var(--color-secondary-text)}
.button--secondary:hover{background-color:var(--color-secondary-hover)}
.font-toggle-wrap{margin-left:auto; float:right;}
.font-toggle{align-items:center;background:none;border:1px solid transparent;border-radius:4px;color:inherit;cursor:pointer;display:inline-flex;font-family:var(--font-sans);font-size:.8rem;gap:.4rem;opacity:.65;padding:.35em .6em;text-decoration:underline;text-underline-offset:2px;transition:opacity .2s ease}
.font-toggle:focus-visible{border-color:currentColor;opacity:1;outline:none}
.font-toggle:hover{opacity:1}
.t4-main-body {margin-top:0; padding-top:0;}

/*=== Header ===*/
.t4-header .logo-image img{height:130px; padding:.5rem 0;}

/*=== Footer ===*/
/* Footer */
.t4-footer{background:#14100F; color:#E7DCC9; font-family:var(--font-sans); padding:clamp(3rem,6vw,5rem) 0 0;}
.t4-footer a{color:#E7DCC9; text-decoration:none; transition:color .2s ease;}
.t4-footer a:hover,.t4-footer a:focus-visible{color:#E8B34A;}
.t4-footer h4,.t4-footer .module-title{color:#FBF6EE; font-family:var(--font-voice); font-size:1rem; font-style:italic; font-weight:600; letter-spacing:.08em; margin-bottom:1.25rem; text-transform:uppercase;}
.t4-footer p,.t4-footer li{font-size:.9rem; line-height:1.6;}
.t4-footer ul{list-style:none; margin:0; padding:0;}
.t4-footer ul li{margin-bottom:.5rem;}

/* Footer social icons */
.t4-footer .site-footer-social{display:flex; gap:1rem; margin-top:1rem;}
.t4-footer .site-footer-social a{align-items:center; background:rgba(251,246,238,0.08); border-radius:50%; display:flex; font-size:1rem; height:2.5rem; justify-content:center; transition:background .2s ease,color .2s ease; width:2.5rem;}
.t4-footer .site-footer-social a:hover,.t4-footer .site-footer-social a:focus-visible{background:#E8B34A; color:#14100F;}

/* 501(c)(3) disclaimer */
.t4-footer .site-footer-501c3{border-top:1px solid rgba(251,246,238,0.1); color:rgba(231,220,201,0.5); font-size:.75rem; line-height:1.5; margin-top:1.25rem; padding-top:1rem;}

/* Footer bottom bar */
.t4-footer .t4-copyright,.t4-footer .site-footer-bottom{background:rgba(0,0,0,0.3); border-top:1px solid rgba(251,246,238,0.08); font-size:.8rem; margin-top:clamp(2rem,4vw,3.5rem); padding:1.5rem 0; text-align:center;}
.t4-footer .t4-copyright p,.t4-footer .site-footer-bottom p{color:rgba(231,220,201,0.5); margin:0 0 .25rem;}
.t4-footer .t4-copyright p:last-child,.t4-footer .site-footer-bottom p:last-child{margin-bottom:0;}
.t4-footer .site-footer-tagline{color:#E8B34A; font-family:var(--font-voice); font-size:.85rem; font-style:italic;}

/* Footer link hover underline */
.t4-footer ul a{background-image:linear-gradient(#E8B34A,#E8B34A); background-position:0 100%; background-repeat:no-repeat; background-size:0% 1px; padding-bottom:2px; transition:background-size .3s ease,color .2s ease;}
.t4-footer ul a:hover,.t4-footer ul a:focus-visible{background-size:100% 1px;}

/*=== Search ===*/
#t4-search{ align-items:center; background:var(--search-overlay-bg); backdrop-filter:blur(6px); display:none; height:100%; justify-content:center; left:0; opacity:0; position:fixed; top:0; transition:opacity 0.25s ease; width:100%; z-index:9999; }
#t4-search.is-open{ opacity:1; }
#t4-search .t4-col{ width:min(720px, 92%); }
#t4-search .module-ct{ margin:0; }
#t4-search .search-container{ margin:0 auto; width:min(720px, 92%); }
#t4-search .mod-finder{ position:relative; width:100%; }
#t4-search .js-finder-search-query.form-control{ background:transparent; border:none; border-bottom:2px solid var(--search-overlay-accent); color:var(--search-overlay-text); font-family:var(--font-voice), serif; font-size:clamp(1.75rem, 4vw, 3rem); font-weight:400; max-width:none; outline:none; padding:0.5rem 3rem 0.75rem 0; transition:border-color 0.2s ease; width:100%; }
#t4-search .js-finder-search-query.form-control:focus{ border-color:var(--search-overlay-text); }
#t4-search .js-finder-search-query::placeholder{ color:var(--search-overlay-accent); font-style:italic; opacity:0.55; }
#t4-search .search-close{ background:none; border:none; color:var(--search-overlay-text); cursor:pointer; font-size:1.5rem; opacity:0.7; padding:0.5rem; position:absolute; right:0; top:0.25rem; transition:opacity 0.2s ease, transform 0.2s ease; }
#t4-search .search-close:focus,
#t4-search .search-close:hover{ opacity:1; transform:rotate(90deg); }
#t4-search .search-enter-hint{ bottom:-2rem; color:var(--search-overlay-accent); font-family:var(--font-sans), sans-serif; font-size:0.7rem; left:0; letter-spacing:0.08em; opacity:0.6; position:absolute; text-transform:uppercase; }
#t4-search .awesomplete{ position:relative; width:100%; }
#t4-search ul[role="listbox"]{ background:#fff; border-radius:6px; box-shadow:0 12px 32px rgba(0, 0, 0, 0.25); color:#111; font-family:var(--font-sans), sans-serif; left:0; list-style:none; margin-top:0.5rem; padding:0.25rem 0; position:absolute; top:100%; width:100%; z-index:1; }
#t4-search ul[role="listbox"] li{ cursor:pointer; padding:0.6rem 1rem; transition:background 0.15s ease; }
#t4-search ul[role="listbox"] li:hover,
#t4-search ul[role="listbox"] li[aria-selected="true"]{ background:rgba(0, 0, 0, 0.05); }

/*=== Front Page ===*/

/* Section Labels */
.t4-section_featured_residents::before,.t4-section_blog::before{color:var(--mission-accent); display:block; font-family:var(--font-voice); font-size:clamp(1.2rem,1.4vw,1.05rem); font-style:italic; font-weight:600; letter-spacing:.12em; margin-top:-2rem; padding:clamp(2rem,4vw,3.5rem) 1.5rem .75rem; text-align:center; text-transform:uppercase;}
.t4-section_featured_residents::before{content:'— the ones in charge —';}
.t4-section_blog::before{content:'— dispatches from the field —';}
/*.t4-section_featured_residents::after,.t4-section_blog::after{background:var(--mission-accent); border-radius:2px; content:''; display:block; height:2px; margin:0 auto; opacity:.3; width:3rem;}*/

/* Hero */
.hero{align-items:flex-start; background:linear-gradient(180deg,rgba(20,16,15,0.85) 0%,rgba(20,16,15,0.35) 45%,rgba(20,16,15,0.05) 100%),url('/images/equus/Horses_01.jpg') no-repeat; background-position:center,bottom center; background-size:cover,cover; display:flex; min-height:78vh; overflow:hidden; padding-top:clamp(2.5rem,6vw,5rem); position:relative;}
.hero .row.head{width:100%;}
.hero .welcome{color:#FBF6EE; font-family:var(--font-voice); font-size:clamp(2rem,5vw,3.75rem); font-weight:700; letter-spacing:-0.01em; line-height:1.05; margin-bottom:1rem;}
.hero .text{color:#E7DCC9; font-family:var(--font-sans); font-size:clamp(1rem,1.6vw,1.15rem); line-height:1.5; margin-bottom:1.75rem; max-width:42rem;}
.hero .button{animation:fadeInRight .7s ease forwards; animation-delay:.75s; background:#E8B34A; border-radius:999px; color:#14100F; cursor:pointer; display:inline-block; font-family:var(--font-sans); font-size:1rem; font-weight:600; opacity:0; padding:.85rem 2rem; transition:background .25s ease,transform .25s ease;}
.hero .button:hover,.hero .button:focus-visible{background:#D6336C; color:#FBF6EE; transform: scale(1.04);}
.hero .button:focus-visible{outline:3px solid #FBF6EE; outline-offset:3px;}

/* Mission */
.mission{background:var(--mission-bg); padding:clamp(3rem,6vw,5rem) 1.5rem; text-align:center;}
.mission-inner{max-width:60ch; width:100%;}
.mission-text{color:var(--mission-ink); font-family:var(--font-voice); font-size:clamp(1.25rem,2.2vw,1.65rem); font-weight:400; letter-spacing:-.005em; line-height:1.55; margin:0;}
.mission-emphasis{font-style:italic; white-space:nowrap;}
.mission-tooltip{border-bottom:1px dotted var(--mission-accent); color:var(--mission-accent); cursor:help; transition:border-bottom-style .2s ease,color .2s ease;}
.mission-tooltip:focus-visible,.mission-tooltip:hover{border-bottom-style:solid; color:var(--mission-ink); outline:none;}

/* Featured Residents */
.featured-residents.row{--bs-gutter-x:1.5rem; margin:0 auto; max-width:80rem; padding:clamp(1.5rem,2vw,4rem) 1rem;}
.featured-residents .col-12{padding-bottom:1.5rem;}
.resident-card.card{aspect-ratio:4/5; background:transparent; border:none; border-radius:12px; color:#FBF6EE; display:block; overflow:hidden; position:relative; text-decoration:none; transition:transform .35s ease;}
.resident-card.card:hover,.resident-card.card:focus-visible{transform:translateY(-4px);}
.resident-card.card:focus-visible{outline:3px solid var(--mission-accent); outline-offset:3px;}
.resident-card-image{height:100%; position:absolute; width:100%;}
.resident-card-image img.card-img-top{border-radius:12px; display:block; height:100%; object-fit:cover; transition:transform .5s ease; width:100%;}
.resident-card:hover .resident-card-image img,.resident-card:focus-visible .resident-card-image img{transform:scale(1.05);}
.resident-card-species{align-items:center; background:rgba(20,16,15,0.7); backdrop-filter:blur(6px); border-radius:999px; display:flex; font-size:1.4rem; height:2.5rem; justify-content:center; left:.75rem; line-height:1; position:absolute; top:.75rem; width:2.5rem; z-index:2;}
.resident-card-overlay.card-img-overlay{background:linear-gradient(180deg,rgba(20,16,15,0) 0%,rgba(20,16,15,0.4) 45%,rgba(20,16,15,0.85) 100%); border-radius:12px; bottom:0; left:0; padding:2rem 1.25rem 1.25rem; position:absolute; right:0; top:auto;}
.resident-card-name{color:#FBF6EE; font-family:var(--font-voice); font-size:1.5rem; font-weight:600; letter-spacing:-.01em; line-height:1.1; margin:0 0 .35rem;}
.resident-card-hook{color:#E7DCC9; font-size:.9rem; font-style:italic; line-height:1.4; margin:0;}

/* SVG species icon overrides (uncomment when ready)
.resident-card-species[data-species="cat"]{background:url('/images/icons/cat.svg') center/60% no-repeat,rgba(20,16,15,0.7); font-size:0;}
.resident-card-species[data-species="horse"]{background:url('/images/icons/horse.svg') center/60% no-repeat,rgba(20,16,15,0.7); font-size:0;}
*/

/* Why Sanctuary */
.why-sanctuary{background:var(--mission-bg); padding:clamp(3rem,6vw,5rem) 1.5rem; text-align:center;}
.why-sanctuary::before{color:var(--mission-accent); content:'— why sanctuary —'; display:block; font-family:var(--font-voice); font-size:clamp(.85rem,1.4vw,1.05rem); font-style:italic; font-weight:600; letter-spacing:.15em; margin-bottom:1rem; text-transform:uppercase;}
.why-sanctuary-inner{margin:0 auto; max-width:90vh; text-align:left; width:100%;}
.why-sanctuary-inner p{color:var(--mission-ink); font-family:var(--font-voice); font-size:clamp(1.1rem,1.8vw,1.25rem); font-weight:400; line-height:1.65; margin:0 0 1rem;}
.why-sanctuary-inner p:last-child{margin-bottom:0;}
.why-sanctuary-inner p:first-child::first-letter{color:var(--mission-accent); float:left; font-family:var(--font-voice); font-size:3.5em; font-weight:600; line-height:.8; margin:0.05em .12em 0 0;}

/*=== Sub Pages ===*/
/* Residents (Blog) Page */
.residents-page{margin:0 auto; max-width:80rem; padding:clamp(2rem,4vw,4rem) 1.5rem;}
.residents-filters{align-items:center; display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-bottom:.75rem;}
.residents-filter{background:transparent; border:1.5px solid var(--mission-accent); border-radius:999px; color:var(--mission-accent); cursor:pointer;  font-size:.85rem; font-weight:600; padding:.5rem 1.25rem; transition:background .2s ease,color .2s ease;}
.residents-filter:hover,.residents-filter:focus-visible{background:var(--mission-accent); color:#FBF6EE;}
.residents-filter.active{background:var(--mission-accent); color:#FBF6EE;}
.residents-filter:focus-visible{outline:3px solid var(--mission-accent); outline-offset:3px;}
.residents-species-heading{color:var(--mission-accent); font-family:inherit; line-height:1; margin:0; padding:.5rem .25rem;}
.residents-count{color:var(--mission-accent); font-family:var(--font-voice); font-size:.9rem; font-style:italic; margin-bottom:1.5rem; text-align:center;}
.residents-grid.row{--bs-gutter-x:1.5rem;}
.residents-grid .col-12{padding-bottom:1.5rem; transition:opacity .25s ease;}
.residents-pagination{margin-top:2rem; text-align:center;}
.residents-pagination .page-link{border-color:var(--mission-accent); color:var(--mission-accent);}
.residents-pagination .page-item.active .page-link{background:var(--mission-accent); border-color:var(--mission-accent); color:#FBF6EE;}

/* Resident Profile — Field Guide */
.resident-profile{margin:0 auto; max-width:80rem; padding:clamp(.5rem,1vw,1rem) 1.5rem;}
.resident-header{display:grid; gap:2rem; grid-template-columns:2fr 1fr; margin-bottom:clamp(.5rem,1vw,1rem);}
.resident-hero{margin:0; position:relative;}
.resident-hero-image{border-radius:12px; display:block; height:auto; object-fit:cover; width:100%;}
.resident-hero-caption{color:var(--mission-ink);  font-size:.85rem; font-style:italic; margin-top:.5rem; opacity:.7; text-align:center;}
.resident-hero-placeholder{aspect-ratio:4/3; background:var(--mission-bg); border-radius:12px;}
/* Rainbow Bridge */
.resident-hero{border-radius:12px;overflow:hidden}
.resident-hero-ribbon{background:linear-gradient(135deg,#f2b8c6,#f5e2a0,#b3d4e8);box-shadow:0 2px 6px rgba(0,0,0,.25);color:var(--mission-ink);font-family:var(--font-sans);font-size:.7rem;font-weight:600;letter-spacing:.04em;padding:.4rem 0;position:absolute;right:-50px;text-align:center;text-transform:uppercase;top:35px;transform:rotate(45deg);width:220px;z-index:3}
.rainbow-icon{display:inline-block;margin-right:.4rem;vertical-align:middle}
.resident-facts dt{align-items:center;display:flex}
.resident-meta{align-self:start; position:sticky; top:2rem;}
.resident-meta-inner{background:var(--mission-bg); border-radius:12px; padding:2rem 1.75rem;}
.resident-name{color:var(--mission-ink); font-family:var(--font-voice); font-size:clamp(2rem,3.5vw,2.75rem); font-weight:600; letter-spacing:-.015em; line-height:1.05; margin:0 0 .5rem;}
.resident-persona{color:var(--mission-accent); font-family:var(--font-voice); font-size:1.05rem; font-style:italic; line-height:1.3; margin:0 0 1.75rem;}
.resident-facts{display:grid; gap:.35rem 1.25rem; grid-template-columns:auto 1fr; margin:0 0 1.75rem;}
.resident-facts dt{color:var(--mission-accent); font-size:.75rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;}
.resident-facts dd{color:var(--mission-ink); font-size:.95rem; margin:0;}
.resident-write{background:var(--mission-ink); border-radius:999px; color:var(--mission-bg); display:inline-block;  font-size:.95rem; font-weight:600; padding:.85rem 1.75rem; text-align:center; text-decoration:none; transition:background .25s ease,transform .25s ease;width:100%;}
.resident-write:hover,.resident-write:focus-visible{background:#D6336C; color:#FBF6EE; transform: scale(1.03);}
.resident-write:focus-visible{outline:3px solid var(--mission-accent); outline-offset:3px;}
.role-icon svg{display:inline-block;flex-shrink:0;height:2em;max-width:none;width:2em}
.resident-story{color:var(--mission-ink);  font-size:1.05rem; line-height:1.7; margin:0 auto;}
.resident-story p{margin:0 0 1.25rem;}
.resident-story img{border-radius:8px; height:auto; margin:1.5rem 0; max-width:100%;}
.resident-story h2,.resident-story h3{color:var(--mission-ink); font-family:var(--font-voice); letter-spacing:-.005em; margin:2rem 0 1rem;}
.resident-story h2{font-size:1.75rem; font-weight:600;}
.resident-story h3{font-size:1.35rem; font-weight:600;}
.resident-story h3::before{border: 1px solid #000;content:'';display: inline-block; margin-right:1rem;width: 10%;}
.resident-story h3::after {border: 1px solid #000;content:'';display: inline-block; margin-left:1rem;width: 10%;}
.resident-story blockquote{border-left:3px solid var(--mission-accent); color:var(--mission-accent); font-family:var(--font-voice); font-size:1.35rem; font-style:italic; line-height:1.4; margin:2rem 0; padding:.5rem 0 .5rem 1.5rem;}

/* Role Label */
.resident-profile .role{align-items:center;background:var(--mission-bg);border:1.5px dashed var(--mission-accent);border-radius:10px;box-shadow:.25rem .25rem .5rem var(--mission-ink);display:flex;gap:.5rem;justify-content:center;margin:-1rem auto 1rem;padding:.5rem 1.25rem;position:relative;text-align:center;transform:rotate(-1.5deg);transition:box-shadow .25s ease,transform .25s ease;width:calc(100% - 2rem);z-index:2}
.resident-profile .role:hover{box-shadow:.35rem .35rem .5rem var(--mission-ink);transform:rotate(0deg) scale(1.03)}
.resident-profile .role::after,.resident-profile .role::before{background:var(--mission-bg);border:1.5px dashed var(--mission-accent);border-radius:50%;box-sizing:border-box;content:'';height:22px;position:absolute;top:50%;transform:translateY(-50%);width:22px;z-index:1}
.resident-profile .role::before{left:-11px}
.resident-profile .role::after{right:-11px}
.resident-profile .role-tape{background:rgba(186,117,23,.55);border:1px solid rgba(133,79,11,.3);box-shadow:0 1px 2px rgba(0,0,0,.15);height:20px;left:20px;position:absolute;top:-8px;transform:rotate(-8deg);width:56px;z-index:2}
.resident-profile .role-content{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;position:relative;z-index:3}
.role-icon svg{display:block;flex-shrink:0;height:1.1em;max-width:none;width:1.1em}

/* Board Members */
.board-grid.row{--bs-gutter-x:1.5rem;margin:0 auto;max-width:80rem;padding:clamp(1.5rem,2vw,4rem) 1rem}
.board-card.card{aspect-ratio:4/5;background:transparent;border:none;border-radius:12px;color:#FBF6EE;overflow:hidden;position:relative}
.board-card-image{height:100%;position:absolute;width:100%}
.board-card-image img{border-radius:12px;display:block;height:100%;object-fit:cover;width:100%}
.board-card-overlay.card-img-overlay{background:linear-gradient(180deg,rgba(20,16,15,0) 0%,rgba(20,16,15,0.4) 45%,rgba(20,16,15,0.85) 100%);border-radius:12px;bottom:0;left:0;padding:2rem 1.25rem 1.25rem;position:absolute;right:0;top:auto}
.board-card-name{color:#FBF6EE;font-family:var(--font-voice);font-size:1.5rem;font-weight:600;letter-spacing:-.01em;line-height:1.1;margin:0 0 .35rem}
.board-card-hook{color:#E7DCC9;font-family:var(--font-sans);font-size:.9rem;font-style:italic;line-height:1.4;margin:0}
.board-card-bio{color:var(--mission-ink);font-family:var(--font-body);font-size:.95rem;line-height:1.6;margin-top:1rem;text-align:left}
.board-card-bio p{margin:0 0 .75rem}
.board-card-bio p:last-child{margin-bottom:0}

/*=== Animations ===*/
@keyframes fadeInRight {
  from {
    opacity:0;
    transform:translateX(32px);
  }
  to {
    opacity:1;
    transform:translateX(0);
  }
}

.fade-in-right{animation:fadeInRight .7s ease forwards; opacity:0;}
.delay-2{animation-delay:.25s;}
.delay-3{animation-delay:.5s;}

/*=== Accessibility ===*/
@media (prefers-reduced-motion: reduce) {
  .fade-in-right, .hero .button {
    animation:none;
    opacity:1;
    transform:none;
  }
  .mission-tooltip {
    transition:none;
  }
  .resident-card.card,
  .resident-card-image img.card-img-top {
    transition:none;
  }
  .resident-write {
    transition:none;
  }
  .residents-filter,
  .residents-grid .col-12 {
    transition: none;
  }
}

@media (max-width: 768px) {
  .resident-header {
    gap:1.5rem;
    grid-template-columns:1fr;
  }
  .resident-meta {
    position:static;
  }
}