/* Furry Affairs, inner pages. Same tokens, type, buttons, nav and footer as index.html.
   Assets are cached as immutable: change the filename (pages-v2.css) whenever this file changes. */
:root{
  --maroon:#800000;--cream:#F8F0E8;--burgundy:#360008;--sand:#EDE0D0;--sand-deep:#DCC8AE;
  --ease:cubic-bezier(.16,1,.3,1);
  --display:"Fraunces",Georgia,serif;
  --body:"Public Sans",-apple-system,"Helvetica Neue",sans-serif;
  --nav-h:92px;--gutter:clamp(20px,4.5vw,64px);--rule:1.5px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--maroon);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--maroon);color:var(--cream)}
img{max-width:100%}
a{color:inherit}
.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.03;background-image:url("/assets/grain.png");background-size:256px 256px}
.wrap{max-width:1280px;margin-inline:auto;padding-inline:var(--gutter)}
.eyebrow{font:600 11px/1 var(--body);letter-spacing:.2em;text-transform:uppercase}
h1,h2,h3{font-family:var(--display);font-weight:560;letter-spacing:-.018em;line-height:1.02;text-wrap:balance}
h1{font-size:clamp(2.4rem,4.6vw,3.9rem)}
h2{font-size:clamp(1.55rem,2.3vw,2.1rem);line-height:1.1}
p{max-width:60ch}
.lede{font-size:clamp(1.05rem,1.35vw,1.2rem);line-height:1.55;max-width:52ch}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:var(--rule) solid var(--maroon);border-radius:3px;background:var(--maroon);color:var(--cream);font:600 15px/1 var(--body);letter-spacing:.02em;text-decoration:none;padding:17px 30px;cursor:pointer;min-height:50px;transition:background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease),transform .2s var(--ease)}
.btn:hover{background:var(--burgundy);border-color:var(--burgundy)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--burgundy);outline-offset:3px}
.btn--ghost{background:var(--cream);color:var(--maroon)}
.btn--ghost:hover{background:var(--maroon);color:var(--cream)}
.btn--sm{padding:12px 20px;font-size:13.5px;min-height:0}

/* photo plate, as on the home page */
.plate{position:relative;display:block}
.plate::before{content:"";position:absolute;inset:14px -14px -14px 14px;background:var(--sand);border-radius:4px;z-index:0}
.plate>img{position:relative;z-index:1;display:block;width:100%;height:auto;border:var(--rule) solid var(--maroon);border-radius:4px;background:var(--cream)}

/* nav: always solid on inner pages */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px var(--gutter);background:var(--cream);border-bottom:1px solid var(--maroon)}
.nav-cta{display:grid;gap:8px}
.nav-cta .btn--sm{padding:9px 18px;font-size:13px;text-align:center}
.nav .mark{display:block;border-radius:3px;padding:6px 10px;margin-left:-10px}
.nav .mark img{height:64px;width:auto;display:block}

/* page */
.pg{padding:calc(var(--nav-h) + clamp(28px,5vh,56px)) 0 clamp(72px,10vh,120px)}
.crumbs{display:flex;flex-wrap:wrap;gap:6px 10px;margin-bottom:clamp(22px,3vw,36px)}
.crumbs a,.crumbs span{font:600 11px/1.4 var(--body);letter-spacing:.16em;text-transform:uppercase;text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs i{font-style:normal;opacity:.6}
.pg-head{padding-bottom:clamp(34px,5vw,60px);border-bottom:var(--rule) solid var(--maroon)}
.pg-head h1{max-width:20ch}
.pg-head .lede{margin-top:clamp(18px,2.4vw,28px)}

/* ruled sections: heading left, text right, like the care list on the home page */
.sec{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,96px);padding:clamp(28px,3.6vw,44px) 0;border-bottom:1px solid var(--maroon)}
.sec h2{max-width:15ch}
.sec .body{font-size:16.5px}
.sec .body p+p{margin-top:16px}
.sec .body a,.related a,.foot .col a{text-underline-offset:3px}
.sec .body ul{margin:14px 0 0 1.1em}
.sec .body ul.areas{margin:0}

/* about: facts and photo */
.about-top{display:grid;grid-template-columns:minmax(0,7fr) minmax(220px,4fr);gap:clamp(40px,7vw,110px);align-items:start;padding:clamp(34px,4.5vw,56px) 0;border-bottom:1px solid var(--maroon)}
.facts{border-collapse:collapse;width:100%;font-size:16px}
.facts th,.facts td{padding:14px 18px 14px 0;border-bottom:1px solid var(--maroon);text-align:left;vertical-align:top}
.facts thead th{font:600 11px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;border-top:1px solid var(--maroon)}
.facts td:first-child{font:560 1.05rem/1.3 var(--display);white-space:nowrap;padding-right:28px}
.tablewrap{overflow-x:auto;margin-top:clamp(30px,4vw,48px)}

/* sand panels: costs and calls to action */
.panel{background:var(--sand);border:var(--rule) solid var(--maroon);border-radius:4px;padding:clamp(26px,3.4vw,44px);margin-top:clamp(36px,5vw,60px)}
.panel h2{max-width:none;margin-bottom:6px}
.panel p{margin-top:14px}
.rows{list-style:none;border-top:1px solid var(--maroon);margin-top:22px}
.rows li{display:flex;align-items:baseline;gap:14px;padding:16px 0;border-bottom:1px solid var(--maroon)}
.rows .name{font:560 clamp(1.1rem,1.5vw,1.3rem)/1.15 var(--display);letter-spacing:-.01em}
.rows .lead{flex:1 1 20px;min-width:20px;border-bottom:2px dotted var(--maroon);transform:translateY(-.35em);opacity:.6}
.rows .amt{font:500 clamp(1.1rem,1.5vw,1.3rem)/1 var(--display);font-variant-numeric:lining-nums;white-space:nowrap}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}

/* areas hub */
.areas{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:0 36px;list-style:none;border-top:1px solid var(--maroon)}
.areas li{border-bottom:1px solid var(--maroon)}
.areas a{display:block;padding:14px 0;text-decoration:none;font:560 1.08rem/1.25 var(--display);letter-spacing:-.01em}
.areas a:hover{text-decoration:underline;text-underline-offset:3px}
.areas span{display:block;padding:14px 0;font:560 1.08rem/1.25 var(--display);letter-spacing:-.01em}

/* related links */
.related{margin-top:clamp(28px,4vw,44px);font-size:14.5px}
.related .eyebrow{display:block;margin-bottom:12px}
.related ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px 24px}

/* footer, as on the home page */
footer{border-top:var(--rule) solid var(--maroon);padding:60px 0 44px}
.foot{display:flex;justify-content:space-between;gap:40px;align-items:flex-start;flex-wrap:wrap}
.foot .mark img{height:150px;width:auto;display:block}
.foot .col{display:grid;gap:12px;font-size:14.5px}
.foot .col .eyebrow{margin-bottom:4px}
.social{display:flex;gap:12px}
.social a{display:grid;place-items:center;width:46px;height:46px;border:var(--rule) solid var(--maroon);border-radius:50%;color:var(--maroon);background:var(--cream);transition:background .4s var(--ease),color .4s var(--ease)}
.social a:hover{background:var(--maroon);color:var(--cream)}
.social a:focus-visible{outline:2px solid var(--burgundy);outline-offset:3px}
.social svg{width:22px;height:22px;display:block}
.copyright{margin-top:48px;font-size:12.5px;letter-spacing:.04em}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}
@media (max-width:820px){
  :root{--nav-h:68px;--gutter:22px}
  body{font-size:16px}
  .nav{padding:12px var(--gutter)}
  .nav .mark img{height:52px}
  h1{font-size:clamp(2.1rem,9vw,2.7rem)}
  .pg-head h1{max-width:none}
  .sec{grid-template-columns:1fr;gap:14px}
  .sec h2{max-width:none}
  .about-top{grid-template-columns:1fr;gap:44px}
  .about-top .plate{max-width:72%;margin:0 auto 14px}
  .facts td:first-child{white-space:normal}
  .rows li{flex-wrap:wrap;gap:6px 12px}
  .btns .btn{width:100%}
  .foot .mark img{height:112px}
}