/* "This is more than a place to park your RV." (from the heart) - replica of the client's 1672x941 comp.
   One inpainted plate carries the art (portrait arch on torn paper, seal, sprig and cone, note card
   with its short rule, the engraved pine at the left, contour lines, the mountain wash, the signature); every word,
   the eyebrow rule and the rule under the headline are live on a container-query artboard.
   Positions are comp px as % of 1672/941, sizes in cqw. */
@font-face{font-family:SyDisplay;src:url("../assets/fonts/newsreader-var-roman.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:SyDisplay;src:url("../assets/fonts/newsreader-var-italic.woff2") format("woff2");font-weight:200 800;font-style:italic;font-display:swap}
@font-face{font-family:SxBody;src:url("../assets/fonts/newsreader-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:SxBody;src:url("../assets/fonts/newsreader-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:SySans;src:url("../assets/fonts/neue-frutiger-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:SyHand;src:url("../assets/fonts/castile-mastah-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

.sy *{box-sizing:border-box}
.sy img{max-width:100%;height:auto;display:block}
.sy{--sy-paper:#f9f2e4;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;
  --wrap:1320px;--pad:clamp(22px,5vw,68px);background:var(--sy-paper)}
/* One broad quintic smootherstep transition crosses the Journey section's bottom
   padding and the sign-off's top paper gutter. Both sections sample the same
   gradient at matching positions, including the join. Its 240-360px run eases
   slowly at both ends without changing the approved content spacing. */
.fx:has(+ .sy),.fx + .sy{
  --sy-join-space:clamp(240px,25vw,360px);
  --sy-journey-tail:clamp(86px,10vw,152px);
  --sy-join-fade:linear-gradient(to bottom,
    rgb(248 244 236) 0%,
    rgb(248.01 243.98 235.93) 10%,
    rgb(248.06 243.88 235.54) 20%,
    rgb(248.16 243.67 234.7) 30%,
    rgb(248.32 243.37 233.46) 40%,
    rgb(248.5 243 232) 50%,
    rgb(248.68 242.63 230.54) 60%,
    rgb(248.84 242.33 229.3) 70%,
    rgb(248.94 242.12 228.46) 80%,
    rgb(248.99 242.02 228.07) 90%,
    rgb(249 242 228) 100%);
}
.fx:has(+ .sy){position:relative}
.fx:has(+ .sy)::after{
  content:"";position:absolute;inset-inline:0;bottom:0;
  height:var(--sy-journey-tail);z-index:0;pointer-events:none;
  background:var(--sy-join-fade) center top / 100% var(--sy-join-space) no-repeat;
}
.fx:has(+ .sy) .fx__wrap{position:relative;z-index:1}
/* Keep the shared background more specific than the paper variant's base fill. */
.fx + .sy,.fx + .sy.bg-paper{
  padding-block-start:calc(clamp(96px,10vw,128px) + clamp(48px,6.4vw,96px) - clamp(86px,10vw,152px));
  padding-block-end:clamp(86px,10vw,152px);
  background:
    var(--sy-join-fade) center calc(-1 * var(--sy-journey-tail)) / 100% var(--sy-join-space) no-repeat,
    var(--sy-paper);
}
/* --- "paper" variant (.sy.bg-paper): the elements cut out of the plate (plate-cut.webp: arch + torn
   sheet, seal, card, sprig and cone, signature) on the client's textured paper (bg-1-bleed.webp), which runs
   edge to edge behind the whole section on a ::before layer at 20%, its top and bottom dissolved over
   ~22% of the section on a wandering boundary (RGBA bitmap mask). The section paper is #f4ebde, the
   image's own paper tone. --- */
.sy.bg-paper{--sy-paper:#f4ebde;position:relative;background:var(--sy-paper)}
.sy.bg-paper::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.20;
  background:url("art/bg-1-bleed.webp?v=1") center / cover no-repeat;
  -webkit-mask-image:url("art/paper-veil-mask.png?v=4");mask-image:url("art/paper-veil-mask.png?v=4");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.sy.bg-paper .sy__wrap{position:relative;z-index:1}
.sy.bg-paper .sy__canvas{background:transparent}
/* the closing-section join ends on this variant's paper (244,235,222) instead of the plate paper */
.fx:has(+ .sy.bg-paper),.fx + .sy.bg-paper{
  --sy-join-fade:linear-gradient(to bottom,
    rgb(248 244 236) 0%,
    rgb(247.97 243.92 235.88) 10%,
    rgb(247.77 243.48 235.19) 20%,
    rgb(247.35 242.53 233.72) 30%,
    rgb(246.73 241.14 231.56) 40%,
    rgb(246 239.5 229) 50%,
    rgb(245.27 237.86 226.44) 60%,
    rgb(244.65 236.47 224.28) 70%,
    rgb(244.23 235.52 222.81) 80%,
    rgb(244.03 235.08 222.12) 90%,
    rgb(244 235 222) 100%);
}
.sy__wrap{width:min(100%,var(--wrap));margin-inline:auto;padding-inline:var(--pad)}
.sy__canvas{position:relative;width:100%;aspect-ratio:1672 / 941;container-type:inline-size;overflow:hidden;background:var(--sy-paper)}
.sy__canvas>*{position:absolute;margin:0;z-index:2;max-width:none}
.sy .sy__plate{left:0;top:0;width:100%;height:100%;pointer-events:none;user-select:none;z-index:0}


/* Broader eased background edges on the host page. The SVG keeps foreground
   artwork opaque while the surrounding paper, engraving and landscape dissolve. */
.sy .sy__plate[src*="plate-host.webp"]{
  -webkit-mask-image:url("art/edge-ease.svg?v=2");
  mask-image:url("art/edge-ease.svg?v=2");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}

/* --- eyebrow: Neue Frutiger caps, letterspaced, with the trailing rule --- */
.sy .sy__eyebrow{left:11.72%;top:13.1%;display:flex;align-items:center;gap:1.6cqw;
  font-family:SySans,Arial,sans-serif;font-size:1.017cqw;letter-spacing:.19em;text-transform:uppercase;color:#8a7d5c;white-space:nowrap;line-height:1}
.sy .sy__eyebrow::after{content:"";flex:none;width:11.3cqw;height:.13cqw;background:#a8956c;position:relative;top:.2cqw}

/* --- headline: Newsreader (variable, display optical size), three groups at their own sizes --- */
.sy .sy__h,.c12 main .sy .sy__h{left:11.66%;top:19.875%;text-wrap:nowrap;white-space:nowrap;font-family:SyDisplay,Georgia,serif;font-weight:600;font-style:normal;font-optical-sizing:none;font-variation-settings:"opsz" 36;color:#0b1a0f}
.sy .sy__h span{display:block}
.sy .sy__g1{font-size:4.48cqw;line-height:.934;letter-spacing:-.038em;font-weight:500}
.sy .sy__g1 .sy__l2{display:inline;letter-spacing:-.052em}
.sy .sy__g2{font-size:2.57cqw;line-height:1.209;font-weight:430;letter-spacing:.005em;margin-top:.62em}
.sy .sy__g3{font-size:2.99cqw;margin-top:.47em}
.sy .sy__g3a{font-size:2.72cqw;line-height:1;font-weight:500;font-style:italic;letter-spacing:0;margin-left:.12em}
.sy .sy__g3b{font-size:3.07cqw;line-height:1;letter-spacing:-.013em;font-weight:560;margin:.08em 0 0 .08em}
.sy .sy__h em,.c12 main .sy .sy__h em{font-family:SyDisplay,Georgia,serif;font-weight:500;font-style:italic;letter-spacing:.02em;color:#70391a}

/* --- the host pages carry the previous sign-off's headline (.sx__h markup and type: Fraunces 600 groups
   with Newsreader italic accents) in this section, at this section's text column --- */
.sy .sx__h,.c12 main .sy .sx__h{left:11.66%;top:18.3%;text-wrap:nowrap;white-space:nowrap;font-family:SxBody,Georgia,serif;font-size:2.35cqw;font-weight:400;font-style:normal;line-height:1.45;letter-spacing:0;color:#16291c}
.sy .sx__h span{display:block}
.sy .sx__g1,.sy .sx__g2,.sy .sx__g3{font-family:"NcDisplay",Georgia,serif;font-size:2.385212cqw;font-weight:600;font-style:normal;line-height:1.34;letter-spacing:-.014em;color:#16291c}
/* 3.46cqw (was 3.8): the first line must stop short of the torn sheet behind the arch (x~896 of 1672) */
.sy .sx__g1{font-size:3.46cqw;line-height:1.12}
/* tighter group gaps than the previous section: this plate carries the signature at 64.5%, and the
   headline has to clear the rule at 63.5% */
.sy .sx__g2,.sy .sx__g3{margin-top:.5em}
.sy .sx__g3a,.sy .sx__g3b{font-size:inherit;line-height:inherit;letter-spacing:inherit;display:inline}
.sy .sx__h em,.c12 main .sy .sx__h em{font-family:SxBody,Georgia,serif;font-weight:400;font-style:italic;color:#764620;letter-spacing:0}
.sy .sx__g2 em,.c12 main .sy .sx__g2 em{font-family:"NcDisplay",Georgia,serif;letter-spacing:-.014em}

/* --- the short rule and the role line (the signature stays in the plate: its final-s swash is a glyph our
   Castile Mastah cut does not carry, so live text could not reproduce it) --- */
.sy .sy__rule{left:11.96%;top:63.5%;width:5.38%;height:.16cqw;background:#ad8663}
.sy .sy__role{left:12.02%;top:76.21%;white-space:nowrap;font-family:SxBody,Georgia,serif;font-style:italic;font-weight:400;font-size:1.166cqw;line-height:1;letter-spacing:.14em;color:#2c3128}

/* --- note card caps, hand-set at the card's angle --- */
.sy .sy__card{left:75.42%;top:72.38%;width:14.0%;text-align:center;white-space:nowrap;font-family:SyDisplay,Georgia,serif;font-weight:400;font-optical-sizing:none;font-variation-settings:"opsz" 20;
  font-size:1.21cqw;letter-spacing:.187em;text-transform:uppercase;line-height:1.24;color:#46423a;transform:rotate(-8.45deg);transform-origin:0 0}

@media (max-width:900px){
  .sy__canvas{aspect-ratio:auto;overflow:visible;padding-block:22px 34px}
  .sy__canvas>*{position:static}
  .sy .sy__plate{width:100%;height:auto;margin-bottom:20px}
  .sy .sy__eyebrow{font-size:.68rem;width:auto;margin-bottom:14px}
  .sy .sy__eyebrow::after{width:64px;height:1px}
  .sy .sy__h,.c12 main .sy .sy__h{white-space:normal;margin-bottom:18px}
  .sy .sy__h>span{margin:0 0 .35em}
  .sy .sy__g1 .sy__l2{display:inline}
  .sy .sy__g1{font-size:2rem;line-height:1.08}.sy .sy__g2{font-size:1.5rem;line-height:1.15}.sy .sy__g3{font-size:1.6rem;line-height:1.12}
  .sy .sy__g3a,.sy .sy__g3b{font-size:1em;line-height:1.12;margin:0;display:inline}
  .sy .sy__g3a{margin-right:.3em}
  .sy .sy__h br{display:none}
  .sy .sx__h,.c12 main .sy .sx__h{white-space:normal;text-wrap:wrap;font-size:1.375rem;line-height:1.48;letter-spacing:0;margin-bottom:30px}
  .sy .sx__g1,.sy .sx__g2,.sy .sx__g3{font-size:1.6rem;line-height:1.48}
  .sy .sx__g1{font-size:2.25rem;line-height:1.12;text-wrap:balance}
  .sy .sx__h br{display:none}
  .sy .sy__rule{display:block;width:64px;height:1px;margin:0 0 14px}
    .sy .sy__role{font-size:.8rem;white-space:normal;margin-bottom:18px}
  .sy .sy__card{transform:none;width:auto;text-align:left;white-space:normal;font-size:.68rem;line-height:1.7}
}