/* "All of it. Even the hard parts." - replica of the client's 1672x941 comp.
   The art is one inpainted plate; every word is live text on a container-query
   artboard, so the composition holds at any width. Positions are comp-px
   converted to % of 1672/941, sizes are cqw. */
@font-face{font-family:GxDisplay;src:url("../assets/fonts/fraunces-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:GxDisplay;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-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:GxBody;src:url("../assets/fonts/newsreader-400.woff2") format("woff2");font-weight:400;font-style:normal;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:GxSans;src:url("../assets/fonts/neue-frutiger-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:GxHand;src:url("../assets/fonts/castile-mastah-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

.gx *{box-sizing:border-box}
.gx img{max-width:100%;height:auto;display:block}
.gx{
  --gx-paper:rgb(248 244 236);
  -webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;
  --wrap:1320px;--pad:clamp(22px,5vw,68px);
  background:var(--gx-paper);
  /* the mountain wash overhangs the canvas into the gap below; the next section's background
     must not paint over it (that printed a hard cut at the canvas bottom) */
  position:relative;z-index:1;
}
/* On the host pages this follows the community section. Keep the full section,
   including its outer margins and vertical gap, on the plate's own warm paper
   tone so the 1672px artboard never reads as a centered card. */
.cx + .gx{
  padding-block-start:calc(clamp(96px,10vw,128px) + clamp(48px,6.4vw,96px));
  background:var(--gx-paper);
}
.gx__wrap{width:min(100%,var(--wrap));margin-inline:auto;padding-inline:var(--pad)}
/* Journey uses the same section gap as .cx + .gx. The mountain's small
   overhang fits within that open space without an additional tail spacer. */
.gx__canvas{position:relative;width:100%;aspect-ratio:1672 / 941;container-type:inline-size;overflow:visible;background:var(--gx-paper)}
.gx__canvas>*{position:absolute;margin:0;z-index:2}
.gx .gx__plate{left:0;top:5%;width:100%;height:100%;pointer-events:none;user-select:none;z-index:0}
.gx .gx__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,236,1) 0%,
    rgba(248,244,236,.99) 10%,
    rgba(248,244,236,.94) 20%,
    rgba(248,244,236,.84) 30%,
    rgba(248,244,236,.68) 40%,
    rgba(248,244,236,.5) 50%,
    rgba(248,244,236,.32) 60%,
    rgba(248,244,236,.16) 70%,
    rgba(248,244,236,.06) 80%,
    rgba(248,244,236,.01) 90%,
    rgba(248,244,236,0) 100%);
}
/* Melt the plate's bottom crop into the join cream. Short zone so it does not
   wash the last body line (p4 ends ~95.8%). Overlay, never mask; rgba(...,0)
   not the transparent keyword. */
.gx .gx__canvas::before{
  content:"";position:absolute;left:0;right:0;bottom:-5%;height:5.5%;z-index:1;pointer-events:none;
  background:linear-gradient(to top,
    rgba(248,244,236,1) 0%,
    rgba(248,244,236,.99) 10%,
    rgba(248,244,236,.94) 20%,
    rgba(248,244,236,.84) 30%,
    rgba(248,244,236,.68) 40%,
    rgba(248,244,236,.5) 50%,
    rgba(248,244,236,.32) 60%,
    rgba(248,244,236,.16) 70%,
    rgba(248,244,236,.06) 80%,
    rgba(248,244,236,.01) 90%,
    rgba(248,244,236,0) 100%);
}

/* The letter's mountain wash moves independently of the photograph. Reuse the
   plate's lower 221px, then paint the approved mist contour above that slice. */
.gx .gx__canvas:has(.gx__mountain) .gx__plate{
  clip-path:inset(0 0 22.422955% 0);
}
.gx .gx__canvas:has(.gx__mountain)::before{
  top:calc(5% + 42.165072cqw);bottom:auto;height:1.495215cqw;
  background:linear-gradient(to top,
    rgba(248,244,236,1) 0%,rgba(248,244,236,.99) 10%,
    rgba(248,244,236,.94) 20%,rgba(248,244,236,.84) 30%,
    rgba(248,244,236,.68) 40%,rgba(248,244,236,.5) 50%,
    rgba(248,244,236,.32) 60%,rgba(248,244,236,.16) 70%,
    rgba(248,244,236,.06) 80%,rgba(248,244,236,.01) 90%,
    rgba(248,244,236,0) 100%);
}
.gx .gx__mountain{
  left:0;top:calc(5% + 43.062201cqw + 2cqw);
  width:100%;height:13.217703cqw;z-index:0;pointer-events:none;
  background:url("art/plate-left-v6.webp?v=6") left bottom / 100% auto no-repeat;   /* v6: bottom 826-940 dissolved into the paper (quintic, wandering boundary) */
}
.gx .gx__mountain::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1.495215cqw;
  background:linear-gradient(to bottom,
    rgba(248,244,236,1) 0%,rgba(248,244,236,.99) 10%,
    rgba(248,244,236,.94) 20%,rgba(248,244,236,.84) 30%,
    rgba(248,244,236,.68) 40%,rgba(248,244,236,.5) 50%,
    rgba(248,244,236,.32) 60%,rgba(248,244,236,.16) 70%,
    rgba(248,244,236,.06) 80%,rgba(248,244,236,.01) 90%,
    rgba(248,244,236,0) 100%);
}
.gx .gx__mountain::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:99.547511%;
  background:url("art/mountain-mist.svg?v=1") center / 100% 100% no-repeat;
}
/* --- top row: brand, rule, three items --- */
.gx .gx__nav{left:7.775%;top:4.569%;display:flex;align-items:center;white-space:nowrap;line-height:1;
  font-family:GxBody,Georgia,serif;text-transform:uppercase}
.gx .gx__brand{font-size:.969cqw;letter-spacing:.204em;color:#0a1410}
.gx .gx__navrule{display:block;width:4.31cqw;height:2px;background:#7a6748;margin:0 1.6cqw 0 1.42cqw;opacity:.7;position:relative;top:-.18cqw}
.gx .gx__items{display:flex;gap:.95cqw;font-size:.705cqw;letter-spacing:.15em;color:#776a57;position:relative;top:-.06cqw}

/* --- eyebrow --- */
.gx .gx__eyebrow{left:7.83%;top:12.031%;white-space:nowrap;line-height:1;font-family:GxBody,Georgia,serif;
  text-transform:uppercase;font-size:.836cqw;letter-spacing:.273em;color:#713115}

/* --- headline: Fraunces 600 roman, Fraunces 400 italic --- */
/* 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 */
.gx .gx__h,.c12 main .gx .gx__h{left:7.340%;top:14.0%;text-wrap:nowrap;white-space:nowrap;font-family:GxDisplay,Georgia,serif;font-weight:600;color:#0e2015}
.gx .gx__h span{display:block;font-size:6.752cqw;line-height:1;letter-spacing:-.03em}
.gx .gx__h em{display:block;font-family:inherit;font-weight:400;font-style:italic;font-size:4.587cqw;line-height:1;letter-spacing:-.018em;color:#802a0c;margin-top:-.2em;margin-left:.065em}

/* --- body: Newsreader --- */
.gx .gx__p{font-family:GxBody,Georgia,serif;font-size:1.154cqw;line-height:1.212;color:#2b2d2a;white-space:nowrap;left:7.83%}
.gx .gx__p1{top:35.025%;letter-spacing:.005em}
.gx .gx__p2{top:42.231%;letter-spacing:.016em}
.gx .gx__p3{top:64.978%;letter-spacing:.019em}
.gx .gx__p4{top:85.472%;letter-spacing:-.008em}
.gx .gx__p5{top:92.225%;letter-spacing:-.007em}

/* --- the honest question and its answer --- */
.gx .gx__q{left:12.86%;top:52.738%;white-space:nowrap;font-family:GxBody,Georgia,serif;font-size:1.041cqw;line-height:1;color:#2c2e2b}
.gx .gx__no{left:11.038%;top:57.151%;white-space:nowrap;font-family:GxHand,cursive;font-size:2.189cqw;line-height:1;color:#9c3620}

/* --- callout line on the tinted band (band, pine and divider are in the plate) --- */
.gx .gx__call{left:17.2%;top:75.025%;white-space:nowrap;font-family:GxDisplay,Georgia,serif;font-style:italic;font-weight:400;
  font-size:1.85cqw;line-height:1.07;letter-spacing:.002em;color:#0b1a10;-webkit-text-stroke:.02em #0b1a10;paint-order:stroke fill}

/* --- torn note card --- */
.gx .gx__note{left:78.83%;top:65.57%;white-space:nowrap;font-family:GxHand,cursive;font-size:1.37cqw;line-height:1.62;color:#0b100c;-webkit-text-stroke:.25px #0b100c;paint-order:stroke fill;
  transform:rotate(-5deg);transform-origin:0 0}

/* --- side caption, stacked small caps beside the vertical rule --- */
.gx .gx__side{left:89.3%;top:86.49%;white-space:nowrap;font-family:GxBody,Georgia,serif;text-transform:uppercase;
  font-size:.705cqw;letter-spacing:.33em;line-height:2.18;color:#594c35}
/* Restore the caption's original thin rule at plate x1459 / y750-890.
   Offsets include the plate's 5% downward shift and scale with the canvas. */
.gx .gx__side::before{content:"";position:absolute;left:-2.039cqw;top:-1.006cqw;width:1px;height:8.373cqw;background:currentColor;opacity:.55;pointer-events:none}

/* ===== Host pages only: the left column transplanted from gratitude-hero =====
   On keepsake and root the client replaced this replica's left column (eyebrow,
   headline, five paragraphs, question/answer, callout) with the hero replica's
   (eyebrow, "Through it All.", three paragraphs, callout, closing paragraph).
   The runs keep the hero's class names and exactly the hero's metrics, so they
   sit where they sit on gratitude-hero/. The plate for that page is
   art/plate-left.webp - this plate with its red rule and tinted callout band
   erased, since those belonged to the old column. Two things that were baked
   into the hero plate are drawn here instead: the eyebrow's trailing rule and
   the short rule above the callout. The standalone (gratitude-comp/) keeps its
   own column and is unaffected. */
/* eyebrow matched to the community section's .cx__eyebrow by request: Neue Frutiger
   .845cqw / .245em, taupe #806d4f, flex row with the 9.39cqw hairline after it;
   left on the headline's first letter and 36 comp px above the headline ink,
   both as the community section has them. */
.gx .hg__eyebrow{left:6.651%;top:17.813%;display:flex;align-items:center;gap:1.55cqw;white-space:nowrap;line-height:1;
  font-family:GxSans,Arial,sans-serif;font-size:.845cqw;letter-spacing:.245em;text-transform:uppercase;color:#806d4f}
.gx .hg__eyebrow::after{content:"";width:9.39cqw;height:1px;background:#806d4f;opacity:.75}
.gx .hg__h,.c12 main .gx .hg__h{left:6.400%;top:21.481%;text-wrap:nowrap;white-space:nowrap;font-family:"NcDisplay",Georgia,serif;font-weight:600;color:#16291c}
.gx .hg__h span{display:block;font-size:6.836cqw;line-height:1;letter-spacing:-.034em}
/* leading matched to the origin headline ("Before the / Gates Opened."): baseline
   pitch .9424 of the line size = 73.64px at 1440, so margin-top -.155em -> -.068em */
.gx .hg__h em{display:block;font-family:"NcDisplay",Georgia,serif;font-weight:400;font-style:italic;font-size:6.60cqw;line-height:.9426;letter-spacing:-.018em;color:#764620;margin-top:-.068em;margin-left:.015em}
/* "it" moved down to the second line by request; it keeps the first line's roman
   voice (Fraunces 600, pine, -.034em) and its size - 6.836/6.60 of the italic
   line - with line-height 0 so the larger inline box does not push the line. */
.gx .hg__h em .hg__it{font-style:normal;font-weight:600;color:#16291c;letter-spacing:-.034em;font-size:1.0358em;line-height:0}
/* body matched to the community section's .cx__p by request: Newsreader 400,
   1.245cqw, its ink #373e2e (the hero comp had 1.172cqw / #3a3b39). Leading kept. */
.gx .hg__p{left:6.790%;white-space:nowrap;font-family:CxBody,Georgia,serif;font-weight:400;font-style:normal;font-size:1.245cqw;line-height:1.443;letter-spacing:normal;color:#373e2e}
.gx .hg__tight2,.gx .hg__tight3{letter-spacing:normal}
/* re-spaced after the size change so every ink gap reads as before (+3.5 / +8.5 / +12.7 / +12.0 comp px) */
/* headline -> body opened to the page's 34.6 comp px (chapter / community); whole stack +14.2
   (measured against the em as the other session now sets it: line-height .9426) */
.gx .hg__p1{top:47.18%}.gx .hg__p2{top:58.60%}.gx .hg__p3{top:70.03%}.gx .hg__p4{top:89.45%}.gx .hg__p5{top:97.69%}
.gx .hg__call{left:6.820%;top:83.11%;white-space:nowrap;font-family:"NcDisplay",Georgia,serif;font-weight:600;font-style:normal;
  font-size:2.449cqw;line-height:1;letter-spacing:-.014em;color:#6e2c0c}
/* the short rule above the callout: comp x114-211 x y680-683, dark brown fading right */
.gx .hg__call::before{content:"";position:absolute;left:0;top:-1.3cqw;width:5.8cqw;height:2px;
  background:linear-gradient(to right,#734020 0 55%,#a8917a 75%,#c9b8a4);opacity:.9}

@media (max-width:900px){
  .gx__canvas{aspect-ratio:auto;overflow:visible;padding-block:22px 34px}
  .gx .gx__canvas::after,.gx .gx__canvas::before{content:none}
  .gx__canvas>*{position:static}
  .gx .gx__plate{width:100%;height:auto;margin-bottom:20px}
  .gx .gx__canvas:has(.gx__mountain) .gx__plate{
    margin-bottom:calc(20px + 2cqw);
  }
  .gx .gx__canvas:has(.gx__mountain)::before{
    content:"";top:calc(22px + 42.165072cqw);
  }
  .gx .gx__mountain{
    position:absolute;top:calc(22px + 43.062201cqw + 2cqw);
  }
  .gx .gx__nav{font-size:.68rem;margin-bottom:18px;flex-wrap:wrap;gap:8px 14px}
  .gx .gx__brand,.gx .gx__items{font-size:.68rem}
  .gx .gx__navrule{width:40px}
  .gx .gx__eyebrow{font-size:.68rem;margin-bottom:14px}
  .gx .gx__h{white-space:normal;margin-bottom:16px}
  .gx .gx__h span{font-size:2.3rem;line-height:1.02}
  .gx .gx__h em{font-size:1.7rem;line-height:1.15}
  .gx .gx__p{white-space:normal;font-size:1rem;line-height:1.66;margin-bottom:1.05em;max-width:64ch}
  .gx .gx__p br,.gx .gx__call br,.gx .gx__side br,.gx .gx__note br{display:none}
  .gx .gx__q{white-space:normal;font-size:.95rem;margin-bottom:6px}
  .gx .gx__no{font-size:1.9rem;margin:12px 0 18px;line-height:1.1}
  .gx .gx__call{white-space:normal;font-size:1.35rem;line-height:1.3;margin:0 0 18px;padding:14px 18px;background:#eeebe0}
  .gx .gx__note{font-size:1.5rem;transform:none;margin:8px 0 14px;white-space:normal}
  .gx .gx__side{font-size:.7rem;line-height:1.8;white-space:normal}
  .gx .gx__side::before{display:none}
  .gx .gx__no,.gx .gx__nav{white-space:normal}
  /* transplanted hero column in the stack */
  .gx .hg__eyebrow{font-size:.68rem;margin-bottom:14px;gap:12px}
  .gx .hg__eyebrow::after{width:56px}
  .gx .hg__h{white-space:normal;margin-bottom:16px}
  .gx .hg__h span{font-size:2.3rem;line-height:1.02}
  .gx .hg__h em{font-size:1.75rem;line-height:1.15;letter-spacing:-.02em;margin:0}
  .gx .hg__p{white-space:normal;font-size:1rem;line-height:1.66;margin-bottom:1.05em;max-width:64ch}
  .gx .hg__p br{display:none}
  .gx .hg__call{white-space:normal;font-size:1.35rem;line-height:1.3;margin:0 0 14px}
  .gx .hg__call::before{content:none}
}