/* 261 Pass 26. Loaded last; house tokens only (261.css :root, 261-p10.css motion tokens).
   1. "Rented by the month" (#rental, The Investment chapter): three beats, one idea per screen on phones; the uniqueness line
      (Delta 4) under the total; guest reviews (Delta 5) only when supplied.
   2. The letter: one centred composition, body in Inter, one-time reveal, no drop cap on the numeral.
   3. The sticky Inquire/Call bar steps aside while the letter is on screen (core.js adds html.cta-letter).
   4. Phone landscape hero; the hero video pause button (WCAG 2.2.2).
   5. Gallery: the last photo spans the full width (gallery.json span "full"), so it closes the gallery.
   6. Menu labels are the section headings now (longer): a step smaller on phones so most stay on one line.
   7. The header mark reads "261 Osprey Preserve" (Delta 6). Phones: when the chapter label shows, it sits under the mark (two-line masthead). */

/* ===== 1. Rental history ===== */
:root{--d-count:1200ms;--rent-gap:clamp(96px,16svh,180px)}
.rent{padding-bottom:clamp(64px,10vw,120px)}
.rent .sec-head{margin-bottom:clamp(36px,6vw,72px)}
.rent-b+.rent-b{padding-top:var(--rent-gap)}
.rent-k{margin:0;font:500 11px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--label)}
.rent-big{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin-top:14px}
.rent-n{display:inline-block;font:400 clamp(52px,14.2vw,152px)/.95 var(--serif);letter-spacing:-.02em;color:var(--acid);white-space:nowrap;font-variant-numeric:tabular-nums}
.rent-mo{color:var(--paper)}
.rent-u{font:400 15px/1.3 var(--sans);color:var(--label)}
.rent-via{margin-top:clamp(18px,3vw,28px);max-width:44ch;font:400 14px/1.5 var(--sans);color:var(--label)}
.rent-note{margin-top:14px;max-width:44ch;font:400 15px/1.5 var(--sans);color:var(--body)}

.rent-why{max-width:46ch;margin-top:clamp(22px,4vw,36px);padding-left:16px;border-left:1px solid var(--line-2)}

/* guest reviews (Delta 5): only in the page when /261/reviews.json has cards */
.rent-rvl{list-style:none;margin:clamp(24px,4vw,40px) 0 0;padding:0;display:grid;gap:clamp(36px,5vw,56px) clamp(32px,5vw,80px)}
@media (min-width:900px){.rent-rvl{grid-template-columns:repeat(2,minmax(0,1fr));max-width:1100px}}
.rent-q{margin:0}
.rent-q blockquote{margin:0}
.rent-q p{max-width:40ch;font:italic 400 clamp(21px,2.1vw,26px)/1.4 var(--serif);color:var(--paper)}
.rent-q figcaption{margin-top:12px;font:400 13px/1.5 var(--sans);color:var(--label)}
.rent-q figcaption b{font-weight:500;color:var(--body)}

/* in season vs off season, side by side */
.rent-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,6vw,96px);max-width:880px;margin-top:clamp(24px,4vw,40px)}
.rent-sl{font:500 14px/1.4 var(--sans);color:var(--text)}
.rent-sl span{display:block;font-weight:400;color:var(--label)}
.rent-m{margin-top:clamp(14px,2vw,22px);white-space:nowrap}
.rent-ab{display:block;margin-bottom:6px;font:400 14px/1 var(--sans);color:var(--label)}
.rent-m b{display:inline-block;font:400 clamp(46px,11.5vw,112px)/.95 var(--serif);letter-spacing:-.02em;color:var(--paper);font-variant-numeric:tabular-nums}
.rent-mb{display:block;height:4px;margin-top:18px;border-radius:2px;background:var(--line);overflow:hidden}
.rent-mb i{display:block;height:100%;background:var(--text);transform-origin:left center;transform:scaleX(var(--w))}
.rent-s-off .rent-mb i{opacity:.5}
.rent-top{margin-top:clamp(28px,4vw,44px);font:400 15px/1.5 var(--sans);color:var(--label)}
.rent-top b{font-weight:500;color:var(--body);font-variant-numeric:tabular-nums}

/* after the beats: source, minimum stay, disclaimer (small, muted), then the bridge to the tax page */
.rent-foot{max-width:64ch;margin-top:var(--rent-gap);padding-top:22px;border-top:1px solid var(--line)}
.rent-src,.rent-min,.rent-disc{font:400 13px/1.55 var(--sans);color:var(--label)}
.rent-min,.rent-disc{margin-top:6px}
.rent-br{margin-top:clamp(48px,8vw,88px);max-width:40ch;font:italic 400 clamp(20px,2.2vw,26px)/1.35 var(--serif);color:var(--text)}
.rent-fl{margin-top:8px;font-size:15px}

/* phones: each beat is its own screen */
@media (max-width:899px){
  .rent-b2,.rent-b3{min-height:calc(100svh - var(--navh) - var(--barh));display:flex;flex-direction:column;justify-content:center;padding-block:48px}
  .rent-b+.rent-b{padding-top:48px}
  .rent-foot{margin-top:24px}
}

/* motion: fills on reveal (rental.js adds .rent-mo-on only when motion is allowed, .in per beat) */
.rent-mo-on .rent-b:not(.in) .rent-mb i{transform:scaleX(0)}
.rent-mo-on .rent-b.in .rent-mb i{transition:transform var(--d-count) var(--e-enter)}
.rent-mo-on .rent-b.in .rent-n[data-count],.rent-mo-on .rent-b.in .rent-m b{animation:rentIn var(--d-enter) var(--e-enter) both}
@keyframes rentIn{from{opacity:0}to{opacity:1}}

/* ===== 2. The letter: one centred composition ===== */
:root{--letter-measure:31.5em}
.intro{text-align:center}
.intro>.eyebrow{margin-inline:auto;max-width:none}
.intro-h{margin-inline:auto;text-align:center;text-wrap:balance}
.intro-body{text-align:left;max-width:min(var(--letter-measure),100%);margin-inline:auto}
.intro-p{font:400 var(--t-letter)/1.6 var(--sans);letter-spacing:-.003em;color:var(--paper)}
.intro-p+.intro-p{margin-top:1em}
@media (max-width:480px){.intro-p{letter-spacing:-.018em}} /* phones: keeps about 35 characters a line at 20px (J: 35 to 50) */
.intro-sig{font:italic 400 34px/1 var(--serif)}
@media (min-width:1100px){.intro>.eyebrow{grid-column:auto}}
/* one-time reveal (replaces the scroll-tied fade) */
html.js .lt-rv{opacity:0;transform:translateY(var(--reveal-y))}
html.js .lt-rv.in{opacity:1;transform:none;transition:opacity var(--d-enter) var(--e-enter),transform var(--d-enter) var(--e-enter)}

/* ===== 3. The bar steps aside while the letter is on screen ===== */
html.cta-letter .ctabar,html.cta-letter .ctabar.on{transform:translateY(calc(100% + 16px + env(safe-area-inset-bottom)));opacity:0;visibility:hidden;
  transition:transform var(--d-micro) var(--e-ui),opacity var(--d-micro) linear,visibility 0s linear var(--d-micro)}

/* ===== 4. Hero: phone landscape, and the pause button ===== */
@media (orientation:landscape) and (max-height:500px) and (max-width:1023px){
  .hero-copy{padding-top:calc(var(--navh) + 12px + env(safe-area-inset-top));padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .hero-title{font-size:min(14vw,18svh);margin:8px 0 12px}
  .hero-facts{font-size:14px}
}
.hero-pause{position:absolute;z-index:3;right:var(--pad);bottom:calc(20px + env(safe-area-inset-bottom));display:inline-grid;place-items:center;width:44px;height:44px;
  border:1px solid var(--line-2);border-radius:50%;background:rgba(29,32,33,.55);color:var(--paper);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:border-color var(--d-micro) linear,transform 120ms var(--e-ui)}
.hero-pause:hover{border-color:rgba(233,240,86,.5)}
.hero-pause:active{transform:scale(.96)}
.hero-pause:focus-visible{outline:2px solid var(--acid);outline-offset:3px}
.hero-pause svg{width:16px;height:16px;fill:currentColor}
.hero-pause .hpz-play,.hero-pause[aria-pressed="true"] .hpz-pause{display:none}
.hero-pause[aria-pressed="true"] .hpz-play{display:block}
@media (min-width:900px){.hero-pause{right:calc(var(--pad) + var(--rail-g))}}


/* ===== 6. Menu labels = section headings ===== */
@media (max-width:899px){.mp-t{font-size:clamp(24px,6.6vw,30px)}}

/* ===== 7. Header mark: "261 Osprey Preserve" ===== */
.hdr-mark{font-size:24px;padding:0 4px;white-space:nowrap;letter-spacing:0}
@media (min-width:900px){.hdr-mark{font-size:28px}}
/* phones: the centred chapter label would run into the longer mark, so it moves under it, left-aligned (two-line masthead);
   the mark lifts 7px only while the label shows */
@media (max-width:899px){
  .hdr-mark{transition:transform .35s var(--ease)}
  html.hdr-solid .hdr:has(.hdr-ch.on) .hdr-mark{transform:translateY(-7px)}
  .hdr-ch{left:max(calc(var(--pad) - 6px),env(safe-area-inset-left));top:calc(env(safe-area-inset-top) + 37px);transform:none;font-size:9px;letter-spacing:.22em}
}
/* phones: EN + Site joined the header actions (195px), so the mark scales to the space left beside them
   instead of running under the EN pill. .145 = 24px / 165px, the widest mark (5680) at 24px. */
@media (max-width:899px){.hdr-mark{font-size:clamp(14px,calc((100vw - 248px) * .145),24px)}}
@media (max-width:359px){.hdr .hdr-mark{padding:0}.hdr .hdr-acts{gap:4px}}

@media (prefers-reduced-motion:reduce){
  html.js .lt-rv{opacity:1;transform:none;transition:none}
  .rent-mb i,.rent-n,.rent-m b{transition:none!important;animation:none!important}
  html.cta-letter .ctabar{transition:none}
  .hdr-mark{transition:none}
}