/* ==========================================================================
   Neighbors for Neighbors — Sun Valley, Elkton, Virginia
   ========================================================================== */

:root{
  color-scheme: light;

  --paper:#EFEBE1;
  --surface:#E4DFD2;
  --sink:#DAD4C4;
  --line:#CBC4B2;
  --hair:#D8D2C2;
  --ink:#1D1F19;
  --stone:#6E6B5D;

  --field:#232A24;
  --field-ink:#EFEBE1;
  --field-stone:#A6AC99;

  --amber:#96701F;
  --amber-ink:#B88A2A;

  --serif:"Spectral", Georgia, "Times New Roman", serif;
  --sans:"Archivo", "Helvetica Neue", Arial, sans-serif;

  --t-micro:0.78rem;
  --t-small:0.94rem;
  --t-base:1.0625rem;
  --t-lede:1.22rem;

  --gut:1.5rem;
  --rail:11rem;
  --measure:34rem;

  box-sizing:border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (min-width:48rem){
  :root{ --t-base:1.125rem; --t-lede:1.32rem; --gut:2rem; }
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --paper:#16170F; --surface:#1E2017; --sink:#242619; --line:#383A2C; --hair:#2A2C1F;
    --ink:#E8E4D7; --stone:#92907F;
    --field:#1D2219; --field-ink:#EDE9DC; --field-stone:#979C86;
    --amber:#C9A24A; --amber-ink:#C9A24A;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --paper:#16170F; --surface:#1E2017; --sink:#242619; --line:#383A2C; --hair:#2A2C1F;
  --ink:#E8E4D7; --stone:#92907F;
  --field:#1D2219; --field-ink:#EDE9DC; --field-stone:#979C86;
  --amber:#C9A24A; --amber-ink:#C9A24A;
}

/* --------------------------------------------------------- base --------- */
*,*::before,*::after{box-sizing:inherit}
html{height:100%; scroll-padding-top: calc(4.5rem + env(safe-area-inset-top, 0px));}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:var(--t-base);
  line-height:1.64;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body::before{
  content:""; position:fixed; inset:0 0 auto;
  height:env(safe-area-inset-top, 0px);
  background:var(--paper); z-index:60;
}
img{max-width:100%; display:block; height:auto}
a{color:var(--amber-ink); text-underline-offset:0.18em; text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--amber-ink); outline-offset:3px}

.skip{
  position:absolute; left:-9999px;
  background:var(--field); color:var(--field-ink);
  padding:0.6rem 1rem; z-index:100;
  font-family:var(--sans); font-size:var(--t-micro);
}
.skip:focus{left:1rem; top:1rem}

/* ------------------------------------------------------- header --------- */
header.site{
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:50;
  background:var(--paper); border-bottom:1px solid var(--line);
}
header.site .bar{
  max-width:72rem; margin:0 auto; padding:0.8rem var(--gut);
  display:flex; flex-wrap:wrap; gap:0.35rem 2rem;
  align-items:baseline; justify-content:space-between;
}
header.site .mark{
  font-family:var(--serif); font-weight:600; font-size:1.02rem;
  letter-spacing:-0.006em; color:var(--ink); text-decoration:none; white-space:nowrap;
}
header.site .mark em{font-style:normal; color:var(--stone); font-weight:400}
header.site nav{
  display:flex; flex-wrap:wrap; gap:0 1.3rem;
  font-family:var(--sans); font-size:var(--t-micro); font-weight:500;
}
header.site nav a{color:var(--stone); text-decoration:none; padding:0.3rem 0; border-bottom:2px solid transparent}
header.site nav a:hover{color:var(--ink)}
header.site nav a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--amber-ink)}

/* ------------------------------------------------------- layout --------- */
.wrap{max-width:72rem; margin:0 auto; padding:0 var(--gut)}
.measure{max-width:var(--measure)}
.band{padding:3rem 0}
@media (min-width:48rem){ .band{padding:4.2rem 0} }
.band.tight{padding-top:0}
.band.rule{border-top:1px solid var(--hair)}

.rail{display:grid; gap:0.5rem}
.rail > .rail-head{margin:0}
@media (min-width:64rem){
  .rail{grid-template-columns:var(--rail) minmax(0,var(--measure)); gap:0 4rem}
  .rail > .rail-head{grid-column:1; padding-top:0.3rem}
  .rail > .rail-body{grid-column:2}
}

/* --------------------------------------------------------- type --------- */
h1,h2,h3{font-family:var(--serif); margin:0; font-weight:500; letter-spacing:-0.014em}
.display{font-size:clamp(2.2rem, 6.3vw, 4.1rem); line-height:1.06; letter-spacing:-0.02em}
.pagetitle{font-size:clamp(2rem, 5.2vw, 3.1rem); line-height:1.1; letter-spacing:-0.018em}
h2{font-size:clamp(1.45rem, 3vw, 1.95rem); line-height:1.2; margin-bottom:1rem}
.rail-head{font-size:1.14rem; font-weight:600; line-height:1.34; letter-spacing:-0.008em; margin-bottom:0.35rem}
p{margin:0 0 1.1rem}
p:last-child{margin-bottom:0}
.kicker{font-family:var(--sans); font-size:var(--t-micro); font-weight:500; color:var(--stone); margin:0 0 1.3rem}
.lede{font-size:var(--t-lede); line-height:1.45; color:var(--stone); max-width:30rem}

/* --------------------------------------------------------- hero --------- */
.hero{
  background-color:#1A1F17;
  background-image:
    linear-gradient(100deg, rgba(16,20,14,0.93) 0%, rgba(16,20,14,0.80) 42%, rgba(16,20,14,0.42) 100%),
    image-set(url("img/creek-hero-640.webp") 1x);
  background-size:cover;
  background-position:center 38%;
  color:#EFEBE1;
  border-bottom:1px solid var(--line);
  padding:4.2rem 0 4.4rem;
}
@media (min-width:48rem){ .hero{padding:7rem 0 7.4rem} }
@media (min-width:40rem){
  .hero{
    background-image:
      linear-gradient(100deg, rgba(16,20,14,0.94) 0%, rgba(16,20,14,0.83) 40%, rgba(16,20,14,0.36) 100%),
      url("img/creek-hero.webp");
  }
}
.hero .kicker{color:#B9C0A9}
.hero .display{max-width:17ch}
.hero .sub{margin-top:1.5rem; max-width:28rem; color:#C3C9B4; font-size:1.02rem; line-height:1.6}
.hero .place{font-family:var(--sans); font-size:var(--t-micro); font-weight:500; color:#8E967E; margin:2.4rem 0 0}

/* ------------------------------------------------------- litany --------- */
.litany{
  margin:0; padding:0; list-style:none; max-width:32rem;
  font-size:clamp(1.15rem, 2.6vw, 1.42rem); line-height:1.42;
}
.litany li{padding:0.58rem 0; border-top:1px solid var(--hair)}
.litany li:first-child{border-top:0; padding-top:0}
.litany li:last-child{border-bottom:1px solid var(--hair)}

/* ------------------------------------------------ feature type ---------- */
.thesis{
  margin:0; max-width:23ch;
  font-size:clamp(1.5rem, 4vw, 2.4rem); line-height:1.18;
  font-weight:500; letter-spacing:-0.016em;
  padding-left:1.2rem; border-left:3px solid var(--amber-ink);
}
.callout{background:var(--field); color:var(--field-ink); padding:3rem 0}
@media (min-width:48rem){ .callout{padding:4.4rem 0} }
.callout blockquote{
  margin:0; max-width:26ch;
  font-size:clamp(1.6rem, 4.6vw, 2.7rem); line-height:1.16;
  font-weight:400; letter-spacing:-0.016em;
}
.callout .attrib{font-family:var(--sans); font-size:var(--t-micro); font-weight:500; color:var(--field-stone); margin-top:1.5rem}
.statement{
  background:var(--surface); border-left:3px solid var(--amber-ink);
  padding:1.4rem 1.5rem; max-width:var(--measure);
  font-size:1.1rem; line-height:1.46; margin:0 0 2rem;
}

/* ------------------------------------------------------ figures --------- */
.shot{margin:0}
.shot img{width:100%; border-radius:2px}
.shot figcaption{font-family:var(--sans); font-size:var(--t-micro); color:var(--stone); margin-top:0.7rem; line-height:1.5}
.shot.band-img img{aspect-ratio:21/9; object-fit:cover}
.feature{display:grid; gap:2rem; align-items:center}
@media (min-width:64rem){ .feature{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:4rem} }

/* ------------------------------------------------------ entries --------- */
.entries{display:grid; gap:2.4rem}
@media (min-width:64rem){ .entries{gap:3rem} }
.entry p{margin:0}
.entry .instance{
  margin-top:0.85rem; font-size:var(--t-small); color:var(--stone);
  padding-left:0.9rem; border-left:2px solid var(--line);
}

/* -------------------------------------------------------- forms --------- */
form{max-width:var(--measure); display:grid; gap:1rem}
.row{display:grid; gap:0.3rem}
.two{display:grid; gap:1rem}
@media (min-width:34rem){ .two{grid-template-columns:2fr 1fr} }
label{font-family:var(--sans); font-size:var(--t-micro); font-weight:500; color:var(--stone)}
input[type=text],input[type=email],input[type=tel],textarea,select{
  font-family:var(--serif); font-size:1rem; color:var(--ink);
  background:var(--surface); border:1px solid var(--line);
  border-radius:2px; padding:0.6rem 0.7rem; width:100%;
}
textarea{min-height:5.5rem; resize:vertical}
select{
  appearance:none; -webkit-appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, currentColor 50%),
                   linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:calc(100% - 17px) calc(50% + 1px), calc(100% - 12px) calc(50% + 1px);
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  padding-right:2.2rem;
  line-height:1.5;
}
.check{display:flex; gap:0.65rem; align-items:flex-start; font-size:var(--t-small); line-height:1.45}
.check input{margin-top:0.3rem; flex:none; accent-color:var(--amber-ink)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
button{
  font-family:var(--sans); font-size:0.9rem; font-weight:600;
  color:var(--paper); background:var(--field); border:0; border-radius:2px;
  padding:0.72rem 1.5rem; cursor:pointer; justify-self:start;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) button{color:#16170F; background:var(--ink)}
}
:root[data-theme="dark"] button{color:#16170F; background:var(--ink)}
button:hover{opacity:0.88}
.sent{max-width:var(--measure); background:var(--surface); border-left:3px solid var(--amber-ink); padding:1.4rem 1.5rem}
.sent p:first-child{font-size:1.08rem; margin-bottom:0.6rem}
.disclosures{max-width:var(--measure); display:grid; gap:1.05rem; margin-top:2.4rem; padding-top:1.8rem; border-top:1px solid var(--hair)}
.disclosures p{margin:0; font-size:var(--t-small); color:var(--stone)}
.disclosures strong{color:var(--ink); font-weight:600}

/* ------------------------------------------------------- footer --------- */
footer.site{border-top:1px solid var(--line); background:var(--surface); padding:2.6rem 0 3rem}
footer.site .cols{display:grid; gap:1.6rem}
@media (min-width:48rem){ footer.site .cols{grid-template-columns:minmax(0,22rem) minmax(0,26rem); gap:4rem} }
footer.site p{margin:0 0 0.5rem; font-size:var(--t-small); color:var(--stone); line-height:1.6}
footer.site p:last-child{margin-bottom:0}
footer.site .fmark{font-family:var(--serif); font-size:1.05rem; font-weight:600; color:var(--ink)}
footer.site nav{display:flex; flex-wrap:wrap; gap:0 1.2rem; font-family:var(--sans); font-size:var(--t-micro); font-weight:500; margin-top:1rem}
footer.site nav a{color:var(--stone); text-decoration:none}
footer.site nav a:hover{color:var(--ink)}

@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important} }

/* --------------------------------------------------------- alert -------- */
.alert{
  max-width:var(--measure);
  background:var(--surface);
  border-left:3px solid #9A3B2C;
  padding:0.95rem 1.2rem;
  margin:0 0 1.4rem;
  font-size:var(--t-small);
  line-height:1.5;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .alert{border-left-color:#C9705C}
}
:root[data-theme="dark"] .alert{border-left-color:#C9705C}