/* ============================================================
   Jamaica Beach: "Stay where you ride." — the client's tags comp
   (Drive 1f3yQ…, 1952x806) in the closing band's panel, after the
   pickup and location details. Built and proofed on the preview at
   /stay-ride-tag/ (tag.css there is the working copy; this is the
   same CSS without the preview's page chrome).

   The plate is the comp with the headline, rule, body and pill
   filled out by diffusion; the tags, rail, palms, sign and postmark
   are the comp itself. The heading is the house heading at the
   "Straight prices, posted" size, set as two lines; the body and
   pill are the comp's own, in comp px of a 1952-wide stage.
   Faces: Walbaum and Goodwater come from site.css; Janson Text for
   the pill and Avenir for the body are declared here.
   ============================================================ */
@font-face{font-family:'Janson';src:url('/assets/fonts/library/janson-text/janson-text-400.woff2') format('woff2');font-weight:400;font-display:swap;}
@font-face{font-family:'Avenir';src:url('/assets/fonts/library/avenir/avenir-400.woff2') format('woff2');font-weight:400;font-display:swap;}

/* the section: the old band's top rhythm kept; the closing band's bottom so the panel's shadow breathes above the footer */
.stay-ride{padding:clamp(64px,8vw,112px) 0 clamp(30px,3.4vw,46px);background:var(--cream);}

/* ── the panel: the home page's closing band (.cb__panel in closing-cta.css), same width,
   height, radius, rule and shadow, so the two read as one family. The comp is 1952x806
   (2.42:1) and the panel 1180x400 (2.95:1), so the art is shown cover-cropped: full width,
   the crop taken off the top and bottom of the scene, where there is only sky and sand.
   Every seat below is still in comp px of the full 1952-wide stage, which is wider than the
   panel's box; the stage is positioned so its vertical centre sits on the panel's. ── */
.sr-panel{position:relative;overflow:hidden;isolation:isolate;
  width:calc(100% - clamp(40px,8vw,88px));max-width:1180px;margin:0 auto;
  aspect-ratio:1180/400;min-height:clamp(320px,32vw,400px);
  border-radius:clamp(15px,1.7vw,22px);border:1px solid rgba(181,137,74,.72);background:#FAF6F0;
  box-shadow:0 1px 2px rgba(40,53,67,.08),0 12px 24px -12px rgba(40,53,67,.18),0 32px 58px -22px rgba(40,53,67,.3);}
.sr-panel::after{content:"";position:absolute;inset:0;z-index:6;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -14px 22px -16px rgba(40,53,67,.18),inset 0 0 0 1px rgba(255,248,236,.35);}
.sr-panel .sr{position:absolute;left:0;top:50%;width:100%;transform:translateY(-50%);}
/* under 700px a 2.95:1 panel cannot hold a 2.42:1 comp with a copy column, so the panel
   stacks like the closing band does on phones: the art on top at its own aspect, cropped to
   its left half where the tags are, and the copy set live underneath at page sizes */
@media (max-width:700px){
  .sr-panel{aspect-ratio:auto;min-height:0;display:block;}
  /* the stage's own seats stay comp-relative, so on the stack the plate is shown alone as a
     cover crop of the comp's left half (the tags), 3:2, and the stage is just its window */
  .sr-panel .sr{position:relative;left:0;top:0;transform:none;width:100%;aspect-ratio:3/2;overflow:hidden;container-type:normal;}
  .sr-panel .sr__plate{position:absolute;left:0;top:0;width:auto;height:100%;max-width:none;object-fit:cover;object-position:0 0;}
  .sr-panel .sr__col{display:none;}
  .sr-copy{display:block!important;padding:22px 22px 26px;}
  .sr-copy h2{margin:0;font:400 clamp(40px,4.4vw,62px)/.94 'Walbaum',Georgia,serif;letter-spacing:-.026em;color:#16335F;}
  .sr-copy h2 .sr__script{display:inline-block;font-family:'Goodwater',cursive;font-size:1.08em;line-height:.86;color:#4F8A7E;margin-left:.1em;position:relative;}
  .sr-copy h2 .sr__script::after{content:"";position:absolute;left:5%;right:10%;bottom:-.08em;height:2px;background:#bd9652;border-radius:50%;transform:rotate(-4deg);}
  .sr-copy p{margin:14px 0 0;font:400 15px/1.6 var(--text);color:var(--ink-soft);}
}
.sr-copy{display:none;}

.sr{position:relative;width:100%;aspect-ratio:1952/806;container-type:inline-size;--cw:1952;--ch:806;overflow:hidden;display:block;}
.sr__plate{position:absolute;inset:0;width:100%;height:100%;display:block;}
/* ── the copy column: at the comp's headline x (1006/1952), running to the comp's text edge
   (1830/1952), centred on the stage (which is centred on the panel). The heading is sized
   to the page like "Straight prices, posted" (#posted-title in posted-prices.css), so it may
   run one line or two depending on the width; the body and pill flow under it. ── */
.sr__col{position:absolute;left:calc(1006 / var(--cw) * 100%);right:calc((var(--cw) - 1830) / var(--cw) * 100%);
  top:50%;transform:translateY(-50%);margin:0;}

/* ── headline: the house heading. Walbaum at clamp(40px,4.4vw,62px) down to 600px, then
   clamp(24px,6.6vw,39px); navy; the script word inline in Goodwater at 1.08em, teal, over
   the gold flourish. ── */
/* the line box carries ~.22em of leading above the cap; pulling the heading up by that much
   makes the column's box start at the cap, so its centring leaves equal air above the headline
   and below the pill */
.sr__head{margin:-.2em 0 0;font-family:'Walbaum',Georgia,serif;font-weight:400;
  font-size:clamp(40px,4.4vw,62px);line-height:.94;letter-spacing:-.026em;color:#16335F;
  font-feature-settings:"kern" 1,"liga" 1;white-space:normal;}
/* two set lines, as "Coming / from town?" is set: "Stay where" over "you ride." */
.sr__ln{display:block;line-height:inherit;white-space:nowrap;}
.sr__script{display:inline-block;font-family:'Goodwater',cursive;font-size:1.08em;line-height:.86;
  letter-spacing:0;color:#4F8A7E;font-style:normal;margin-left:.1em;transform:translateY(.04em);position:relative;white-space:nowrap;}
.sr__script::after{content:"";position:absolute;left:5%;right:10%;bottom:-.08em;
  height:2px;background:#bd9652;border-radius:50%;transform:rotate(-4deg);}
@media (max-width:600px){.sr__head{font-size:clamp(24px,6.6vw,39px);}}

/* ── body: set as the town section's body (.cft__body in town-comp.css): the site's text face at
   16px/1.6, 15px under 1150px, ink-soft. Page-sized rather than comp-sized, so the comp's three
   set lines are let go and the copy wraps to the column. ── */
.sr__p{margin:calc(46 / var(--cw) * 100cqw) 0 0;font:400 16px/1.6 var(--text);color:var(--ink-soft);letter-spacing:normal;white-space:normal;}
@media (max-width:1150px){.sr__p{font-size:15px;}}

/* ── the pill: the page's .pill.pill--solid recipe as the "Reserve with Jamaica Beach" pill
   wears it (.reserve-reference__reservation in did-you-know-reference.css): the site's text
   face at 15px/600, 14px 30px padding, navy on cream, a gold-tinted rule, the arrow that
   nudges on hover. Page-sized, not comp-sized. ── */
.sr__pill,.sr-copy a{display:inline-flex;align-items:center;gap:9px;max-width:100%;margin-top:30px;
  font-family:var(--text);font-weight:600;font-size:15px;line-height:1.65;letter-spacing:.03em;
  padding:14px 30px;border-radius:999px;border:1.5px solid rgba(181,137,74,.78);
  background:var(--navy);color:var(--cream);text-decoration:none;cursor:pointer;
  transition:all .22s ease;white-space:nowrap;}
.sr__pill:hover,.sr-copy a:hover{background:var(--deep);border-color:#b58a4a;transform:translateY(-2px);box-shadow:0 10px 24px rgba(14,36,69,.22);}
.sr__pill svg,.sr-copy a svg{flex:0 0 auto;transition:transform .3s cubic-bezier(.22,.61,.36,1);}
.sr__pill:hover svg,.sr-copy a:hover svg{transform:translateX(3px);}
.sr__pill:focus-visible,.sr-copy a:focus-visible{outline:2px solid #143159;outline-offset:3px;}
@media (prefers-reduced-motion:reduce){
  .sr__pill,.sr-copy a,.sr__pill svg,.sr-copy a svg{transition:background .22s ease;}
  .sr__pill:hover,.sr-copy a:hover,.sr__pill:hover svg,.sr-copy a:hover svg{transform:none;}
}
@media (max-width:600px){.sr-copy h2{font-size:clamp(24px,6.6vw,39px);}}