/* "A question I could not ignore" - the client's comp rebuilt as HTML.
   Method matches the hero comp: the artboard is 1672x941, every element is
   positioned as a percentage of it and every size is in cqw, so the whole
   composition scales as one piece and never drifts from the reference.

   What is a cut from the comp, because HTML cannot reproduce it:
     collage.webp     the taped note, the pine branch, the arch photograph,
                      the polaroid, the round badge and both hand-lettered
                      lines - one asset so every overlap stays exact
   Everything else is live text. */

@font-face{font-family:"QSDisplay";src:url("../assets/fonts/fraunces-900.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"QSDisplay";src:url("../assets/fonts/fraunces-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"QSDisplay";src:url("../assets/fonts/fraunces-400italic.woff2") format("woff2");font-weight:400;font-style:italic;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:"QSBody";src:url("../assets/fonts/newsreader-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"QSHead";src:url("../assets/fonts/newsreader-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"QSBody";src:url("../assets/fonts/newsreader-400italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"QSGalliard";src:url("../assets/fonts/itc-galliard-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"QSSans";src:url("../assets/fonts/neue-frutiger-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"NcSans";src:url("../assets/fonts/neue-frutiger-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:R3Fraunces;src:url("../assets/fonts/fraunces-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"NcBody";src:url("../assets/fonts/newsreader-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* no bare *, html or body rules: this sheet is also loaded into
   concept-keepsake.html, where page-level resets would leak. The standalone
   page carries its own in a <style> block. */
.qs,.qs *{box-sizing:border-box}

.qs{
  --paper:#f7f3eb;
  --pine:#1a3529;   /* origin .fs2w h2 */
  --ink:#5e6861;    /* origin .fs2w .fs__letter p */
  --ochre:#b86e3f;  /* origin .fs__kicker */
  /* the live site's content column, copied from assets/site.css so this
     section lines up with every other one on the page */
  --wrap:1320px;
  --pad:clamp(22px,5vw,68px);
  background:var(--paper);
  /* breathing room above the artboard. The origin section above ends on its
     own bottom padding and this one started flush against it, so the two
     headlines sat too close. Scales with the viewport like the section
     rhythm either side of it. */
  padding-block-start:clamp(48px,6.4vw,96px);
}
.qs .qs__wrap{
  width:min(100%,1320px);
  max-width:1320px;
  margin-inline:auto;
  padding-inline:var(--pad);
}
.qs .qs__canvas{
  position:relative;width:100%;
  aspect-ratio:1672 / 941;
  container-type:inline-size;
  background:var(--paper);
  overflow:hidden;
}
.qs .qs__canvas>*{position:absolute;margin:0}

/* ---------- the three cuts ---------- */
.qs .qs__collage{left:0;top:4.570%;width:46.352%;height:auto}
/* ---------- eyebrow: the comp's rules are asymmetric, 62px left and 115px
   right, so this is not a centred flex row ---------- */
.qs .qs__eyebrow{
  left:47.19%;right:0;top:11.37%;width:auto;
  display:flex;align-items:center;gap:1.55cqw;
  font-family:"QSSans",Arial,sans-serif;font-size:.845cqw;
  letter-spacing:.245em;text-transform:uppercase;color:#806d4f;
  white-space:nowrap;text-wrap:nowrap;max-width:none;line-height:1;
}
.qs .qs__eyebrow::before{content:none;width:0;flex:none;background:none}
.qs .qs__eyebrow::after{
  content:"";flex:none;width:9.39cqw;height:1px;background:#806d4f;opacity:.75;
}
.qs .qs__eyebrow span{margin:0}

/* ---------- headline ---------- */
.qs .qs__h{
  max-width:none;
  left:47.40%;right:0;top:18.36%;
  /* matched to the chapter section's .nc__h: Fraunces 600, 6.60cqw, .9426
     leading, and that section's own pine (#16291c, not this section's #1a3529) */
  font-family:"NcDisplay",Georgia,serif;font-weight:600;font-style:normal;
  font-size:6.60cqw;line-height:.9426;letter-spacing:-.022em;color:#16291c;
}
.qs .qs__h .accent{color:#c56a32}
/* "matters" matched to the chapter headline's em (Ruidoso.): Fraunces 400
   italic, #764620, -.018em. font-family:inherit keeps QSDisplay, whose
   400-italic face is the same fraunces-400italic file NcDisplay uses.
   Specificity (0,2,1) also beats the keepsake page's .c12 main em (0,1,2),
   which would otherwise recolour it ochre in its own display face. */
.qs .qs__h em{display:block;font-family:inherit;font-weight:400;font-style:italic;color:#764620;letter-spacing:-.018em}

/* ---------- body: original single column ---------- */
.qs .qs__copy{
  left:47.49%;right:0;top:45.2%;
}
.qs .qs__copy>*{position:static;left:auto;top:auto;right:auto;width:auto}
.qs .qs__lead,.qs .qs__p,.qs .qs__p2{
  font-family:"NcBody",Georgia,serif;font-weight:400;font-style:normal;font-size:1.245cqw;line-height:1.45;
  color:#373e2e;max-width:none;margin:0;
}
.qs .qs__copy p+p{margin-top:.804em}

/* ---------- the close, and its rule ---------- */
.qs .qs__close{
  margin:1.15em 0 0;
  font-family:"QSDisplay",Georgia,serif;font-weight:600;font-style:normal;
  font-size:2.449cqw;line-height:1;letter-spacing:-.014em;color:#16291c;
  text-wrap:nowrap;max-width:none;
}
.qs .qs__close em,.qs .qs__close b{font:inherit;color:inherit}
.qs .qs__rule{display:block;width:3.65cqw;height:2px;margin-top:1.94cqw;background:#764620;opacity:.9}