:root { --ink:#26342b; --green:#5d765d; --cream:#fbf7ee; --paper:#fffdf8; --rust:#b96849; --muted:#687269; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,sans-serif; background:linear-gradient(150deg,#f7f1e5,#e4eee2); }
.shell { min-height:100vh; max-width:900px; margin:auto; padding:0 20px 50px; }
header { display:flex; align-items:center; justify-content:space-between; padding:22px 0; }
.brand { color:var(--ink); text-decoration:none; font:800 28px Georgia,serif; }.brand span,.kicker { color:var(--rust); }
nav { display:flex; gap:8px; } nav a { color:var(--ink); text-decoration:none; font-weight:700; padding:8px 11px; border-radius:12px; } nav a.active { background:#e1eadc; }
.hero { display:grid; grid-template-columns:280px 1fr; overflow:hidden; border-radius:28px; background:var(--green); color:white; box-shadow:0 16px 42px #2e3b2c2e; }
.dog-image { min-height:300px; background:#d9c7ac; }.dog-image img { display:block; width:100%; height:100%; min-height:300px; object-fit:cover; object-position:center; }
.hero-copy { align-self:end; padding:32px; }.kicker { font-size:12px; font-weight:900; letter-spacing:.13em; margin:0 0 8px; }.hero h1 { font:800 52px/.9 Georgia,serif; margin:0 0 14px; }.hero p { line-height:1.5; }
.tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:18px; }.tags span { background:#ffffff26; border:1px solid #ffffff3d; padding:6px 9px; border-radius:99px; font-size:13px; }
.gallery-section { margin-top:22px; }.gallery-section h2 { font-family:Georgia,serif; margin:0 0 10px; }.gallery { display:grid; grid-template-columns:1.2fr .8fr; grid-template-rows:135px 135px; gap:8px; }.gallery img { width:100%; height:100%; object-fit:cover; border-radius:18px; }.gallery img:first-child { grid-row:1 / 3; }
.card { margin-top:22px; padding:26px; border-radius:24px; background:var(--paper); box-shadow:0 10px 30px #3e49300f; border:1px solid #e9e2d5; }.card h1,.card h2 { font-family:Georgia,serif; margin:0 0 7px; }.muted,small { color:var(--muted); }
.messages { min-height:170px; display:flex; flex-direction:column; gap:10px; margin:20px 0 12px; }.message { max-width:78%; padding:10px 13px; border-radius:16px; line-height:1.4; }.message.dog { background:#edf3e9; align-self:flex-start; }.message.visitor { background:#f4e1d6; align-self:flex-end; }
.quick-questions { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:10px; }.quick-questions button { border:0; background:#e7eee4; color:#425346; border-radius:99px; padding:8px 11px; font-weight:700; cursor:pointer; }
.composer { display:flex; gap:8px; }.composer input, .form-grid input { width:100%; font:inherit; border:1px solid #dcd4c7; border-radius:10px; padding:11px; }.send,.save { border:0; border-radius:10px; background:var(--green); color:white; padding:11px 15px; font-weight:800; cursor:pointer; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; margin:24px 0; }.form-grid label { display:grid; gap:6px; font-size:14px; font-weight:700; }.form-grid .wide { grid-column:1 / -1; }.form-grid .check { display:flex; align-items:center; }.form-grid .check input { width:auto; }.success { color:#397243; margin-left:12px; font-weight:700; }
.home-hero { padding:38px 0 20px; max-width:650px; }.home-hero h1 { margin:0; font:800 clamp(50px,14vw,100px)/.82 Georgia,serif; letter-spacing:-.06em; }.home-hero > p:last-child { max-width:450px; font-size:17px; line-height:1.5; color:var(--muted); margin:20px 0; }.filter-bar { display:flex; gap:8px; overflow-x:auto; padding:12px 0 20px; scrollbar-width:none; }.filter-bar button { white-space:nowrap; padding:10px 14px; border-radius:999px; border:1px solid #d6ddcf; color:var(--ink); background:#fbf7ee; font:700 13px inherit; cursor:pointer; transition:.2s ease; }.filter-bar button.active,.filter-bar button:hover { background:var(--green); border-color:var(--green); color:white; }.dog-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }.dog-card { min-width:0; color:inherit; text-decoration:none; border-radius:22px; overflow:hidden; background:var(--paper); border:1px solid #e5dfd2; box-shadow:0 10px 25px #3e49300c; transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s; }.card-image { position:relative; height:225px; overflow:hidden; background:#d8d5c9; }.card-image:after { content:""; position:absolute; inset:40% 0 0; background:linear-gradient(transparent,rgba(20,28,22,.35)); pointer-events:none; }.card-image img { width:100%; height:100%; object-fit:contain; background:#d8d5c9; transition:transform .5s cubic-bezier(.2,.8,.2,1); }.card-tags { position:absolute; z-index:1; top:10px; left:10px; display:flex; flex-wrap:wrap; gap:5px; }.card-tags span { background:#fffdf8e8; backdrop-filter:blur(7px); border-radius:999px; padding:5px 8px; font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.05em; }.view-profile { position:absolute; z-index:1; bottom:12px; left:12px; right:12px; display:flex; align-items:center; justify-content:space-between; color:white; font-size:13px; font-weight:800; opacity:0; transform:translateY(8px); transition:.25s ease; }.view-profile b { font-size:20px; }.card-copy { padding:13px 13px 16px; }.card-copy h2 { font:800 25px/1 Georgia,serif; margin:0; }.card-copy p { font-size:12px; font-weight:800; margin:6px 0; }.card-copy > span { color:var(--muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:12px; line-height:1.35; }.dog-card:hover { transform:translateY(-7px); box-shadow:0 20px 40px #3e49302c; }.dog-card:hover .card-image img { transform:scale(1.08); }.dog-card:hover .view-profile { opacity:1; transform:none; }.profile-hero { display:grid; grid-template-columns:1fr 1fr; min-height:420px; overflow:hidden; border-radius:28px; background:var(--green); color:white; }.profile-hero img { width:100%; height:100%; min-height:420px; object-fit:cover; }.profile-hero div { padding:34px; align-self:end; }.profile-hero h1 { font:800 60px/.9 Georgia,serif; margin:0 0 12px; }.admin-header { position:relative; padding:25px 0 15px; }.admin-header h1 { font:800 46px/.95 Georgia,serif; margin:0; }.admin-header p { color:var(--muted); }.admin-header form { position:absolute; top:30px; right:0; }.text-button { border:0; color:var(--rust); background:none; font-weight:800; cursor:pointer; }.admin-layout { display:grid; grid-template-columns:240px 1fr; gap:18px; align-items:start; }.dog-list { display:grid; gap:7px; }.full { width:100%; }.dog-row { display:flex; align-items:center; gap:9px; text-align:left; border:1px solid #e8e1d5; border-radius:13px; padding:7px; background:var(--paper); cursor:pointer; }.dog-row.selected { border-color:var(--green); background:#edf3e9; }.dog-row img { width:38px; height:38px; border-radius:9px; object-fit:cover; }.dog-row span { display:grid; gap:2px; }.dog-row small { font-size:10px; }.delete { margin-left:9px; padding:11px 15px; border:1px solid #d69983; border-radius:10px; color:#9e4e35; background:#fff5f0; font-weight:800; }.preview-link { display:inline-block; margin-top:18px; color:var(--green); font-weight:800; }.credentials { margin-top:20px; }.login-card { max-width:440px; margin:60px auto; }.login-card form { display:grid; gap:14px; margin-top:22px; }.login-card label { display:grid; gap:7px; font-weight:800; }.login-card input { border:1px solid #dcd4c7; border-radius:10px; padding:11px; font:inherit; }.login-error { color:#a6402d; font-weight:800; }
@media (max-width:650px) { .shell { padding:0 12px 35px; } header { padding:15px 2px; }.brand { font-size:23px; } nav a { font-size:12px; padding:7px; }.hero { grid-template-columns:1fr; }.dog-image,.dog-image img { min-height:260px; }.hero-copy { padding:24px; }.hero h1 { font-size:45px; }.form-grid { grid-template-columns:1fr; }.form-grid .wide { grid-column:auto; }.home-hero { padding-top:27px; }.dog-grid { gap:9px; }.card-image { height:205px; }.card-copy { padding:11px; }.card-copy h2 { font-size:22px; }.view-profile { opacity:1; transform:none; }.profile-hero { grid-template-columns:1fr; }.profile-hero img { min-height:330px; }.profile-hero div { padding:25px; }.profile-hero h1 { font-size:50px; }.admin-layout { grid-template-columns:1fr; }.dog-list { grid-template-columns:repeat(2,1fr); }.dog-list .full { grid-column:1/-1; }.admin-header form { top:20px; }.gallery { grid-template-rows:125px 125px; } }
.card-tags .tag-adopted { color:#fff; background:#be3b3b; }.card-tags .tag-option { color:#fff9dc; background:#987119; }.card-tags .tag-new { color:#174b66; background:#bdeaff; }.card-tags .tag-senior,.card-tags .tag-default { color:#394333; background:#fffdf8e8; }
.form-grid select { width:100%; font:inherit; border:1px solid #dcd4c7; border-radius:10px; padding:11px; background:white; }.admin-section { margin-top:30px; padding-top:24px; border-top:1px solid #e8e1d5; }.admin-section h3 { margin:0 0 6px; font:800 25px/1 Georgia,serif; }.standalone { margin:10px 0 0; }.media-manager { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin-top:14px; }.media-item { border:1px solid #e5dfd2; border-radius:12px; overflow:hidden; background:#fffdf8; }.media-item img,.media-item video { display:block; width:100%; height:110px; object-fit:cover; background:#e8e1d5; }.media-item div { display:flex; flex-wrap:wrap; gap:6px; padding:8px; }.media-item small { width:100%; color:var(--muted); font-weight:700; }.danger-text { color:#a6402d; }.fact-list { display:grid; gap:8px; margin-top:16px; }.fact-list article { display:grid; grid-template-columns:auto 1fr auto auto; gap:10px; align-items:center; border:1px solid #e8e1d5; border-radius:10px; padding:10px; font-size:13px; }.fact-list b { color:var(--green); }.profile-media { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:16px 0; }.profile-media img,.profile-media video { width:100%; height:220px; display:block; border-radius:18px; object-fit:cover; background:#e8e1d5; }
@media (max-width:650px) { .media-manager { grid-template-columns:repeat(2,1fr); }.fact-list article { grid-template-columns:1fr auto; }.fact-list article span { grid-column:1/-1; }.profile-media { grid-template-columns:repeat(2,1fr); }.profile-media img,.profile-media video { height:150px; } }
.standard-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin:14px 0 22px; }.standard-facts label { display:flex; gap:9px; align-items:flex-start; border:1px solid #e4ddd2; background:#fffdf8; border-radius:12px; padding:10px; cursor:pointer; }.standard-facts input { margin-top:3px; accent-color:var(--green); }.standard-facts span { display:grid; gap:3px; }.standard-facts small { color:var(--muted); line-height:1.35; }.admin-section h4 { margin:25px 0 4px; font:800 20px/1 Georgia,serif; }
@media (max-width:650px) { .standard-facts { grid-template-columns:1fr; } }
.dog-card:hover .card-image img { transform:scale(1); filter:brightness(1.04); }
.standard-facts article { display:grid; gap:9px; border:1px solid #e4ddd2; background:#fffdf8; border-radius:12px; padding:11px; }.standard-facts article > span { display:grid; gap:4px; }.answer-choice { display:flex; flex-wrap:wrap; gap:6px; }.answer-choice button { border:1px solid #d9d2c6; background:white; color:var(--ink); border-radius:999px; padding:6px 8px; font:700 11px inherit; cursor:pointer; }.answer-choice button.selected { background:var(--green); border-color:var(--green); color:white; }.answer-choice .clear-choice { color:#a6402d; border-color:#e7b8ac; }
.profile-hero-image,.gallery-image { display:block; padding:0; border:0; background:#d8d5c9; cursor:zoom-in; overflow:hidden; }.profile-hero-image { min-height:420px; }.profile-hero-image img { display:block; }.gallery-image { border-radius:18px; }.gallery-image img { display:block; }.profile-hero .adopt-button { margin-top:20px; }.adopt-button { display:inline-flex; align-items:center; gap:18px; border:0; border-radius:999px; padding:13px 18px; background:#f2b46c; color:#253629; text-decoration:none; font-weight:900; cursor:pointer; transition:transform .2s,background .2s; }.adopt-button:hover { transform:translateY(-2px); background:#ffc47e; }.adopt-button span { font-size:20px; line-height:.5; }.adopt-button.unavailable { background:#829083; color:#e2e7df; cursor:not-allowed; }.adopt-button.unavailable:hover { transform:none; background:#829083; }.image-lightbox { position:fixed; z-index:50; inset:0; display:grid; place-items:center; padding:25px; background:#152017eb; cursor:zoom-out; }.image-lightbox img { max-width:100%; max-height:100%; object-fit:contain; border-radius:12px; cursor:default; }.lightbox-close { position:fixed; top:18px; right:22px; width:42px; height:42px; border:0; border-radius:50%; background:#fffdf8; color:#253629; font-size:30px; line-height:1; cursor:pointer; }
.image-lightbox { z-index:9999; display:flex; align-items:center; justify-content:center; box-sizing:border-box; }.image-lightbox img { width:auto; height:auto; max-width:calc(100vw - 50px); max-height:calc(100vh - 50px); }
.site-footer { display:flex; justify-content:center; padding:36px 0 10px; }.pawties-link { display:inline-flex; align-items:center; gap:9px; padding:9px 13px; color:#465744; text-decoration:none; border:1px solid #dbe3d6; border-radius:999px; background:#f7faf4; transition:transform .2s,box-shadow .2s; }.pawties-link:hover { transform:translateY(-2px); box-shadow:0 8px 18px #3e493021; }.pawties-link span:nth-child(2) { display:grid; gap:1px; }.pawties-link small { font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#7d8b7a; }.pawties-link b { font:800 16px/1 Georgia,serif; }.pawties-paw { font-size:23px; }
.info-page { max-width:690px; padding-top:35px; }.info-page h1 { font:800 clamp(42px,10vw,70px)/.9 Georgia,serif; margin:0 0 24px; }.info-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:15px; }.info-tabs button { border:1px solid #d6ddcf; color:var(--ink); background:#fbf7ee; padding:10px 14px; border-radius:999px; font:800 13px inherit; cursor:pointer; }.info-tabs button.active { background:var(--green); border-color:var(--green); color:white; }.info-content { min-height:240px; }.info-content h2 { font:800 34px/1 Georgia,serif; margin:0 0 12px; }.info-content p { max-width:580px; white-space:pre-line; line-height:1.65; margin:0 0 24px; }.form-grid textarea { width:100%; min-height:95px; font:inherit; border:1px solid #dcd4c7; border-radius:10px; padding:11px; resize:vertical; }.deleted-dog { grid-template-columns:auto 1fr auto !important; }.deleted-dog img { width:54px; height:54px; object-fit:cover; border-radius:10px; background:#e8e1d5; }.deleted-dog span { display:grid; gap:4px; }.deleted-dog small { color:var(--muted); }
@media (max-width:650px) { .deleted-dog { grid-template-columns:auto 1fr !important; }.deleted-dog .save { grid-column:1/-1; } }
.archive-actions { display:flex; flex-wrap:wrap; gap:7px; justify-content:flex-end; }.archive-actions .delete { margin:0; font-size:12px; padding:9px 11px; }
.header-pawties { margin-left:auto; margin-right:8px; background:#fff7e9; border-color:#e5c899; }
@media (max-width:650px) { header { flex-wrap:wrap; gap:8px; }.header-pawties { order:3; margin:0; }.header-pawties b { font-size:14px; } }
@media (max-width:650px) { .profile-hero-image { min-height:330px; }.profile-hero .adopt-button { margin-top:14px; } }