/* =====================================================================
   Starseeds Foundation — white & gold.
   Editorial luxury: full-bleed sections, one idea per screen, huge quiet
   type, hairline gold, generous air. Light only, by instruction.
   ===================================================================== */

:root{
  color-scheme: light;

  /* Ground */
  --paper:#FFFFFF;
  --warm:#FEFCF8;
  --cream:#FBF7F0;
  --sand:#F6F1E7;

  /* Ink — Apple-grade neutrals, warmed a half-degree */
  --ink:#12100C;
  --ink-2:#1D1B17;
  --muted:#6E6A63;
  --faint:#96918800;

  /* Gold */
  --gold:#B8860B;
  --gold-deep:#8E6608;
  --gold-mid:#C9A24B;
  --gold-soft:#E4CE93;
  --gold-mist:#F3E9D2;
  --grad-gold:linear-gradient(135deg,#E9D9A9 0%,#C9A24B 42%,#9E7B22 100%);

  /* Lines */
  --line:#EDE5D6;
  --line-2:#E2D7C2;

  /* Type */
  --serif:"Cormorant Garamond","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,system-ui,sans-serif;

  /* Rhythm */
  --gutter:clamp(20px,5vw,40px);
  --measure:min(100%,1180px);
  --sec-y:clamp(88px,13vw,190px);
  --r:28px;
  --shadow:0 2px 6px rgba(24,18,4,.03),0 18px 50px -18px rgba(24,18,4,.13);
  --shadow-lift:0 4px 12px rgba(24,18,4,.06),0 30px 70px -24px rgba(24,18,4,.20);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  overflow-x:hidden;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink-2);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  letter-spacing:-0.011em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,canvas,svg,video{max-width:100%;display:block;}
a{color:inherit;}

::selection{background:var(--gold-mist);color:var(--ink);}

/* ---------------------------------------------------------------- type */

h1,h2,h3,.sec,.num,.standfirst,.pull,.quote{
  font-family:var(--serif);
  font-weight:300;
  color:var(--ink);
  letter-spacing:-0.018em;
  line-height:1.03;
  margin:0;
  font-variant-ligatures:common-ligatures;
}

h1{font-size:clamp(3.1rem,8.4vw,7.2rem);line-height:.98;letter-spacing:-0.028em;}
.sec,h2{font-size:clamp(2.3rem,5.2vw,4.2rem);line-height:1.04;}
h3{font-size:clamp(1.35rem,2.2vw,1.8rem);line-height:1.18;letter-spacing:-0.012em;}

p{margin:0 0 1.15em;}
p:last-child{margin-bottom:0;}

em{font-style:italic;}
b,strong,.strong{font-weight:600;}

.lead,.hero__lead,.phead__lead,.standfirst{
  font-size:clamp(1.12rem,1.75vw,1.42rem);
  line-height:1.6;
  color:var(--muted);
  letter-spacing:-0.008em;
  max-width:62ch;
  font-family:var(--sans);
  font-weight:400;
}
.standfirst{font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.2rem);color:var(--ink);line-height:1.3;}

/* Eyebrow — the small gold label above every section */
.eyebrow{
  display:flex;align-items:center;gap:.6em;
  font-family:var(--sans);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--gold-deep);
  margin:0 0 1.5em;
}
.eyebrow .star{width:13px;height:13px;flex:none;color:var(--gold-mid);}

/* The mark: two squares rotated into an eight-point star */
.star{width:17px;height:17px;color:var(--gold-mid);flex:none;}
.star--mark{width:21px;height:21px;}
.star--big{width:clamp(40px,7vw,68px);height:clamp(40px,7vw,68px);color:var(--gold-soft);}

/* -------------------------------------------------------------- layout */

.wrap{width:var(--measure);margin-inline:auto;padding-inline:var(--gutter);}

.band{padding-block:var(--sec-y);position:relative;}
.band--alt{background:var(--cream);}
.band--tight{padding-block:clamp(56px,8vw,104px);}

/* Alternating bands need a hairline, not a hard edge */
.band--alt::before,.band--alt::after{
  content:"";position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-2) 22%,var(--line-2) 78%,transparent);
}
.band--alt::before{top:0;} .band--alt::after{bottom:0;}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:#fff;padding:14px 22px;border-radius:0 0 14px 0;
  font-size:.9rem;text-decoration:none;
}
.skip:focus{left:0;}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px;}

/* ----------------------------------------------------------------- nav */

.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.78);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.nav.is-stuck{border-bottom-color:var(--line);}

.nav__in{display:flex;align-items:center;gap:clamp(14px,3vw,36px);min-height:58px;}

.nav__mark{
  display:flex;align-items:center;gap:.55em;
  text-decoration:none;font-family:var(--serif);
  font-size:1.06rem;letter-spacing:.01em;color:var(--ink);
  white-space:nowrap;margin-right:auto;
}
.nav__mark b{font-weight:600;}
.nav__mark i{font-style:italic;color:var(--muted);}

.nav__links{display:flex;gap:clamp(14px,2.2vw,30px);list-style:none;margin:0;padding:0;}
.nav__links a{
  text-decoration:none;font-size:.86rem;color:var(--ink-2);
  letter-spacing:-0.004em;padding:6px 0;position:relative;
  transition:color .25s var(--ease);
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--gold-mid);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav__links a:hover{color:var(--gold-deep);}
.nav__links a:hover::after,.nav__links a[aria-current]::after{transform:scaleX(1);}
.nav__links a[aria-current]{color:var(--gold-deep);}

.nav__give{
  display:inline-flex;align-items:center;
  background:var(--grad-gold);color:#fff;
  text-decoration:none;font-size:.84rem;font-weight:600;
  padding:9px 20px;border-radius:980px;white-space:nowrap;
  box-shadow:0 1px 2px rgba(120,90,10,.22);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),filter .25s var(--ease);
}
.nav__give:hover{transform:translateY(-1px);box-shadow:0 6px 18px -4px rgba(150,105,15,.45);filter:saturate(1.08);}

/* Burger + drawer (mobile) */
.burger{
  display:none;width:40px;height:40px;border:0;background:none;padding:0;
  cursor:pointer;position:relative;
}
.burger span,.burger::before,.burger::after{
  content:"";position:absolute;left:9px;right:9px;height:1.5px;background:var(--ink);
  border-radius:2px;transition:transform .34s var(--ease),opacity .2s var(--ease);
}
.burger::before{top:14px;} .burger span{top:19.5px;} .burger::after{top:25px;}
.burger[aria-expanded="true"]::before{transform:translateY(5.5px) rotate(45deg);}
.burger[aria-expanded="true"] span{opacity:0;}
.burger[aria-expanded="true"]::after{transform:translateY(-5.5px) rotate(-45deg);}

.drawer{
  position:fixed;inset:58px 0 auto;z-index:99;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid var(--line);
  padding:14px var(--gutter) 30px;
  transform:translateY(-12px);opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity .32s var(--ease),transform .32s var(--ease),visibility .32s;
}
.drawer.is-open{transform:none;opacity:1;pointer-events:auto;visibility:visible;}
.drawer ul{list-style:none;margin:0 0 22px;padding:0;}
.drawer li{border-bottom:1px solid var(--line);}
/* Scoped to the list: an unscoped `.drawer a` also captures the Donate
   pill in the drawer foot and strips it back to a plain serif link. */
.drawer ul a{
  display:block;padding:16px 2px;text-decoration:none;
  font-family:var(--serif);font-size:1.5rem;color:var(--ink);
}
.drawer ul a[aria-current]{color:var(--gold-deep);}
.drawer__foot{display:flex;align-items:center;gap:14px;}

.tgl{display:none !important;}

/* --------------------------------------------------------------- hero */

.hero{
  position:relative;
  min-height:min(92svh,880px);
  display:flex;align-items:center;
  padding-block:clamp(70px,12vw,130px);
  overflow:hidden;
  background:
    radial-gradient(85% 62% at 12% 100%, var(--gold-mist) 0%, rgba(243,233,210,0) 68%),
    linear-gradient(180deg,var(--paper) 0%,var(--warm) 100%);
}
/* Cappadocia, the day she picked him up. Her own photograph, bleeding off the
   right edge of the page; the type sits on white and the image carries the air. */
.hero__bg{
  position:absolute;top:0;right:0;bottom:auto;
  width:min(70%,980px);
  height:min(100%,96svh);
  z-index:0;overflow:hidden;
}
.hero__bg img{
  width:100%;height:100%;display:block;
  object-fit:cover;object-position:52% 42%;
}
.hero__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,
      var(--paper) 0%,
      var(--paper) 26%,
      rgba(255,255,255,.88) 36%,
      rgba(255,255,255,.42) 45%,
      rgba(255,255,255,.10) 54%,
      rgba(255,255,255,0) 62%),
    linear-gradient(180deg, rgba(255,253,247,.30) 0%, rgba(255,253,247,0) 20%, rgba(254,252,248,.30) 100%);
}
@media (max-width:900px){
  .hero{min-height:auto;padding-block:0 clamp(48px,9vw,80px);display:block;}
  .hero__bg{position:relative;width:100%;height:min(58svh,460px);}
  .hero__bg img{object-position:50% 28%;}
  .hero__scrim{
    top:auto;height:38%;bottom:0;
    background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 62%, var(--paper) 100%);
  }
  .hero__in{padding-top:clamp(26px,6vw,40px);}
}
.hero__in{position:relative;z-index:2;}
/* ch on this box would resolve against the small sans font, not the display
   face, and collapse the column. Constrain the heading in its own em instead. */
.hero__col{max-width:min(100%,1020px);}
.hero h1{max-width:12ch;margin-bottom:.34em;}
.hero__lead{max-width:52ch;margin-bottom:2.2em;}
.hero__col .actions{margin-bottom:2.4em;}

.reassure{
  font-size:.92rem;color:var(--muted);max-width:56ch;line-height:1.6;
  padding-left:16px;border-left:2px solid var(--gold-soft);
}

/* ------------------------------------------------------------- buttons */

.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--sans);font-size:1rem;font-weight:500;
  padding:14px 30px;border-radius:980px;
  text-decoration:none;cursor:pointer;border:1px solid transparent;
  letter-spacing:-0.006em;line-height:1.2;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),
             background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.btn--sm{font-size:.88rem;padding:10px 22px;}

/* Adopt = the solid gold, the primary act */
.btn--adopt{background:var(--grad-gold);color:#fff;box-shadow:0 1px 2px rgba(120,90,10,.22);}
.btn--adopt:hover{transform:translateY(-2px);box-shadow:0 10px 26px -6px rgba(150,105,15,.5);filter:saturate(1.08);}

/* Donate = ink, so the two primaries never compete */
.btn--give{background:var(--ink);color:#fff;}
.btn--give:hover{transform:translateY(-2px);box-shadow:0 10px 26px -8px rgba(18,16,12,.42);background:#000;}

.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-2);}
.btn--ghost:hover{border-color:var(--gold-mid);color:var(--gold-deep);transform:translateY(-2px);}

/* ------------------------------------------------------- lede / prose */

/* Two-column: gold eyebrow left, content right. Collapses on mobile. */
.lede{display:grid;grid-template-columns:190px 1fr;gap:clamp(22px,4vw,64px);align-items:start;}
.lede .eyebrow{margin-top:.55em;}
.lede__body{max-width:70ch;}

.sec--wide{max-width:22ch;}

.prose{max-width:68ch;font-size:1.06rem;line-height:1.75;}
.prose p{margin-bottom:1.35em;}
.prose h3{margin:2.2em 0 .7em;}
.prose a,.inlink,.tlink{
  color:var(--gold-deep);text-decoration:none;
  border-bottom:1px solid var(--gold-soft);
  transition:border-color .25s var(--ease),color .25s var(--ease);
}
.prose a:hover,.inlink:hover,.tlink:hover{border-bottom-color:var(--gold);color:var(--gold);}

.chapter{
  font-family:var(--sans);font-size:.7rem;font-weight:600;
  letter-spacing:.19em;text-transform:uppercase;color:var(--gold-deep);
  margin:0 0 .8em;
}
.dateline{font-size:.85rem;color:var(--muted);letter-spacing:.02em;margin-bottom:2em;}
.byline,.sig,.signoff{font-family:var(--serif);font-size:1.18rem;color:var(--ink);font-style:italic;}
.sig{margin-top:2.4em;padding-top:1.6em;border-top:1px solid var(--line);}

.pull,.quote{
  font-size:clamp(1.6rem,3.4vw,2.6rem);
  line-height:1.24;color:var(--ink);
  margin:1.6em 0;padding-left:clamp(18px,3vw,34px);
  border-left:2px solid var(--gold-mid);
}
.quote{font-style:italic;}

.note{
  font-size:.94rem;color:var(--muted);
  background:var(--cream);border:1px solid var(--line);
  border-radius:16px;padding:20px 24px;
}
.note--brass{border-color:var(--gold-soft);background:linear-gradient(180deg,#FFFDF8,var(--gold-mist));color:var(--ink-2);}
.hint,.submit-note,.ack{font-size:.88rem;color:var(--muted);}
.closer{font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.32;color:var(--ink);max-width:26ch;}

/* --------------------------------------------------------- the count */

.count{display:grid;gap:0;margin-top:clamp(30px,5vw,54px);}
/* The number column is sized to the numeral itself — a percentage column
   clips "1,000" at display size. */
.count__row,.count__left{
  display:grid;grid-template-columns:max-content minmax(0,1fr);
  gap:clamp(20px,4vw,52px);align-items:start;
  padding-block:clamp(26px,4vw,42px);
  border-top:1px solid var(--line);
}
.count__row:first-child{border-top:0;}

/* The numbers are the specs. Let them be enormous. */
.num{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(3.2rem,7.4vw,6.4rem);
  line-height:.9;letter-spacing:-0.04em;
  white-space:nowrap;
  color:var(--gold-deep);
  font-variant-numeric:lining-nums tabular-nums;
}
/* Gradient fill only where the clip is supported — otherwise the numbers
   would render as transparent text on white. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .num{
    background:var(--grad-gold);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;
  }
}
.num sub{font-size:.42em;vertical-align:baseline;bottom:0;opacity:.75;margin-right:.06em;}
.num sup{font-size:.42em;vertical-align:super;top:0;opacity:.8;margin-left:.02em;}

.count__t{padding-top:.5em;}
.count__t b{display:block;font-size:1.1rem;font-weight:600;color:var(--ink);margin-bottom:.35em;letter-spacing:-0.01em;}
.count__t span{display:block;color:var(--muted);font-size:1rem;line-height:1.62;max-width:46ch;}

/* The line under the hero lead: today's situation, not the origin story. */
.hero__now{
  font-size:clamp(1.02rem,1.5vw,1.2rem);
  font-weight:600;color:var(--ink);
  letter-spacing:-0.01em;max-width:44ch;
  margin:-1.2em 0 2.2em;
  padding-left:16px;border-left:2px solid var(--gold-mid);
}

/* The one that is not a victory */
.count__left{
  margin-top:clamp(26px,4vw,44px);
  border-top:1px solid var(--gold-soft);
  background:linear-gradient(180deg,rgba(243,233,210,.4),rgba(243,233,210,0));
  border-radius:0 0 var(--r) var(--r);
  padding-inline:clamp(18px,3vw,32px);
}
/* "0 walls" — the number the whole page is asking you to change. */
.count__left--hard{
  border-top-color:var(--gold-mid);
  background:linear-gradient(180deg,var(--gold-mist),rgba(243,233,210,.15));
  border-radius:var(--r);
  padding-block:clamp(30px,5vw,50px);
}
.count__left--hard .num{font-size:clamp(4.4rem,11vw,8.5rem);}

/* ---------------------------------------------------------- bleed/CTA */

.bleed{
  position:relative;overflow:hidden;
  padding-block:clamp(90px,14vw,180px);
  background:
    radial-gradient(80% 120% at 50% 0%, var(--gold-mist) 0%, rgba(243,233,210,0) 60%),
    var(--warm);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  text-align:center;
}
.bleed__star{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  opacity:.055;pointer-events:none;
}
.bleed__star .star{width:min(62vw,560px);height:min(62vw,560px);color:var(--gold);}
.bleed__in{position:relative;z-index:2;max-width:min(100%,780px);margin-inline:auto;}
.bleed__in h2,.bleed__in .sec{max-width:14ch;margin-inline:auto;}
.bleed__in .actions{justify-content:center;margin-top:2em;}
.bleed .lead{margin-inline:auto;}
/* The left gold rule reads as a mistake in a centred block. */
.bleed .reassure{
  border-left:0;padding-left:0;margin-top:1.6em;
  margin-inline:auto;text-align:center;max-width:48ch;
}

.divider{display:flex;align-items:center;justify-content:center;gap:18px;padding-block:clamp(34px,6vw,58px);}
.divider::before,.divider::after{
  content:"";height:1px;width:min(30%,220px);
  background:linear-gradient(90deg,transparent,var(--line-2));
}
.divider::after{background:linear-gradient(90deg,var(--line-2),transparent);}
.divider .star{color:var(--gold-soft);}

/* ------------------------------------------------------------ page head */

.phead{
  position:relative;
  padding-block:clamp(74px,11vw,140px) clamp(46px,7vw,84px);
  background:linear-gradient(180deg,var(--warm),var(--paper));
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.phead__in{position:relative;z-index:2;max-width:min(100%,900px);}
.phead h1{max-width:13ch;}
.phead__lead{max-width:58ch;margin-top:1.3em;}
.phead__ridge{
  position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold-soft),var(--gold-mid),var(--gold-soft),transparent);
  opacity:.6;
}

/* ---------------------------------------------------------- dog cards */

.dogs{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));
  gap:clamp(18px,2.6vw,30px);
  margin-top:clamp(30px,5vw,52px);
}
.dogs--one{grid-template-columns:minmax(0,420px);}

.dog{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform .38s var(--ease),box-shadow .38s var(--ease),border-color .38s var(--ease);
  display:flex;flex-direction:column;
}
.dog:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift);border-color:var(--line-2);}

.dog__media{
  aspect-ratio:4/3;
  background:
    radial-gradient(70% 70% at 30% 25%, #FFFDF8 0%, rgba(255,253,248,0) 70%),
    linear-gradient(150deg,var(--sand),var(--gold-mist));
  position:relative;
  display:flex;align-items:center;justify-content:center;
}
.dog__media img{width:100%;height:100%;object-fit:cover;}
/* Empty slot: a quiet gold star, never a broken-image icon */
.dog__media::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(closest-side,rgba(184,134,11,.10),transparent);
}
.dog__media .star{width:52px;height:52px;color:var(--gold-soft);position:relative;z-index:2;opacity:.85;}
.dog__media img ~ .star{display:none;}

.dog__body{padding:clamp(20px,2.4vw,26px);display:flex;flex-direction:column;flex:1;}
.dog__body .tag{margin-bottom:.95em;}
.dog__name{font-size:1.5rem;margin-bottom:.28em;}
.dog__meta{display:flex;flex-wrap:wrap;gap:.5em 1.1em;font-size:.8rem;color:var(--muted);
  letter-spacing:.05em;text-transform:uppercase;margin-bottom:1em;}
.dog__line{color:var(--muted);font-size:.98rem;line-height:1.62;margin-bottom:1.4em;}
.dog__cta{margin-top:auto;margin-bottom:0;}

.dog--empty{border-style:dashed;border-color:var(--line-2);box-shadow:none;background:var(--warm);}
.dog--empty:hover{transform:none;box-shadow:none;}
.dog--empty .dog__name{color:var(--muted);font-style:italic;}

.ph{color:var(--muted);font-style:italic;}
.slot{border:1px dashed var(--line-2);border-radius:16px;padding:22px;background:var(--warm);}

/* -------------------------------------------------------------- lists */

.lattice{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
  gap:clamp(20px,3vw,38px);
  margin-top:clamp(30px,5vw,52px);
}
.f,.use,.opt{
  padding-top:22px;border-top:1px solid var(--line-2);
}
.f h3,.use h3,.opt h3{margin-bottom:.5em;}
.f p,.use p,.opt p{color:var(--muted);font-size:.99rem;line-height:1.65;}

.uses,.opts,.grid,.facts{display:grid;gap:clamp(20px,3vw,38px);margin-top:clamp(26px,4vw,48px);}
.uses,.opts{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));}
.facts{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));}
.facts__hd{margin-bottom:1.4em;}

.tag{
  display:inline-flex;align-items:center;gap:.45em;
  align-self:flex-start;width:fit-content;
  font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-deep);background:var(--gold-mist);
  border-radius:980px;padding:6px 14px;
}
.tag--slot{background:var(--sand);color:var(--muted);}
.tag--home{background:#EFF6EE;color:#3F6B41;}

.grp{margin-bottom:1.6em;}
.glab{
  display:block;font-size:.74rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.55em;
}
.req{color:var(--gold);}
.code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.86rem;background:var(--cream);border:1px solid var(--line);
  border-radius:10px;padding:3px 8px;
}
.solo{max-width:60ch;}
.hp{position:absolute;left:-9999px;}

/* ------------------------------------------------------------- footer */

.foot{
  background:var(--cream);
  border-top:1px solid var(--line-2);
  padding-block:clamp(56px,8vw,90px);
  font-size:.92rem;
}
.foot__in{
  display:grid;grid-template-columns:1fr auto;
  gap:clamp(30px,5vw,70px);align-items:start;
}
.foot__mark{display:flex;align-items:center;gap:.55em;font-family:var(--serif);
  font-size:1.15rem;color:var(--ink);margin-bottom:.9em;}
.foot p{color:var(--muted);margin-bottom:1.3em;}
.foot a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line-2);}
.foot a:hover{color:var(--gold-deep);border-bottom-color:var(--gold-mid);}
.foot small{display:block;color:var(--muted);font-size:.82rem;line-height:1.65;max-width:62ch;}
.foot__nav{display:flex;flex-direction:column;gap:.7em;}
.foot__nav a{border:0;font-size:.9rem;}

/* --------------------------------------------------- reveal on scroll */

.rv{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .85s var(--ease),transform .85s var(--ease);
  will-change:opacity,transform;
}
.rv.is-in{opacity:1;transform:none;}

/* ------------------------------------------------------------ responsive */

@media (max-width:900px){
  .lede{grid-template-columns:1fr;gap:14px;}
  .lede .eyebrow{margin-top:0;}
  .foot__in{grid-template-columns:1fr;}
  .foot__nav{flex-direction:row;flex-wrap:wrap;gap:.9em 1.5em;}
}

@media (max-width:760px){
  .nav__links{display:none;}
  .burger{display:block;}
  .nav__give{display:none;}
  .nav__in{min-height:54px;}
  .drawer{inset-block-start:54px;}

  .hero{min-height:auto;padding-block:clamp(54px,14vw,84px) clamp(50px,12vw,76px);}
  .hero__col{max-width:none;}
  .actions{gap:10px;}
  .btn{width:100%;padding:15px 26px;}
  .bleed__in .actions .btn,.hero .actions .btn{width:100%;}

  .count__row,.count__left{grid-template-columns:1fr;gap:6px;align-items:start;}
  .num{font-size:clamp(3.4rem,17vw,5rem);}
  .count__t{margin-top:.3em;}
}

@media (max-width:420px){
  body{font-size:16px;}
  h1{font-size:clamp(2.6rem,11vw,3.4rem);}
}

/* ------------------------------------------------------------- motion */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
  .rv{opacity:1;transform:none;}
}

/* --------------------------------------------------------------- print */

@media print{
  .nav,.drawer,.bleed__star,.burger{display:none !important;}
  body{font-size:11pt;color:#000;}
  .rv{opacity:1 !important;transform:none !important;}
  a{text-decoration:underline;}
}


/* ---------------------------------------------------------------
   The real photographs — her own images, no library, no illustration
   --------------------------------------------------------------- */
.gal__h{
  font-family:var(--serif);
  font-size:clamp(1.55rem,3.3vw,2.5rem);
  line-height:1.16;letter-spacing:-.01em;color:var(--ink);
  max-width:22ch;margin:.3em 0 .45em;
}
.gal__note{color:var(--muted);max-width:60ch;margin-bottom:clamp(24px,3.2vw,38px);}
.gal__grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(196px,1fr));
  gap:clamp(8px,1.1vw,14px);
}
.gal__i{
  margin:0;overflow:hidden;border-radius:5px;
  background:var(--sand);aspect-ratio:1/1;
  border:1px solid var(--line);
}
.gal__i img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.gal__i:hover img{transform:scale(1.045);}
@media (max-width:560px){.gal__grid{grid-template-columns:repeat(2,1fr);}}
@media (prefers-reduced-motion:reduce){.gal__i img{transition:none;}}


/* --------------------------------------------------------------
   Hero, said as a quotation: a quiet lead-in, the line itself in
   hanging quotation marks, and her confirmation underneath.
   -------------------------------------------------------------- */
.hero__saythat{
  font-family:var(--sans);
  font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .9em;
}
.hero h1.hero__quote{
  max-width:none;
  font-size:clamp(2.3rem,4.9vw,4.1rem);
  line-height:1.04;
  letter-spacing:-0.02em;
  text-indent:-.4em;           /* hang the opening quote into the margin */
  margin-bottom:.24em;
  text-wrap:balance;
}
.hero__true{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.2rem,2.3vw,1.75rem);
  line-height:1.2;
  color:var(--gold-deep);
  margin:0 0 1.5em;
}
@media (max-width:900px){
  .hero h1.hero__quote{
    text-indent:0;max-width:100%;
    font-size:clamp(2rem,8vw,2.9rem);
  }
  .hero__quote br{display:none;}
}


/* ---------------------------------------------------------------
   Doccio, told in her own voice — 40 seconds, filmed on her phone
   --------------------------------------------------------------- */
.vid__h{
  font-family:var(--serif);
  font-size:clamp(1.55rem,3.3vw,2.5rem);
  line-height:1.16;letter-spacing:-.01em;color:var(--ink);
  max-width:20ch;margin:.3em 0 clamp(26px,3.4vw,44px);
}
.vid__grid{
  display:grid;grid-template-columns:minmax(0,340px) 1fr;
  gap:clamp(26px,4vw,60px);align-items:center;
}
.vid__player{
  border-radius:8px;overflow:hidden;
  border:1px solid var(--line-2);
  background:var(--sand);
  box-shadow:0 24px 60px -30px rgba(18,16,12,.34);
}
.vid__player video{
  width:100%;height:auto;display:block;aspect-ratio:9/16;
  background:#12100C;object-fit:cover;
}
.vid__text p{font-size:clamp(1rem,1.4vw,1.14rem);line-height:1.62;color:var(--ink-2);max-width:46ch;}
.vid__line{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(1.5rem,2.8vw,2.1rem);
  color:var(--gold-deep);margin-top:.7em;
}
@media (max-width:820px){
  .vid__grid{grid-template-columns:1fr;gap:clamp(22px,5vw,34px);}
  .vid__player{max-width:340px;margin-inline:auto;}
}


/* ---------------------------------------------------------------
   Full-bleed photo strips — the site should feel alive
   --------------------------------------------------------------- */
.strip{padding-block:0;background:var(--paper);}
.strip--tight{padding-block:0 clamp(10px,2vw,22px);}
.strip__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:3px;
  width:100%;
}
.strip__grid--4{grid-template-columns:repeat(4,1fr);}
.strip__i{margin:0;overflow:hidden;background:var(--sand);aspect-ratio:4/5;}
.strip__i img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.strip__i:hover img{transform:scale(1.05);}
.strip__cap{
  width:var(--measure);margin:clamp(16px,2.4vw,26px) auto 0;padding-inline:var(--gutter);
  font-size:.92rem;color:var(--muted);text-align:center;
}
@media (max-width:760px){
  .strip__grid,.strip__grid--4{grid-template-columns:repeat(2,1fr);}
  .strip__i{aspect-ratio:1/1;}
}
@media (prefers-reduced-motion:reduce){.strip__i img{transition:none;}}


/* ---------------------------------------------------------------
   The shelter, shown where it is described
   --------------------------------------------------------------- */
.tmedia{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
  margin-top:clamp(30px,4vw,52px);
}
.tmedia__i{margin:0;overflow:hidden;border-radius:4px;background:var(--sand);aspect-ratio:1/1;}
.tmedia__i--wide{grid-column:span 2;grid-row:span 2;aspect-ratio:1/1;}
.tmedia__i img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.tmedia__i:hover img{transform:scale(1.05);}
.tmedia__cap{
  grid-column:1/-1;margin-top:.9rem;
  font-family:var(--serif);font-style:italic;
  font-size:clamp(1.05rem,1.7vw,1.3rem);color:var(--gold-deep);
}
@media (max-width:760px){
  .tmedia{grid-template-columns:repeat(2,1fr);}
  .tmedia__i--wide{grid-column:span 2;grid-row:auto;aspect-ratio:4/3;}
}
@media (prefers-reduced-motion:reduce){.tmedia__i img{transition:none;}}


/* the video opens the story now: a touch more air above it */
.vid{padding-top:clamp(34px,5vw,64px);}


/* --------------------------------------------------------------
   Urgency — two weeks
   -------------------------------------------------------------- */
.urg{
  padding-block:clamp(48px,7vw,88px);
  background:linear-gradient(180deg,var(--gold-mist) 0%,var(--cream) 100%);
  border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
}
.urg__in{max-width:min(100%,860px);}
.urg__k{
  font-family:var(--serif);
  font-size:clamp(2.6rem,7vw,5.4rem);line-height:.98;letter-spacing:-.03em;
  color:var(--gold-deep);margin:0 0 .18em;
}
.urg__t{font-size:clamp(1.05rem,1.7vw,1.28rem);line-height:1.6;color:var(--ink-2);max-width:52ch;margin-bottom:1.6em;}
.tag--homed{background:#1F5C3A !important;color:#fff !important;}
.dog__homed{
  display:inline-block;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;
  color:#1F5C3A;font-weight:600;
}


/* --------------------------------------------------------------
   Adoption application form
   -------------------------------------------------------------- */
.afo{margin-top:clamp(28px,4vw,44px);max-width:min(100%,760px);}
.afo__row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,20px);}
.afo__f{display:block;margin-bottom:clamp(12px,1.6vw,20px);}
.afo__f--wide{grid-column:1/-1;}
.afo__f > span{
  display:block;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.5em;
}
.afo input[type=text],.afo input[type=email],.afo select,.afo textarea{
  width:100%;box-sizing:border-box;
  font-family:var(--sans);font-size:1rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--line-2);border-radius:3px;
  padding:.85em .95em;transition:border-color .2s ease;
}
.afo input:focus,.afo select:focus,.afo textarea:focus{outline:none;border-color:var(--gold-mid);}
.afo textarea{resize:vertical;line-height:1.55;}
.afo__chk{display:flex;gap:.75em;align-items:flex-start;margin:.6em 0 1.6em;font-size:.95rem;color:var(--ink-2);line-height:1.55;}
.afo__chk input{margin-top:.3em;flex:none;}
.afo__send{border:0;cursor:pointer;font:inherit;}
.afo__fine{margin-top:1.1em;font-size:.85rem;color:var(--muted);}
@media (max-width:640px){.afo__row{grid-template-columns:1fr;}}

/* ---------------------------------------------------------------
   JOURNAL — article pages and the index of them
   --------------------------------------------------------------- */
.phead--art h1{max-width:20ch;}
.phead--art .phead__lead{max-width:62ch;font-size:1.14rem;color:var(--ink-2);}
.phead--art .byline{margin-top:1.6em;font-size:1rem;color:var(--muted);font-style:normal;
  letter-spacing:.04em;}

.prose h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,3.2vw,2.05rem);
  line-height:1.22;color:var(--ink);margin:2.5em 0 .65em;letter-spacing:-.01em;}
.prose h2:first-child{margin-top:0;}
.prose h2::after{content:"";display:block;width:44px;height:1px;margin-top:.7em;
  background:var(--grad-gold);}
.prose .strong,.prose strong{color:var(--ink);}
.prose .pull{margin:2.2em 0;}

.jrs{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  grid-template-columns:repeat(auto-fit,minmax(310px,1fr));margin-top:2.4rem;}
.jr{background:var(--paper);padding:2.4rem 2.1rem 2.1rem;display:flex;flex-direction:column;
  transition:background .5s ease;}
.jr:hover{background:var(--cream);}
.jr__k{font-family:var(--sans);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-deep);margin-bottom:1.1em;}
.jr__h{font-family:var(--serif);font-weight:400;font-size:1.62rem;line-height:1.2;
  letter-spacing:-.01em;margin:0 0 .55em;}
.jr__h a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent;}
.jr__h a:hover{color:var(--gold-deep);border-bottom-color:var(--gold-soft);}
.jr__l{color:var(--muted);line-height:1.68;font-size:1rem;margin:0 0 1.5em;flex:1;}
.jr__m{margin:0;font-family:var(--sans);font-size:.76rem;letter-spacing:.14em;
  text-transform:uppercase;}
.jr__m a{color:var(--gold-deep);text-decoration:none;border-bottom:1px solid var(--gold-soft);
  padding-bottom:2px;}
.jr__m a:hover{color:var(--gold);border-bottom-color:var(--gold);}
.jrs--more{margin-top:1.8rem;}
@media (max-width:640px){.jr{padding:2rem 1.5rem 1.8rem;}.jr__h{font-size:1.42rem;}}
.jr__all{margin-top:1.8rem;font-family:var(--sans);font-size:.76rem;letter-spacing:.14em;
  text-transform:uppercase;}
.jr__all a{color:var(--gold-deep);text-decoration:none;border-bottom:1px solid var(--gold-soft);
  padding-bottom:2px;}
.jr__all a:hover{color:var(--gold);border-bottom-color:var(--gold);}

.jr{padding:0 0 2.1rem;}
.jr__media{display:block;overflow:hidden;background:var(--sand);margin-bottom:2rem;}
.jr__media img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1);}
.jr:hover .jr__media img{transform:scale(1.045);}
.jr>*:not(.jr__media){margin-left:2.1rem;margin-right:2.1rem;}

.artfig{margin:0;padding:0 var(--gutter);}
.artfig img{display:block;width:100%;max-width:var(--measure);margin:0 auto;
  aspect-ratio:16/7;object-fit:cover;background:var(--sand);}
.artfig figcaption{max-width:var(--measure);margin:.9em auto 0;font-family:var(--sans);
  font-size:.8rem;letter-spacing:.03em;color:var(--muted);}
@media (max-width:640px){.artfig img{aspect-ratio:4/3;}}
.wrap > .jrs:first-child{margin-top:0;}