/* "A new chapter" comp rebuilt as HTML.
   Artboard is 1672x941: every element is a percentage of it and every size is
   in cqw, so the whole composition scales as one piece.

   art/collage.webp is a cut from the comp, because HTML cannot reproduce it:
   the torn papers, the photograph and its frame, the pine boughs, the round
   stamp, the hand-written note, the background wash and the two small lines
   that sit on it. Everything to its left is live text. */

@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:"NcBody";src:url("../assets/fonts/newsreader-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"NcHand";src:url("../assets/fonts/castile-mastah-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}

.nc,.nc *{box-sizing:border-box}
.nc{
  --paper:#f5f0e8;
  --pine:#16291c;
  --brown:#764620;
  --ink:#373e2e;
  --taupe:#806d4f;
  /* 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);
  /* Match the gap above this section to the one above the question section.
     That gap is the origin section's padding-bottom plus the question
     section's padding-top, so it is reproduced as the same two clamps summed
     rather than guessed: 220.16px at 1440, 153.6 at 900, 144 at 390.
     padding-block-start, never the shorthand, which would zero the sides.
     Scoped to the adjacency so the standalone comp page keeps the exact
     artboard height it was measured against. */
}
.qs + .nc{
  padding-block-start:calc(clamp(96px,10vw,128px) + clamp(48px,6.4vw,96px));
  /* The two sections carry different paper (.qs 247,243,235 / .nc 245,240,232),
     which met as a hard 3-level step in one row across the full width. Ramp
     between them instead. Per reference/fade-effect.md: quintic smootherstep
     (6t^5-15t^4+10t^3) sampled at 0,.01,.06,.16,.32,.5,.68,.84,.94,.99,1, wide
     zone, many stops, and explicit rgb at BOTH ends - never the `transparent`
     keyword, which interpolates through grey and would muddy it.
     The ramp runs DOWNWARD only: .qs has zero bottom padding and its artboard
     reaches the boundary, so there is no runway above it, while .nc opens with
     ~220px of empty padding. Zone is 80% of that padding so it scales with the
     clamp instead of overrunning it at narrow widths. Scoped to the adjacency,
     so the standalone chapter comps (no preceding .qs) are untouched. */
  background:
    linear-gradient(to bottom,
      rgb(247 243 235) 0%,
      rgb(246.98 242.97 234.97) 10%,
      rgb(246.88 242.82 234.82) 20%,
      rgb(246.68 242.52 234.52) 30%,
      rgb(246.36 242.04 234.04) 40%,
      rgb(246 241.5 233.5) 50%,
      rgb(245.64 240.96 232.96) 60%,
      rgb(245.32 240.48 232.48) 70%,
      rgb(245.12 240.18 232.18) 80%,
      rgb(245.02 240.03 232.03) 90%,
      rgb(245 240 232) 100%)
      top/100% calc((clamp(96px,10vw,128px) + clamp(48px,6.4vw,96px)) * .8) no-repeat,
    var(--paper);
}
.nc__wrap{width:min(100%,var(--wrap));margin-inline:auto;padding-inline:var(--pad)}
.nc__canvas{
  position:relative;width:100%;
  aspect-ratio:1672 / 941;
  container-type:inline-size;          /* cqw resolves against the artboard */
  background:var(--paper);
  overflow:hidden;
  font-family:"NcBody",Georgia,serif;
}
.nc__canvas>*{position:absolute;margin:0}

.nc .nc__collage{
  /* The comp runs this art off the page edge. Inside the content column that
     becomes a hard cut, 48/255 on the right. It cannot be bled: widening the
     img with height:auto SCALES the whole artboard and breaks every position,
     and there is no image content past the comp's own edge. So the last 5% is
     eased out instead. The ramp is not linear: a straight gradient puts a
     visible Mach band where it starts. These stops hold alpha at .96 or above
     until 95%, so the live foot line (which ends at 94.9% of
     the canvas) is untouched, then fall away quickly. Every stop has a unit. */
  left:41.148%;top:0;width:58.852%;height:auto;
  -webkit-mask-image:linear-gradient(to right,#000 0%,#000 85.00%,rgba(0,0,0,0.9928) 85.75%,rgba(0,0,0,0.9720) 86.50%,rgba(0,0,0,0.9393) 87.25%,rgba(0,0,0,0.8960) 88.00%,rgba(0,0,0,0.8438) 88.75%,rgba(0,0,0,0.7840) 89.50%,rgba(0,0,0,0.7183) 90.25%,rgba(0,0,0,0.6480) 91.00%,rgba(0,0,0,0.5747) 91.75%,rgba(0,0,0,0.5000) 92.50%,rgba(0,0,0,0.4252) 93.25%,rgba(0,0,0,0.3520) 94.00%,rgba(0,0,0,0.2817) 94.75%,rgba(0,0,0,0.2160) 95.50%,rgba(0,0,0,0.1562) 96.25%,rgba(0,0,0,0.1040) 97.00%,rgba(0,0,0,0.0608) 97.75%,rgba(0,0,0,0.0280) 98.50%,rgba(0,0,0,0.0072) 99.25%,rgba(0,0,0,0.0000) 100.00%);
  mask-image:linear-gradient(to right,#000 0%,#000 85.00%,rgba(0,0,0,0.9928) 85.75%,rgba(0,0,0,0.9720) 86.50%,rgba(0,0,0,0.9393) 87.25%,rgba(0,0,0,0.8960) 88.00%,rgba(0,0,0,0.8438) 88.75%,rgba(0,0,0,0.7840) 89.50%,rgba(0,0,0,0.7183) 90.25%,rgba(0,0,0,0.6480) 91.00%,rgba(0,0,0,0.5747) 91.75%,rgba(0,0,0,0.5000) 92.50%,rgba(0,0,0,0.4252) 93.25%,rgba(0,0,0,0.3520) 94.00%,rgba(0,0,0,0.2817) 94.75%,rgba(0,0,0,0.2160) 95.50%,rgba(0,0,0,0.1562) 96.25%,rgba(0,0,0,0.1040) 97.00%,rgba(0,0,0,0.0608) 97.75%,rgba(0,0,0,0.0280) 98.50%,rgba(0,0,0,0.0072) 99.25%,rgba(0,0,0,0.0000) 100.00%);
}

/* ---------- eyebrow ---------- */
.nc .nc__eyebrow{
  left:7.476%;top:7.02%;display:flex;align-items:center;gap:1.55cqw;
  font-family:"NcSans",Arial,sans-serif;font-size:.845cqw;letter-spacing:.245em;
  text-transform:uppercase;color:var(--taupe);white-space:nowrap;line-height:1;
}
.nc .nc__eyebrow::after{content:"";width:9.39cqw;height:1px;background:var(--taupe);opacity:.75}

/* ---------- place line (top right of the collage) ---------- */
/* Was painted into collage.webp; now live text so it can be edited and stays
   crisp. Both baked lines started at x635 and ended at x934 despite different
   lengths, i.e. justified across a fixed column with the rule taking up the
   slack - so the rule is flex:1 rather than a fixed width, and the line holds
   that column whatever the wording. Metrics fitted to the original ink box:
   cap 11px and 221px wide at canvas 1672 => NcBody 14px, tracking .218em. */
.nc .nc__place,
.nc .nc__end{
  left:79.246%;width:17.889cqw;
  display:flex;align-items:center;gap:.610cqw;
  font-family:"NcBody",Georgia,serif;font-size:.8373cqw;letter-spacing:.218em;
  text-transform:uppercase;color:#635f4e;white-space:nowrap;line-height:1;
}
.nc .nc__place{top:4.192%}
.nc .nc__end{top:94.05%}
.nc .nc__place::after,
.nc .nc__end::after{content:"";flex:1;height:1px;background:currentColor;opacity:.6;position:relative;top:-.2895cqw}

/* ---------- headline ---------- */
.nc .nc__h{
  left:7.30%;top:11.37%;white-space:nowrap;max-width:none;
  font-family:"NcDisplay",Georgia,serif;font-weight:600;font-style:normal;
  font-size:6.60cqw;line-height:.9426;letter-spacing:-.022em;color:var(--pine);
}
.nc .nc__h em{display:block;font-weight:400;font-style:italic;color:var(--brown);letter-spacing:-.018em}

/* ---------- hand ---------- */
.nc .nc__script{
  left:7.30%;top:37.06%;font-family:"NcHand",cursive;font-size:2.004cqw;
  line-height:1;color:var(--brown);white-space:nowrap;
}

/* ---------- the two columns ---------- */
.nc .nc__col{font-size:1.245cqw;line-height:1.309;color:var(--ink);white-space:nowrap;max-width:none}
.nc .nc__col p+p{margin-top:.804em}
.nc .nc__col1{left:7.30%;top:41.54%}
.nc .nc__col2{left:28.35%;top:41.24%}
.nc .nc__divider{left:26.32%;top:44.6%;width:1px;height:34.1%;background:var(--ink);opacity:.28}

/* On the host pages (body.c12) "Summer, 2025" descends onto the first column
   line - script ink reaches 41.86%, col1 ink starts 41.84%. The standalone
   comp renders that gap at 2.19% already AND its columns run 5.3% taller,
   so the same shift there would push col2 (83.91%) into the close (82.25%).
   Hence scoped, not global. Divider moves with the columns to stay on their
   second line and keep its restored 34.1% length. */
.c12 .nc .nc__col1{top:43.54%}
.c12 .nc .nc__col2{top:43.24%}
.c12 .nc .nc__divider{top:43.86%}


/* ---------- closing ---------- */
.nc .nc__close{
  left:7.42%;top:82.25%;white-space:nowrap;
  font-family:"NcDisplay",Georgia,serif;font-weight:600;font-size:2.449cqw;
  line-height:1;letter-spacing:-.014em;color:var(--pine);
}
.nc .nc__rule{left:7.42%;top:90.1%;width:3.65%;height:2px;background:var(--brown);opacity:.9}

@media (max-width:900px){
  .nc__canvas{aspect-ratio:auto;overflow:visible;padding:26px 20px 34px}
  .nc__canvas>*{position:static}
  .nc .nc__collage{width:100%;margin:20px 0}
  .nc .nc__h{white-space:normal;font-size:2.5rem;line-height:1.06}
  .nc .nc__script{font-size:1.6rem;margin:10px 0 18px}
  .nc .nc__col{white-space:normal;font-size:1rem;line-height:1.62;max-width:62ch}
  .nc .nc__col br{display:none}
  .nc .nc__col1{margin-bottom:1.3em}
  .nc .nc__divider{display:none}
  .nc .nc__close{white-space:normal;font-size:1.6rem;margin-top:18px}
  .nc .nc__rule{width:64px;margin:12px 0 20px}
  .nc .nc__eyebrow{font-size:.68rem;width:auto}
  .nc .nc__place,.nc .nc__end{font-size:.68rem;width:auto;margin:0 0 10px}
}