/* About "Comfort in Every Corner." amenities section (data-sec 05-amenities), from rvr/amenities-grid-reference-html/.
   Replaces the old .au-amenities section (its rules in about-us-park.css are now unused). Everything is scoped to .ag.
   Heading = old About amenities h2 (Fraunces 600 #16291c / Fraunces italic 400 #764620, --au-h2);
   intro + closing line = .community-letter p (Newsreader 400, 1.7cqw, #373e2e; 20px / 1.6 at 900px and below);
   labels Fraunces 400 1.05rem, note Newsreader italic .8rem. Collage positions use --u = one pixel of the 1672 x 941 reference. */
@font-face{font-family:AgDisplay;src:url('../fonts/fraunces-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:AgAccent;src:url('../fonts/fraunces-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:AgAccent;src:url('../fonts/fraunces-400italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:AgBody;src:url('../fonts/newsreader-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:AgBody;src:url('../fonts/newsreader-400italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}

.ag{--ag-green:#16291c;--ag-brown:#764620;--ag-quiet:#6a7268;--ag-copy:#373e2e;--ag-h2:clamp(2.5rem,5.43vw,4.884rem);--ag-icon:#984217;--ag-line:#ddd3c4;--ag-rule:#e2dacc;
  position:relative;overflow-x:clip;padding-block:var(--gap);background:#f8f3ea}
.ag .wrap{container-type:inline-size}
.ag h2,.ag p,.ag ul{margin:0;padding:0;max-width:none}
.ag ul{list-style:none}

/* desktop: left column = reference x 99..690 (591 of the 1492 unit content width), collage to the right */
.ag .ag__layout{--u:calc(100cqw / 1492);display:grid;grid-template-columns:minmax(0,591fr) minmax(0,901fr);grid-template-areas:"title scene" "lead scene" "grid scene" "close close";align-items:start}

.ag .ag__title{grid-area:title;position:relative;z-index:2;font-family:AgDisplay,Georgia,serif;font-weight:600;font-size:var(--ag-h2);line-height:.94;letter-spacing:-.012em;color:var(--ag-green);white-space:nowrap}
.ag .ag__title em{display:block;font-family:AgAccent,Georgia,serif;font-style:italic;font-weight:400;color:var(--ag-brown)}
.ag .ag__lead{grid-area:lead;position:relative;z-index:2;margin-top:clamp(22px,2.4vw,34px);font-family:AgBody,Georgia,serif;font-style:normal;font-weight:400;font-size:1.7cqw;line-height:1.5;letter-spacing:normal;color:var(--ag-copy)}
.ag .label{display:block;margin-top:9px;font-family:AgAccent,Georgia,serif;font-weight:400;font-size:1.05rem;line-height:1.15;color:var(--ag-green);text-wrap:balance}
.ag .ln{display:block;white-space:nowrap}
.ag .label small{display:block;margin-top:4px;font-family:AgBody,Georgia,serif;font-style:italic;font-weight:400;font-size:.8rem;line-height:1.35;color:var(--ag-quiet);white-space:nowrap}
.ag .nw{white-space:nowrap}
.ag .ag__close{grid-area:close;margin-top:clamp(28px,3.2vw,44px);padding:clamp(26px,2.4vw,34px) 0 0;border-top:2px solid var(--ag-rule);
  font-family:AgBody,Georgia,serif;font-style:normal;font-weight:400;font-size:1.7cqw;line-height:1.5;letter-spacing:normal;color:var(--ag-copy);text-wrap:pretty}

/* amenity grid: 3 x 2 with hairline dividers */
.ag .ag__grid{grid-area:grid;position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(12px,1.4vw,20px)}
.ag .item{display:flex;flex-direction:column;align-items:center;text-align:center;padding:14px 4px 16px}
.ag .item:nth-child(3n+2),.ag .item:nth-child(3n+3){border-left:1.5px solid var(--ag-line)}
.ag .item:nth-child(-n+3){border-bottom:1.5px solid var(--ag-line)}
.ag .item:nth-child(n+4){padding-top:16px}

/* medallion (image, icon painted out) with the traced icon on top; --m = circle diameter */
.ag .badge{--m:clamp(42px,3.25vw,48px);--k:calc(var(--m) / 75);position:relative;flex:none;width:var(--m);height:var(--m)}
.ag .medal{position:absolute;left:50%;top:50%;width:calc(var(--k) * 92);max-width:none;height:auto;transform:translate(-50%,-50%);display:block;pointer-events:none}
.ag .icon{position:absolute;left:50%;top:50%;width:26px;height:26px;max-width:none;transform:translate(-50%,-50%);fill:var(--ag-icon)}

/* collage: artwork + photos cropped to reference x 585..1672, y 60..728; the pine boughs pass the right margin by 81 units */
.ag .ag__scene{grid-area:scene;position:relative;z-index:1;align-self:center;width:calc(var(--u) * 1087);height:calc(var(--u) * 668);margin-left:calc(var(--u) * -105);overflow:hidden}
.ag .ag__scene-in{position:absolute;left:calc(var(--u) * -585);top:calc(var(--u) * -60);width:calc(var(--u) * 1672);height:calc(var(--u) * 941)}
.ag .art{position:absolute;inset:0;width:100%;height:100%;max-width:none;display:block;user-select:none;pointer-events:none}
.ag .photo{position:absolute;left:calc(var(--u) * var(--x));top:calc(var(--u) * var(--y));width:calc(var(--u) * var(--w));max-width:none;height:auto;display:block}

/* small desktops: the grid runs 2 x 3 */
@media (min-width:1024px) and (max-width:1199px){
  .ag .ag__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ag .item:nth-child(n){border-left:0;border-bottom:0;padding-top:16px}
  .ag .item:nth-child(2n){border-left:1.5px solid var(--ag-line)}
  .ag .item:nth-child(-n+4){border-bottom:1.5px solid var(--ag-line)}
}

/* intro + closing line follow .community-letter p below 901px */
@media (max-width:900px){.ag .ag__close,.ag .ag__lead{font-size:20px;line-height:1.6}}

/* tablets and phones: heading, collage, intro, grid, closing line in one column */
@media (max-width:1023px){
  .ag .ag__layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"title" "scene" "lead" "grid" "close"}
  .ag .ag__title{white-space:normal}
  .ag .ag__scene{--x0:652;--y0:62;--cw:1020;--ch:660;--u:calc(100cqw / var(--cw));width:100%;height:calc(var(--u) * var(--ch));margin:clamp(12px,3vw,24px) 0 0}
  .ag .ag__scene-in{left:calc(var(--u) * var(--x0) * -1);top:calc(var(--u) * var(--y0) * -1)}
  .ag .ag__lead{margin-top:clamp(22px,4vw,34px)}
  .ag .ag__grid{margin-top:clamp(10px,2vw,16px)}
  .ag .badge{--m:clamp(46px,7vw,57px)}
  .ag .item{padding:16px 6px 18px}
}
@media (max-width:600px){
  .ag .ag__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ag .item:nth-child(n){border-left:0;border-bottom:0;padding-top:16px}
  .ag .item:nth-child(2n){border-left:1.5px solid var(--ag-line)}
  .ag .item:nth-child(-n+4){border-bottom:1.5px solid var(--ag-line)}
  .ag .ag__scene{--x0:668;--y0:66;--cw:990;--ch:650}
}

/* Give the collage more presence while keeping all three photographs in view. */
@media(min-width:1024px){
  .ag .ag__scene{--scene-shift:clamp(0px,calc((100vw - 1200px) * .06),14px);--u:min(calc(100cqw / 1492 * 1.064),calc((50vw + 50cqw - 100cqw * 591 / 1492 - var(--scene-shift) - 16px) * .95 / 902));margin-left:calc(var(--u) * -105 + var(--scene-shift))}
}
@media(max-width:1023px){
  .ag .ag__scene{--u:calc(100cqw / var(--cw) * 1.026);width:102.6%;margin-left:clamp(0px,1vw,8px)}
}

/* Keep the left copy together, with deliberate spacing beside the larger collage. */
.ag .ag__content{display:contents}
@media(min-width:1024px){
  .ag .ag__layout{grid-template-areas:"content scene" "close close"}
  .ag .ag__content{grid-area:content;display:flex;flex-direction:column;align-self:center;min-width:0}
  .ag .ag__lead{margin-top:clamp(24px,2.3vw,32px)}
  .ag .ag__grid{margin-top:clamp(18px,1.65vw,24px)}
}

/* Match the hospitality eyebrow above, with its short accent rule. */
.ag .ag__eyebrow{grid-area:eyebrow;position:relative;z-index:2;display:flex;align-items:center;gap:14px;margin:0 0 clamp(18px,1.7cqw,24px);font-family:NcBody,Georgia,serif;font-size:clamp(10px,.95cqw,12px);font-weight:400;font-style:normal;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;color:var(--ag-copy)}
.ag .ag__eyebrow::before{content:"";width:44px;height:1px;flex-shrink:0;background:#a6542c}
@media(max-width:1023px){.ag .ag__layout{grid-template-areas:"eyebrow" "title" "scene" "lead" "grid" "close"}}
@media(max-width:900px){.ag .ag__eyebrow{font-size:11px;margin-bottom:24px;gap:12px;letter-spacing:.1em}.ag .ag__eyebrow::before{width:28px}}