/* "This story is still being written." - replica of the client's 1672x941 comp.
   One inpainted plate carries the art (arch photo, mat, sprig, seal, the card's
   paper and pine mark, the engraved range); every word, the card's rules and
   its button are live on a container-query artboard. (The top-right caps and the
   foot line under the engraving were removed at the client's request.) Positions are comp px as
   % of 1672/941, sizes in cqw. */
@font-face{font-family:FxPlay;src:url("../assets/fonts/playfair-roman-latin.woff2") format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:FxPlay;src:url("../assets/fonts/playfair-italic-latin.woff2") format("woff2");font-weight:400 900;font-style:italic;font-display:swap}
/* Share the chapter's rendered headline and closing faces on every page. */
@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:R3Fraunces;src:url("../assets/fonts/fraunces-400italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:FxSans;src:url("../assets/fonts/neue-frutiger-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:FxBody;src:url("../assets/fonts/newsreader-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:FxItal;src:url("../assets/fonts/fraunces-400italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:FxHand;src:url("../assets/fonts/castile-mastah-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

.fx *{box-sizing:border-box}
.fx img{max-width:100%;height:auto;display:block}
.fx{--fx-paper:rgb(248 244 236);-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;
  --wrap:1320px;--pad:clamp(22px,5vw,68px);background:var(--fx-paper);overflow:hidden}
/* Match the visible closing-copy-to-artwork gap of Community to Gratitude,
   including the artwork's blank paper and the mountain's lower placement.
   The paper-color transition spans the actual empty top padding. */
.gx + .fx{
  --fx-visible-gap-adjustment:18px;
  --fx-join-space:calc(clamp(96px,10vw,128px) + clamp(48px,6.4vw,96px) + var(--fx-visible-gap-adjustment));
  padding-block-start:var(--fx-join-space);
  padding-block-end:clamp(86px,10vw,152px);
  /* the closing paper now equals the gratitude paper (248,244,236): no transition needed */
  background:var(--fx-paper);
}
@media (min-width:901px){
  .gx + .fx{
    --fx-visible-gap-adjustment:calc((min(100vw,1320px) - 2 * clamp(22px,5vw,68px)) * .0726);
  }
}

.fx__wrap{width:min(100%,var(--wrap));margin-inline:auto;padding-inline:var(--pad)}
.fx__canvas{position:relative;width:100%;aspect-ratio:1672 / 941;container-type:inline-size;overflow:visible;background:var(--fx-paper)}
.fx__canvas>*{position:absolute;margin:0;z-index:2}
/* The plate has a 220px outpaint gutter before the original 1672px canvas.
   Render it in original-canvas units so every old element stays aligned while
   the completed sprig is free to bleed left through the site margin. */
.fx .fx__plate{left:-13.157895%;top:0;width:113.157895%;max-width:none;height:100%;pointer-events:none;user-select:none;z-index:0}
/* Blend only the plate's outer paper gutters into the full-width field. The
   photograph, sprig, seal, card and divider remain inside the opaque region;
   live type is not masked. Preserve the sprig's approved leftward bleed. */
.fx .fx__plate{
  -webkit-mask-image:
    linear-gradient(to right,transparent 0%,#000 5%,#000 94%,transparent 100%),
    linear-gradient(to bottom,transparent 0%,#000 3%,#000 95%,transparent 100%),
    url("art/column-divider-mask.svg");
  mask-image:
    linear-gradient(to right,transparent 0%,#000 5%,#000 94%,transparent 100%),
    linear-gradient(to bottom,transparent 0%,#000 3%,#000 95%,transparent 100%),
    url("art/column-divider-mask.svg");
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-composite:source-in,source-in;
  mask-composite:intersect,intersect;
}
.fx a{color:inherit;text-decoration:none}

/* --- caps voice: Newsreader, letterspaced --- */
.fx .fx__cardcaps,.fx .fx__btn span{font-family:FxBody,Georgia,serif;text-transform:uppercase;white-space:nowrap;line-height:1}

/* --- eyebrow: same voice, rule and headline relationship as .cx__eyebrow --- */
.fx .fx__eyebrow{
  left:51.07%;top:9.96%;display:flex;align-items:center;gap:1.55cqw;
  font-family:FxSans,Arial,sans-serif;font-size:.845cqw;letter-spacing:.245em;
  text-transform:uppercase;color:#806d4f;white-space:nowrap;line-height:1;
}
.fx .fx__eyebrow::after{content:"";width:9.39cqw;height:1px;background:#806d4f;opacity:.75}

/* --- headline --- */
/* the host page sets .c12 main h2 (font, colour, tracking, leading, text-wrap);
   the second selector outranks it so the embed renders as the standalone does */
/* Match the chapter's computed typography directly: NcDisplay for the roman
   line, and R3Fraunces for the italic line as selected by the host's h2 em rule.
   Both render Fraunces at 6.60cqw with the chapter's leading and tracking. */
.fx .fx__h,.c12 main .fx .fx__h{left:50.9%;text-wrap:nowrap;top:14.06%;white-space:nowrap;font-family:"NcDisplay",Georgia,serif;font-weight:600;font-style:normal;font-size:6.60cqw;line-height:.9426;letter-spacing:-.022em;color:#16291c}
.fx .fx__h span{display:block;font-size:6.60cqw;line-height:.9426;letter-spacing:-.022em}
.fx .fx__h em{display:block;font-family:R3Fraunces,"ITC Galliard",Georgia,serif;font-weight:400;font-style:italic;font-size:6.60cqw;line-height:.9426;letter-spacing:-.018em;color:#764620;margin:0}

/* --- body: Newsreader, two columns --- */
.fx .fx__p{width:21.15%}
.fx .fx__p,.fx .fx__still{max-width:none;white-space:nowrap;font-family:"NcBody",Georgia,serif;font-weight:400;font-style:normal;font-size:1.245cqw;line-height:1.309;letter-spacing:normal;color:#373e2e;-webkit-text-stroke:0;paint-order:normal}
.fx .fx__l1,.fx .fx__l2,.fx .fx__l3,.fx .fx__l4,.fx .fx__still{left:51.6%}
/* Both copy columns share the left column's existing measure. Let the right
   copy wrap to that width instead of its narrower, comp-specific line breaks. */
.fx .fx__r1,.fx .fx__r2,.fx .fx__r3,.fx .fx__r4{left:76.85%;white-space:normal}
.fx .fx__r1 br,.fx .fx__r2 br,.fx .fx__r3 br,.fx .fx__r4 br{display:none}
/* Keep the chapter divider's 1px ink rule, 28% opacity and column inset.
   Inset each end .675cqw (8px at the 1184px canvas) from the complete copy:
   first paragraph at 39.40% through the last paragraph's four lines at 77.35%. */
.fx .fx__divider{left:74.82%;top:calc(39.40% + .675cqw);width:1px;height:calc(37.95% + 5.16882cqw);background:#373e2e;opacity:.28;pointer-events:none}
/* The new opening sentence adds one lead-paragraph line. Shift the remaining
   left copy by that line's 1.245cqw × 1.43 pitch, preserving the existing gaps. */
.fx .fx__l1{top:39.40%;line-height:1.43}.fx .fx__l2{top:calc(47.21% + 1.78035cqw)}.fx .fx__l3{top:calc(65.73% + 1.78035cqw)}
.fx .fx__r1{top:39.56%}.fx .fx__r2{top:49.46%}.fx .fx__r3{top:56.41%}.fx .fx__r4{top:77.35%}
/* Same regular body-copy typography as .fx__l2; follow the extra opening line. */
.fx .fx__still{top:calc(74.34% + 1.78035cqw)}
/* Closing statement beneath BOTH columns, mirroring .nc__close. The last
   right paragraph starts at 77.35% and occupies 6.51882cqw; add the chapter's
   measured 2.04cqw text-to-close gap. Let the line span the whole copy area. */
.fx .fx__l4{top:calc(77.35% + 8.55882cqw);width:48.4%;font-family:"NcDisplay",Georgia,serif;font-weight:600;font-style:normal;font-size:2.449cqw;line-height:1;letter-spacing:-.014em;color:#16291c}
/* Copy .nc__rule and its 7.85% artboard offset from the closing statement. */
.fx .fx__rule{display:block;left:51.6%;top:calc(85.20% + 8.55882cqw);width:3.65%;height:2px;background:#764620;opacity:.9;pointer-events:none}
@media (min-width:901px){
  /* The standalone needs paper below its canvas for the accent. Host pages
     already have larger bottom padding from .gx + .fx. */
  .fx{padding-block-end:16px}
}


/* --- the card: paper and pine mark are in the plate; rules, caps, lines and button are live --- */
.fx .fx__card{left:21.41%;top:62.6%;width:18.42%;height:27.63%}
.fx .fx__card>*{position:absolute;left:0;right:0;margin:0}
.fx .fx__cardcaps{top:2.2%;text-align:center;font-size:1.056cqw;letter-spacing:.178em;color:#5e3a1e;
  padding-bottom:.86cqw;border-bottom:2px solid #a5937f}
/* Keep the card's approved bold Fraunces italic voice and original size,
   independent of the regular body-copy paragraph. Row spacing stays intact. */
.fx .fx__stillcaps{top:17.6%;display:grid;font-family:FxItal,Georgia,serif;font-style:italic;font-weight:400;font-size:1.432cqw;letter-spacing:normal;text-transform:none;color:#12291a;-webkit-text-stroke:.04em #12291a;paint-order:stroke fill;text-align:center;line-height:1}
.fx .fx__stillcaps span{display:block;padding:.72cqw 0 .54cqw;border-bottom:1px solid #d0c5b5;white-space:nowrap}
.fx .fx__stillcaps span:last-child{border-bottom:0}
.fx .fx__btn{top:75.4%;bottom:0;background:#233624;color:#f8f5ea;display:flex;align-items:center;justify-content:center;gap:.5cqw}
.fx .fx__btn span{font-size:.88cqw;letter-spacing:.267em;position:relative;top:.05cqw}
.fx .fx__btn svg{width:.9cqw;height:auto;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}

/* --- script, hand-set at an angle --- */
.fx .fx__script{left:4.72%;top:78.5%;white-space:nowrap;font-family:FxHand,cursive;font-size:1.18cqw;line-height:1.95;color:#8b6446;
  transform:rotate(-9.5deg);transform-origin:0 0}

@media (max-width:900px){
  .fx .fx__divider{display:none}
  .fx__canvas{aspect-ratio:auto;overflow:visible;padding-block:22px 34px}
  .fx__canvas>*{position:static}
  .fx .fx__plate{width:113.157895%;max-width:none;height:auto;margin-left:-13.157895%;margin-bottom:20px}
  .fx .fx__eyebrow{font-size:.68rem;width:auto;margin-bottom:12px}
  .fx .fx__h,.c12 main .fx .fx__h{white-space:normal;font-size:2.5rem;line-height:1.06;margin-bottom:16px}
  .fx .fx__h span{font-size:2.5rem;line-height:1.06}
  .fx .fx__h em{font-size:2.5rem;line-height:1.06;margin:0}
  .fx .fx__p,.fx .fx__still{width:auto;white-space:normal;font-size:1rem;line-height:1.66;margin-bottom:1.05em;max-width:64ch}
  .fx .fx__l4{font-size:1.6rem;line-height:1;margin-top:18px;margin-bottom:0}
  .fx .fx__rule{width:64px;margin:12px 0 20px}
  .fx .fx__p br,.fx .fx__still br,.fx .fx__script br{display:none}
  .fx .fx__card{width:min(100%,360px);height:auto;background:#eee8dc;padding:18px;margin:8px 0 18px;box-shadow:0 10px 22px -16px rgba(40,32,18,.5)}
  .fx .fx__card>*{position:static}
  .fx .fx__cardcaps{font-size:.68rem;padding-bottom:10px;margin-bottom:10px}
  .fx .fx__stillcaps{font-size:1rem;-webkit-text-stroke:.6px #12291a}
  .fx .fx__stillcaps span{padding:9px 0}
  .fx .fx__btn{margin-top:14px;padding:13px 16px;gap:10px}
  .fx .fx__btn span{font-size:.68rem}
  .fx .fx__btn svg{width:14px}
  .fx .fx__script{white-space:normal;transform:none;font-size:1.5rem;line-height:1.3}
}