/* ============================================================
   Big Weekend — What It Costs (montreal-bachelorette-cost.html)
   Loaded after styles.css; everything here is namespaced csx-.
   Montreal Guide No. 03. Same editorial frame as getting-here.css.
   ============================================================ */

/* ---- hero: title left, the short version on a receipt beside it ---- */
.csx-hero{background:#F8F0E5;overflow:hidden;padding:24px 0 32px}
/* the illustration sits right of the headline; its own cream fades into the page on the left */
.csx-hero-art{display:block;justify-self:end;width:100%;max-width:560px}
.csx-hero-art img{display:block;width:100%;height:auto;-webkit-mask-image:linear-gradient(to right,transparent,#000 22%);mask-image:linear-gradient(to right,transparent,#000 22%)}
.csx-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:32px;align-items:center}
.csx-hero-txt{max-width:480px}
.csx-hero-txt .ed-eyebrow{color:var(--rose)}
.csx-hero-txt h1{font-size:clamp(46px,6.4vw,86px);line-height:.98;color:var(--bordeaux);letter-spacing:-.005em}
.csx-hero-txt h1 .script{color:var(--rose);font-size:1.06em;line-height:.9}
.csx-hero-txt .lede{font-size:18.5px;color:var(--ink);margin:20px 0 0;max-width:36ch;line-height:1.6}

/* the receipt, with the Big Weekend stamp pressed over its corner */
.csx-receipt{position:relative;background:#FFFDF8;border-radius:4px 4px 0 0;padding:26px 28px 24px;box-shadow:0 18px 40px rgba(43,18,25,.14);transform:rotate(1.4deg);margin:0 18px 10px 0}
.csx-receipt::after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:10px;background:radial-gradient(circle at 6px 0,#FFFDF8 5.5px,transparent 6px) 0 0/12px 10px repeat-x}
.csx-rc-head{font-size:10.5px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--ink);text-align:center;padding-bottom:14px;border-bottom:1.5px dashed rgba(43,18,25,.32)}
.csx-receipt ul{list-style:none;margin:0;padding:8px 0;border-bottom:1.5px dashed rgba(43,18,25,.32)}
.csx-receipt li{display:flex;justify-content:space-between;gap:16px;padding:7px 0;font-size:14px;color:var(--ink-soft)}
.csx-receipt li b{color:var(--ink);font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.csx-rc-fine{font-size:11.5px;color:var(--ink-soft);padding-top:12px;max-width:24ch}
.csx-stamp{position:absolute;right:-26px;bottom:-30px;width:132px;height:auto;transform:rotate(-14deg);opacity:.9;mix-blend-mode:multiply;pointer-events:none}

/* ---- section heads ---- */
.csx-head{max-width:760px;margin-bottom:34px}
.csx-sec-h{font-size:clamp(34px,4.4vw,54px);line-height:1.02;color:var(--ink)}
.csx-sec-h .script{color:var(--rose);font-size:1.14em}
.csx-sub{font-size:15.5px;color:var(--ink-soft);max-width:58ch;line-height:1.6;margin-top:12px}
.csx-prices{background:var(--bordeaux);color:var(--cream);padding:72px 0}
.csx-prices .ed-eyebrow{color:#E9B7C0}
.csx-prices .csx-sec-h{color:var(--cream)}
.csx-prices .csx-sec-h .script{color:#F3CDD5}
.csx-prices .csx-sub,.csx-prices .csx-note{color:var(--cream-dim)}
.csx-prices .csx-note a{color:#F3CDD5;border-color:#F3CDD5}
.csx-prices .csx-note a:hover{color:var(--cream);border-color:var(--cream)}
.csx-prices-top{margin-bottom:36px}
/* an open book: two pages, a soft shadow down the spine */
.csx-book{display:grid;grid-template-columns:1fr 1fr;background:#FFFDF8;border-radius:6px;box-shadow:0 2px 0 #EFE6D6,0 4px 0 #E4D8C4,0 22px 44px rgba(20,6,10,.35)}
.csx-page{padding:30px 40px 28px}
.csx-page:first-child{background:linear-gradient(to left,rgba(43,18,25,.09),transparent 44px);border-radius:6px 0 0 6px}
.csx-page:last-child{background:linear-gradient(to right,rgba(43,18,25,.09),transparent 44px);border-radius:0 6px 6px 0}
.csx-page-h{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:24px;color:var(--bordeaux);padding-bottom:10px;margin-bottom:6px;border-bottom:1.5px dashed rgba(43,18,25,.3)}
.csx-book ul{list-style:none;margin:0;padding:0}
.csx-book li{display:flex;align-items:baseline;gap:10px;padding:9px 0;font-size:14.5px;color:var(--ink-soft)}
.csx-lead{flex:1;min-width:16px;border-bottom:1.5px dotted rgba(43,18,25,.28);transform:translateY(-4px)}
.csx-book li b{color:var(--ink);font-weight:700;white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.csx-book-fine{font-size:13px;color:var(--cream-dim);text-align:center;margin-top:22px}
.csx-bk-usd{display:block}
.csx-rc-cad{display:block;font-style:normal;font-size:11.5px;font-weight:600;color:var(--rose);margin-top:2px}
.csx-book-note{text-align:center;margin:6px auto 0;font-size:13px}
.csx-note{font-size:14.5px;color:var(--ink-soft);line-height:1.6;margin-top:22px;max-width:64ch}
.csx-note a{color:var(--rose);font-weight:600;text-decoration:none;border-bottom:1px solid var(--rose)}
.csx-note a:hover{color:var(--bordeaux);border-color:var(--bordeaux)}

/* the exchange rate: one dated line */
.csx-wk-top{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:34px}
.csx-wk-top .csx-head{margin-bottom:0}
/* the rate ticker: a forex board, in blush */
.csx-fx{flex:0 0 300px;position:relative;background:linear-gradient(160deg,#FFF7F4,#F6DDE0);border:1px solid rgba(172,65,83,.22);border-radius:18px;padding:14px 16px 12px;box-shadow:0 10px 26px rgba(172,65,83,.14);overflow:hidden}
.fx-row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.fx-pair{font-size:10.5px;font-weight:700;letter-spacing:.2em;color:var(--bordeaux)}
.fx-pair i{font-style:normal;color:var(--rose);margin:0 2px}
.fx-spk{display:inline-block;color:var(--rose);margin-left:2px;animation:fx-twinkle 2.6s ease-in-out infinite}
.fx-live{display:inline-flex;align-items:center;gap:6px;font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--rose);background:rgba(255,255,255,.7);border-radius:100px;padding:4px 9px}
.fx-dot{position:relative;width:7px;height:7px;border-radius:50%;background:#D9A3AD}
.is-live .fx-dot{background:var(--rose)}
.is-live .fx-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--rose);animation:fx-ping 1.8s ease-out infinite}
.fx-rate{display:flex;align-items:baseline;gap:8px;margin:8px 0 2px;overflow:hidden}
.fx-one{font-size:12px;font-weight:600;color:var(--ink-soft)}
.fx-rate b{font-family:'Cormorant Garamond',serif;font-size:36px;font-weight:600;line-height:1;color:var(--bordeaux);font-variant-numeric:lining-nums tabular-nums}
.fx-num{display:inline-block}
.fx-tick{animation:fx-roll .7s cubic-bezier(.2,.8,.2,1)}
.fx-spark{display:block;width:100%;height:40px;margin:4px 0 6px;opacity:0;transition:opacity .4s}
.has-spark .fx-spark{opacity:1}
.fx-area{fill:url(#fx-fill)}
.fx-line{fill:none;stroke:var(--rose);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1}
.has-spark .fx-line{animation:fx-draw 1.6s ease-out .1s forwards}
.fx-foot{border-top:1px dashed rgba(172,65,83,.3);padding-top:8px}
.csx-fx-lbl{white-space:nowrap;font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.fx-chg{font-size:10.5px;font-weight:700;color:var(--rose);white-space:nowrap}
@keyframes fx-ping{0%{transform:scale(1);opacity:.6}100%{transform:scale(3);opacity:0}}
@keyframes fx-twinkle{0%,100%{opacity:.35;transform:scale(.8) rotate(0)}50%{opacity:1;transform:scale(1.15) rotate(20deg)}}
@keyframes fx-roll{0%{transform:translateY(70%);opacity:0}100%{transform:none;opacity:1}}
@keyframes fx-draw{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.fx-spk,.is-live .fx-dot::after,.fx-tick{animation:none}.has-spark .fx-line{animation:none;stroke-dashoffset:0}}

/* ---- by weekend: three cards ---- */
.csx-wk{background:#EFE5D3;padding:84px 0}
.csx-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.csx-card{display:flex;flex-direction:column;background:#FCF8EF;border:1px solid var(--line-ink);border-radius:16px;padding:24px 24px 22px;text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s}
.csx-card:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(43,18,25,.1)}
.csx-card .tk{font-size:10px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--rose)}
.csx-num{font-family:'Cormorant Garamond',serif;font-size:clamp(34px,3.4vw,42px);font-weight:600;color:var(--bordeaux);line-height:1.05;margin-top:12px;font-variant-numeric:lining-nums}
.csx-cad{margin:10px 0 14px;padding-bottom:14px;border-bottom:1px solid var(--line-ink)}
.csx-cad span{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.06em;color:var(--bordeaux);background:var(--blush);border-radius:100px;padding:5px 12px;font-variant-numeric:tabular-nums}
.csx-card>p:not(.tk):not(.csx-num):not(.csx-cad):not(.csx-why){font-size:14px;color:var(--ink-soft);line-height:1.6}
.csx-card>p.csx-why{font-size:13.5px;color:var(--ink-soft);line-height:1.6;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line-ink)}
.csx-why b{color:var(--bordeaux);font-weight:700}
.csx-go{margin-top:auto;padding-top:16px;font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--bordeaux)}
.csx-card:hover .csx-go{color:var(--rose)}

/* ---- drive vs fly: a small table that stacks on phones ---- */

/* ---- what moves the number ---- */
.csx-moves{background:var(--cream);padding:88px 0}
.csx-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px;max-width:980px}
.csx-item{display:grid;grid-template-columns:42px 1fr;column-gap:16px;padding:22px 0;border-top:1px solid var(--line-ink)}
.csx-item .no{grid-row:span 2;font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--rose);padding-top:6px}
.csx-item h3{font-size:24px;color:var(--ink);line-height:1.1}
.csx-item p{font-size:14.5px;color:var(--ink-soft);line-height:1.6;margin-top:6px}

/* ---- FAQ ---- */
.csx-faq{background:#EFE5D3;padding:84px 0}
.csx-qs{max-width:820px;border-top:1px solid var(--line-ink)}
.csx-qs details{border-bottom:1px solid var(--line-ink)}
.csx-qs summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:20px 0;font-family:'Cormorant Garamond',serif;font-size:23px;font-weight:600;color:var(--ink);line-height:1.2}
.csx-qs summary::-webkit-details-marker{display:none}
.csx-qs summary::after{content:"+";font-family:'Hanken Grotesk',sans-serif;font-size:20px;font-weight:400;color:var(--rose);line-height:1;transition:transform .2s}
.csx-qs details[open] summary::after{transform:rotate(45deg)}
.csx-qs summary:focus-visible{outline:2px solid var(--rose);outline-offset:4px}
.csx-qs details p{font-size:15px;color:var(--ink-soft);line-height:1.65;padding:0 0 22px;max-width:68ch}

/* ---- final CTA band ---- */
.csx-cta{padding:70px 0 90px;background:var(--cream)}
.csx-break{background:var(--bordeaux);color:var(--cream);border-radius:20px;padding:38px 46px;display:flex;justify-content:space-between;align-items:center;gap:34px}
.csx-break-eyebrow{font-size:10px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:#F3CDD5;margin-bottom:10px}
.csx-break-h{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(26px,3vw,34px);line-height:1.08;color:var(--cream)}
.csx-break-p{font-size:14.5px;color:var(--cream-dim);line-height:1.6;margin-top:10px;max-width:56ch}
.csx-break .btn{white-space:nowrap}
.csx-fine{background:var(--cream);padding:0 0 46px}
.csx-fine p{max-width:1116px;margin:0 auto;padding:0 32px;font-size:12px;color:var(--ink-soft);opacity:.8;line-height:1.6}

/* ---- responsive ---- */
@media(max-width:860px){
  .csx-wk-top{flex-direction:column;align-items:flex-start;gap:22px}
  .csx-fx{flex-basis:auto;width:100%;max-width:300px}
  .csx-book{grid-template-columns:1fr}
  .csx-page:first-child,.csx-page:last-child{background:none;border-radius:0}
  .csx-page:first-child{border-bottom:1px solid var(--line-ink)}
  .csx-cards{grid-template-columns:1fr}
  .csx-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .csx-hero{padding:8px 0 40px}
  .csx-hero-grid{grid-template-columns:1fr;gap:4px}
  .csx-hero-art{order:-1;justify-self:center;max-width:420px}
  .csx-hero-art img{height:auto;-webkit-mask-image:linear-gradient(to bottom,#000 78%,transparent);mask-image:linear-gradient(to bottom,#000 78%,transparent)}
}
@media(max-width:680px){
  .csx-stamp{width:104px;right:-8px;bottom:-26px}
  .csx-break{flex-direction:column;align-items:flex-start;padding:28px 26px}
  .csx-qs summary{font-size:20px}
  .csx-page{padding:24px 22px 20px}
}
@media(prefers-reduced-motion:reduce){
  .csx-card{transition:none}
  .csx-card:hover{transform:none}
}