/* "We came to build a park. We found a community." - comp replica.
   Pictorial content (forest, photographs, badge, sprig, handwriting, icons,
   rules, brush band) is one inpainted plate; every word is live text placed on
   the 1672x941 artboard. cqw resolves against .cx__canvas, so type and position
   scale together at any width. */
@font-face{font-family:CxDisplay;src:url("../assets/fonts/fraunces-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"NcDisplay";src:url("../assets/fonts/fraunces-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"NcDisplay";src:url("../assets/fonts/fraunces-400italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:CxDisplay;src:url("../assets/fonts/fraunces-900.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:CxDisplay;src:url("../assets/fonts/fraunces-400italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:CxBody;src:url("../assets/fonts/newsreader-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:CxSans;src:url("../assets/fonts/neue-frutiger-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:CxBody;src:url("../assets/fonts/newsreader-400italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}

/* Section-scoped only. No bare :root / * / html / body / img rules live here:
   this sheet is loaded by the keepsake and root pages too, and globals would
   repaint the host body. The standalone page keeps its resets inline. */
.cx *{box-sizing:border-box}
.cx img{max-width:100%;height:auto;display:block}

.cx{
  --cx-paper:#f6f2ea;
  -webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;
  --wrap:1320px;
  --pad:clamp(22px,5vw,68px);
  background:var(--cx-paper);
}
/* Same canvas-to-canvas gap as Choosing what Matters → Then came Ruidoso
   (.qs + .nc padding-block-start). Scoped to the adjacency so the standalone
   community comp is unchanged. */
.nc + .cx{
  padding-block-start:calc(clamp(96px,10vw,128px) + clamp(48px,6.4vw,96px));
  /* Then came paper is 245,240,232. The community plate's top cream is
     248,244,237 — brighter, and the plate crops as a hard rectangle after this
     padding. Ramp the full padding from nc paper to that plate cream (never
     `transparent`; quintic smootherstep at tenths) so the two sections meet
     as one field. A separate veil on .cx__canvas then melts the plate's tree
     tops. Per reference/fade-effect.md. */
  background:
    linear-gradient(to bottom,
      rgb(245 240 232) 0%,
      rgb(245.03 240.03 232.04) 10%,
      rgb(245.17 240.23 232.29) 20%,
      rgb(245.49 240.65 232.82) 30%,
      rgb(245.95 241.27 233.59) 40%,
      rgb(246.5 242 234.5) 50%,
      rgb(247.05 242.73 235.41) 60%,
      rgb(247.51 243.35 236.18) 70%,
      rgb(247.83 243.77 236.71) 80%,
      rgb(247.97 243.97 236.96) 90%,
      rgb(248 244 237) 100%)
      top/100% calc(clamp(96px,10vw,128px) + clamp(48px,6.4vw,96px)) no-repeat,
    rgb(248 244 237);
}
/* the site content column, same values the other sections use */
.cx__wrap{width:min(100%,var(--wrap));margin-inline:auto;padding-inline:var(--pad)}
.cx__canvas{
  position:relative;width:100%;
  aspect-ratio:1672 / 941;container-type:inline-size;overflow:hidden;
  background:rgb(248 244 237);
}
.cx__canvas>*{position:absolute;margin:0;z-index:2}
.cx .cx__plate{left:0;top:0;width:100%;height:100%;pointer-events:none;user-select:none;z-index:0}
/* Overlay, never mask. Exact plate-top cream; rgba(...,0) not the transparent
   keyword. Smootherstep slow at the crop and at the crest. Zone is the top
   tenth of the artboard — wide enough to hide the tree-top crop, short enough
   that OUR STORY is past the veil. */
.cx .cx__canvas::after{
  content:"";position:absolute;left:0;right:0;top:0;height:10%;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(248,244,237,1) 0%,
    rgba(248,244,237,.99) 10%,
    rgba(248,244,237,.94) 20%,
    rgba(248,244,237,.84) 30%,
    rgba(248,244,237,.68) 40%,
    rgba(248,244,237,.5) 50%,
    rgba(248,244,237,.32) 60%,
    rgba(248,244,237,.16) 70%,
    rgba(248,244,237,.06) 80%,
    rgba(248,244,237,.01) 90%,
    rgba(248,244,237,0) 100%);
}

/* --- corner marks, letterspaced caps --- */
.cx .cx__corner{
  font-family:CxBody,Georgia,serif;font-weight:400;font-size:.682cqw;
  letter-spacing:.344em;text-transform:uppercase;color:#7a807d;
  line-height:1.84;white-space:nowrap;
}
.cx .cx__tl{left:4.725%;top:8.18%}
.cx .cx__bl{left:2.27%;top:92.24%;letter-spacing:.268em;line-height:1.58}

/* --- eyebrow --- */
/* matched to the chapter section's .nc__eyebrow: Neue Frutiger .845cqw, .245em,
   taupe, and its layout - a flex row whose ::after supplies the trailing rule.
   The comp's own rules either side of this text were baked into the plate and
   have been erased there, so the CSS rule is not doubled on top of them. */
/* left matches the headline's first letter, not the comp's own position:
   the headline ink starts at comp-x 874.1 and both runs have ~0.2px of side
   bearing, so the same left value lines the two up. */
.cx .cx__eyebrow{
  left:52.261%;top:6.87%;display:flex;align-items:center;gap:1.55cqw;
  font-family:CxSans,Arial,sans-serif;font-size:.845cqw;letter-spacing:.245em;
  text-transform:uppercase;color:#806d4f;white-space:nowrap;line-height:1;
}
.cx .cx__eyebrow::after{content:"";width:9.39cqw;height:1px;background:#806d4f;opacity:.75}

/* --- headline ---
   Fitted against the comp's own letterforms, not assumed: the comp's roman W is
   58 wide at cap 45 and its italic W 63 at cap 47. Fraunces gives 66/65 at those
   caps, Newsreader 62/62 - so this is Newsreader, and the earlier Fraunces
   "match" on line 2 was a coincidence at a wrong cap height. Each line carries
   its own size and tracking; the two do not fit one setting. */
/* Matched to the chapter section's .nc__h: Fraunces 600, .9426 leading,
   -.022em, that section's pine #16291c. SIZE is the one thing that cannot be
   copied: .nc__h runs 6.60cqw from left 7.30% over two short lines, while this
   headline starts at 52.27% with 565px of room and measures 765px at 6.60cqw.
   Two lines do not fit either - 147px needed against 104px before the body,
   which is pinned to the plate's painted quote band. 4.83cqw is the largest
   that fits on one line; everything else matches exactly. */
.cx .cx__h,
.c12 main .cx .cx__h{
  left:52.27%;top:10.6%;white-space:nowrap;
  font-family:"NcDisplay",Georgia,serif;font-weight:600;font-style:normal;color:#16291c;
}
.cx .cx__h span{display:block;font-family:"NcDisplay",Georgia,serif;font-size:6.60cqw;line-height:.9426;letter-spacing:-.022em}
/* "Began" matched to .nc__h em ("Ruidoso."): Fraunces 400 italic, #764620,
   6.60cqw, -.018em. font-family:inherit keeps CxDisplay, whose 400-italic
   face is the same fraunces-400italic file NcDisplay uses. Specificity
   (0,2,1) also beats .c12 main em, which would otherwise recolour it. */
.cx .cx__h em{display:block;font-family:inherit;font-weight:400;font-style:italic;font-size:6.60cqw;line-height:.9426;color:#764620;letter-spacing:-.018em}

/* --- body --- */
.cx .cx__p{
  font-family:CxBody,Georgia,serif;font-weight:400;font-size:1.245cqw;
  line-height:1.443;color:#373e2e;white-space:nowrap;
}
/* p1 opens with "We came to build a park. We found a community." and runs five
   lines (was four); everything below it sits one line advance lower:
   1.245cqw x 1.443 = 30.04px of 941 = +3.19%. */
.cx .cx__p1{left:52.75%;top:37.33%}
.cx .cx__p2{left:52.75%;top:55.12%}
.cx .cx__p3{left:52.75%;top:66.76%}
.cx .cx__p4{left:52.75%;top:81.27%}

/* --- pull quote: wash + ochre tick travel with the line --- */
.cx .cx__pull{
  left:51.914%;top:58.24%;width:37.56%;height:7.226%;
  z-index:1;
}
.cx .cx__wash{
  position:absolute;left:0;top:0;width:100%;height:100%;
  pointer-events:none;user-select:none;display:block;
}
/* The ochre tick that sat baked in quote-wash.webp (core 140,88,56) is now a
   live rect so it can carry exactly the chapter's accent declaration:
   .nc__rule is background:#764620 (--brown) at opacity .9. Same box as the
   baked stroke: x14.6-17.6 of 628, y6-63 of 68. */
.cx .cx__tick{position:absolute;left:2.33%;top:8.8%;width:.48%;height:83.8%;background:#764620;opacity:.9}

.cx .cx__pull .cx__quote{
  position:absolute;left:8.27%;top:32.57%;white-space:nowrap;margin:0;
  font-family:CxBody,Georgia,serif;font-weight:400;font-style:italic;
  font-size:2.010cqw;line-height:1;letter-spacing:-.0264em;color:#764620;
}

/* --- value words ---
   Laid out from the client's reference (ibb.co/nsfn5fP7, kept as
   /root/ruidoso-ref/last-line-ref.png): one italic run, "Faith. Family. Service.
   Kindness. Compassion. Community.", in the accent brown, words a normal sentence
   apart. The reference's ink-to-ink word gap is 0.75 of its cap height; at this
   size that is ~11.5 comp px, which the word-spacing below produces (measured).
   Size is the pull quote's (.cx__quote, 2.010cqw) by request; place and clearance
   under the last paragraph as the six separate words had. Colour is the accent (#764620); the reference's ink measures
   121,71,43 modal, i.e. that brown at full strength, not the .9 of the rules. */
.cx .cx__values{
  left:52.75%;top:91.95%;font-family:CxBody,Georgia,serif;font-weight:400;font-style:italic;
  font-size:2.010cqw;line-height:1;letter-spacing:-.030em;word-spacing:.26em;color:#764620;white-space:nowrap;
}

@media (max-width:900px){
  /* Below the artboard the replica stops being a replica and becomes a readable
     stack: the comp's hard line breaks and per-line display sizes are dropped,
     since both are artefacts of the fixed 1672px canvas. */
  .cx__canvas{aspect-ratio:auto;overflow:visible;padding-block:22px 34px}
  .cx .cx__canvas::after{content:none}
  .cx__canvas>*{position:static}
  .cx .cx__plate{width:100%;height:auto;margin-bottom:20px}
  .cx .cx__corner{font-size:.64rem;letter-spacing:.24em;line-height:1.85;margin-bottom:14px}
  .cx .cx__eyebrow{font-size:.68rem;width:auto;margin-bottom:12px}
  .cx .cx__h{white-space:normal;margin-bottom:16px}
  .cx .cx__h span{font-size:1.95rem;line-height:1.12;letter-spacing:-.014em}
  .cx .cx__h em{font-size:1.95rem;line-height:1.2;letter-spacing:-.012em}
  .cx .cx__p{white-space:normal;font-size:1rem;line-height:1.66;margin-bottom:1.05em;max-width:64ch}
  .cx .cx__p br,.cx .cx__h br{display:none}
  .cx .cx__wash,.cx .cx__tick{display:none}
  .cx .cx__pull{width:auto;height:auto}
  .cx .cx__pull .cx__quote{position:static;left:auto;top:auto}
  .cx .cx__quote{white-space:normal;font-size:1.3rem;line-height:1.3;letter-spacing:-.01em;margin:0 0 1.1em;
    padding-left:14px;border-left:3px solid #764620}
  .cx .cx__values{white-space:normal;font-size:1.02rem;line-height:1.6;margin:0 0 8px}
  .cx .cx__bl{margin-top:14px}
}