/* money.css - month 1 service and town pages (build-money-pages.cjs).
   Only what styles.css does not already have. Versioned by content hash in the page head,
   so editing this file never moves the styles.css pin on the rest of the site.
   Every rule is scoped to .m1, so About, home and every other page are untouched (round 3, R16).

   Round 3 (2026-10-08, Scarlett section 4, Marshall R10): no wrap-style rule in this file and no
   max-width cap on a title or a paragraph. Centered heads use .m1-head.center, not styles.css
   .sect-head.center (that one balances its h2). Line length comes from the column a block sits in.
   A short last line is fixed by a smaller title size (per-element class) or by binding the last
   3 words of a paragraph with U+00A0 in the builder. */
.m1 img{height:auto}
/* hero: full-bleed height back (the rule above loads later than styles.css .abhero>img) */
.m1 .abhero>img{height:100%}
/* scrim strength per page: money-pages/<slug>.cjs hero.scrim {core, mid} writes --core/--mid */
.m1 .abhero::after{background:radial-gradient(ellipse 60% 40% at 50% 50%,rgba(26,21,15,var(--core,.4)),rgba(26,21,15,calc(var(--core,.4) * .33)) 70%,rgba(26,21,15,0) 100%),linear-gradient(180deg,rgba(26,21,15,.6),rgba(26,21,15,var(--mid,.22)) 46%,rgba(26,21,15,.46))}
/* at phone width the H1 runs three lines, taller than the 40% ellipse: widen the same scrim (strength unchanged) */
@media (max-width:600px){.m1 .abhero::after{background:radial-gradient(ellipse 80% 50% at 50% 50%,rgba(26,21,15,var(--core,.4)),rgba(26,21,15,calc(var(--core,.4) * .33)) 70%,rgba(26,21,15,0) 100%),linear-gradient(180deg,rgba(26,21,15,.6),rgba(26,21,15,var(--mid,.22)) 46%,rgba(26,21,15,.46))}}
/* hero focal point per page and per width: hero.pos / hero.posMobile write --hpos / --hpos-m */
.m1 .abhero>img{object-position:var(--hpos,50% 50%)}
/* crumbs in the hero, above the eyebrow (Scarlett S00) */
.m1 .abhero .crumbs{color:#F3E9DC;margin-bottom:18px}
.m1 .abhero .crumbs a{color:#F3E9DC}
.m1 .abhero .crumbs a:hover{color:#FBF7EF;border-bottom-color:#F3E9DC}
.m1 .abhero .crumbs li+li::before{color:#F3E9DC}
.m1 .abhero .crumbs [aria-current]{color:#FBF7EF}

/* type: the h2 scale stays as fix 2 set it; every cap from styles.css comes off inside .m1 */
.m1 h2{font-size:clamp(30px,3.6vw,46px);margin-bottom:20px}
.m1 p,.m1 .lead,.m1 .fq p,.m1 .step p,.m1 .area .area-note{max-width:none}
.m1 .area-copy .sect-head h2{max-width:none}
@media (min-width:721px){
.m1 h2.fs-44{font-size:44px}.m1 h2.fs-42{font-size:42px}.m1 h2.fs-40{font-size:40px}.m1 h2.fs-38{font-size:38px}
.m1 h2.fs-36{font-size:36px}.m1 h2.fs-34{font-size:34px}.m1 h2.fs-32{font-size:32px}.m1 h2.fs-30{font-size:30px}
.m1 h3.fs-20{font-size:20px}.m1 h3.fs-18{font-size:18px}
}
/* one text color per block: an in-copy link takes its paragraph's color and keeps the pink underline */
.m1 p a,.m1 li a,.m1 td a{color:inherit;border-bottom:1px solid var(--bronze)}
.m1 p a:hover,.m1 li a:hover{color:inherit;border-bottom-color:var(--bronze-deep)}

/* Round 4 (2026-10-09, Justin's notes, Marshall R2): the answer paragraph lives in the hero, under the H1.
   The hero grows with its text (no clipped lines at phone width); text sits in one inner column. */
.m1 .abhero{height:auto;min-height:max(420px,min(66vh,620px));display:flex}
.m1 .abhero .ah-in{position:relative;inset:auto;flex:1;min-width:0;width:100%;padding-top:64px;padding-bottom:64px}
.m1-hero-lead{width:100%;max-width:820px;margin:22px auto 0}
.m1 .abhero .m1-answer{font-size:clamp(17px,1.45vw,20px);line-height:1.6;color:#FBF7EF;margin:0}

/* S02 split band (R3): solid deep pink panel with the eyebrow and H2 in white, white copy panel beside it */
.m1-split{display:grid;grid-template-columns:5fr 7fr;align-items:stretch;background:#fff;border:1px solid var(--line)}
.m1-split-head{background:var(--bronze-deep);color:#fff;padding:48px;display:flex;flex-direction:column;justify-content:center}
.m1-split-head .label{display:block;margin-bottom:12px;color:#fff}
.m1-split-head h2{color:#fff;margin-bottom:0}
.m1-split-head h2 em{color:#fff}
.m1-split .body{padding:48px;display:flex;flex-direction:column;justify-content:center}
.m1-story .body p,.m1-copy p{margin-bottom:18px;color:var(--mut)}
.m1-story .m1-split .body p{color:var(--ink)}
.m1-story .body p:last-child,.m1-copy p:last-child,.m1-copy>:last-child,.m1-copy .m1-list li:last-child{margin-bottom:0}
.m1 .imgband img{height:min(58vw,540px);filter:saturate(.92) sepia(.07);object-position:var(--bpos,50% 50%)}

/* section heads */
.m1-head{margin-bottom:40px}
.m1-head .label{display:block;margin-bottom:12px}
.m1-head p{color:var(--mut)}
.m1-head.center{text-align:center}
.m1-narrow{max-width:880px;margin-left:auto;margin-right:auto}
.m1-tint{background:var(--sage-soft)}
.m1-list{margin:0 0 18px 1.1em;color:var(--mut)}
.m1-list li{margin-bottom:8px}

/* editorial rows (R4): image 5fr, copy 7fr; the photo is exactly as tall as the copy.
   The img is absolute inside the figure, so the copy alone sets the row height. --rpos keeps the subject in frame.
   Round 4 fix 1: the floor is 280px, under the shortest copy column (308px), so it never makes a photo taller than its copy. */
.m1 .row{grid-template-columns:5fr 7fr;align-items:stretch}
.m1 .row.flip{grid-template-columns:7fr 5fr}
.m1 .row.flip .row-img{order:2}
.m1 .row-txt{align-self:stretch;display:flex;flex-direction:column;justify-content:center}
.m1 .row-img{margin:0;position:relative;min-height:280px;overflow:hidden}
.m1 .row-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--rpos,50% 50%)}
/* S04 strip of 3 under the copy, at the size Justin liked */
.m1-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px}
.m1-strip img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:saturate(.92) sepia(.06)}

/* tables and note cards */
.m1-table{margin-top:8px;overflow-x:auto}
.m1 .rtable{width:100%}
.m1-note{max-width:880px;margin:36px auto 0;background:#fff;border:1px solid var(--line);border-top:3px solid var(--bronze);padding:28px 36px;text-align:center}
.m1-note p{color:var(--mut);margin:0}

/* cards */
.m1-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.m1-cards.three{grid-template-columns:repeat(3,1fr)}
.m1-cards.two{grid-template-columns:repeat(2,1fr)}
.m1-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);padding:22px 22px 24px;transition:border-color .16s ease}
a.m1-card:hover{border-color:var(--bronze)}
.m1-card .label{display:block;margin-bottom:10px;font-size:11.5px}
.m1-card strong,.m1-card h3{display:block;font-family:var(--serif);font-size:22px;font-weight:500;line-height:1.22;margin:0 0 8px;color:var(--ink)}
.m1-card .d,.m1-card p{font-size:15.5px;color:var(--mut);line-height:1.55;margin:0}
.m1-fact{border-top:3px solid var(--bronze);padding:26px 26px 28px}
.m1-fact .num{display:block;font-family:var(--serif);font-size:15px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--bronze-deep);margin-bottom:10px}
.m1-fact p{font-size:16px}
/* keep planning cards */
.m1-next{border-top:3px solid var(--bronze);position:relative;padding-bottom:52px}
.m1-next .m1-arrow{position:absolute;left:22px;bottom:20px;font-size:20px;line-height:1;color:var(--bronze-deep);transition:transform .16s ease}
.m1-next:hover .m1-arrow{transform:translateX(4px)}

/* steps: centered head, step copy fills its column */
.m1 .step p{margin:0 auto}

/* R7 quick facts: one bordered panel in the nav column, label bold with the value beside it, 2 columns of rows */
.m1-factsec{padding-bottom:0}
/* round 4 fix 3: when the next section is the pink tint band, the facts box gets the standard section space
   under it, so the white box no longer touches the pink. A plain next section keeps its own top padding as the gap. */
.m1 .m1-factsec:has(+ .m1-tint){padding-bottom:84px}
.m1-facts{background:#fff;border:1px solid var(--line);border-top:3px solid var(--bronze);padding:36px 40px 30px}
.m1-facts h2{font-size:clamp(28px,2.6vw,34px);margin:0 0 18px}
.m1-dl{display:grid;grid-template-columns:1fr 1fr;column-gap:48px;margin:0}
.m1-dl>div{display:grid;grid-template-columns:minmax(0,11em) minmax(0,1fr);gap:16px;padding:13px 0;border-top:1px solid var(--line)}
.m1-dl dt{font-weight:700;color:var(--ink);font-size:16px;line-height:1.5;white-space:nowrap}
.m1-dl dd{margin:0;color:var(--mut);font-size:16px;line-height:1.5}
@media (max-width:1200px){.m1-dl{column-gap:36px}.m1-dl>div{grid-template-columns:minmax(0,8.5em) minmax(0,1fr)}}

/* R6 product cards: 4 across, 4:3 white frame, whole product shown, the card is the link */
.m1-prods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.m1-prod{display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid var(--line);transition:border-color .16s ease}
.m1-prod:hover{border-color:var(--bronze)}
.m1-prod-img{display:block;position:relative;width:100%;aspect-ratio:4/3;background:#fff;border-bottom:1px solid var(--line)}
.m1-prod-img img{position:absolute;top:12px;left:12px;width:calc(100% - 24px);height:calc(100% - 24px);object-fit:contain;display:block}
.m1-prod-body{display:flex;flex-direction:column;padding:18px 20px 22px}
.m1-prod .label{display:block;margin-bottom:8px;font-size:11.5px}
.m1-prod strong{font-family:var(--serif);font-size:20px;font-weight:500;line-height:1.25;color:var(--ink)}
.m1-prod:hover strong{color:var(--bronze-deep)}
.m1-prod-more{text-align:center;margin:30px 0 0}

/* gallery: styles.css .masonry (3 columns, no captions); 4 across for a short set.
   R9a (Scarlett): inline-block plus full width keeps WebKit's column fill even */
.m1 .masonry img{display:inline-block;width:100%;vertical-align:top}
/* round 4 fix 3: the 4-photo set is a grid, not columns. CSS columns put 2 photos in each of the first
   2 columns in chromium (half the column left empty). The grid gives one row of 4 that spans the column. */
.m1 .masonry.four{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;columns:auto}
.m1 .masonry.four img{aspect-ratio:4/5;object-fit:cover;margin:0}

/* reviews: a static 2-up of .rev cards, quote never clamped */
.m1-revs{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.m1-revs.one{grid-template-columns:minmax(0,546px);justify-content:center}
.m1 .rev blockquote{-webkit-line-clamp:unset;display:block;overflow:visible}
.m1-revlink{text-align:center;margin-top:30px}

/* town module: About's .area, with town buttons */
/* R5 + round 4 fix 1: the map panel is a column. The drawing sits at the top at full panel width in its own
   660x690 shape (meet, never cropped), and the map key sits under it as a white band. The band takes whatever
   height the copy column leaves (flex 1 1 auto, items centered), so there is no empty beige above or below. */
.m1 .area-mapwrap{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;background:#F4EEE3;border:1px solid var(--line)}
.m1 .area-mapwrap .area-map{flex:0 0 auto;width:100%;height:auto}
.m1 .area-mapwrap .area-legend{flex:1 1 auto;display:grid;grid-template-columns:1fr;align-content:center;gap:10px 20px;margin:0;padding:18px 22px;background:#fff;border-top:1px solid var(--line);text-align:left}
.m1 .area-mapwrap .area-legend li{margin:0;grid-template-columns:24px minmax(0,1fr);gap:10px;font-size:15px}
@media (min-width:1150px){
  .m1 .area-layout{align-items:stretch;grid-template-columns:minmax(0,1fr) 520px}
  .m1 .area-mapwrap{height:100%;margin:0}
  .m1 .area-mapwrap .area-legend{grid-template-columns:repeat(2,auto);justify-content:space-between;column-gap:16px}
  .m1 .area-mapwrap .area-legend li{grid-template-columns:22px auto;gap:8px;font-size:14px;white-space:nowrap}
}
/* round 4 fix 2: side by side only from 1150px. Below that the key band grew to 146 to 272px on the longer
   pages (measured at 1101, 1112 and 1133), an empty white box under the map. So 1149px and down use the
   stacked layout the phone and tablet widths already use: copy first, then the map, then the key under it. */
@media (max-width:1149px){
  .m1 .area-layout{grid-template-columns:1fr;gap:44px;justify-items:center;text-align:center}
  .m1 .area-copy .sect-head h2{margin-left:auto;margin-right:auto}
  .m1 .area .area-note{text-align:center;margin-left:auto;margin-right:auto}
}
.m1 .area-copy .sect-head{margin-bottom:22px}
.m1 .area-copy>p{color:var(--mut);margin:0 0 4px}
.m1 .area .area-note{margin:22px 0 0;font-size:16px}
.m1-towns{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0;padding:0}
.m1-towns li{display:flex}
.m1-towns .town-btn{display:inline-flex;align-items:center;font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:10px 18px;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:0;line-height:1.2}
.m1-towns a.town-btn{transition:border-color .16s ease,color .16s ease}
.m1-towns a.town-btn:hover{border-color:var(--bronze);color:var(--bronze-deep)}
.m1-towns a.town-btn:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}
.m1-towns span.town-btn{cursor:default}
.m1-towns .town-btn[aria-current]{background:var(--bronze-ink);border-color:var(--bronze-ink);color:#fff}
.m1 .area-map .am-here{fill:var(--bronze-deep)}
.m1 .area-legend .lg-here{display:block;width:12px;height:12px;border-radius:50%;background:var(--bronze-deep)}

/* FAQ and Keep planning read as one block: 40 + 40 = 80px between them */
.m1-faq{padding:84px 0 40px}
.m1-faq .faq{max-width:880px;margin:0 auto}
.m1-keep{padding:40px 0 84px}

/* blog cards: the blog hub's .bcard look (blog.css is not loaded on these pages) */
.m1 .bcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);transition:border-color .18s ease,transform .18s ease}
.m1 .bcard:hover{border-color:var(--bronze);transform:translateY(-2px)}
.m1 .bcard-img{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--ivory-deep)}
.m1 .bcard-img img{width:100%;height:100%;object-fit:cover;display:block}
.m1 .bcard-body{display:flex;flex-direction:column;gap:10px;padding:22px 24px 26px}
.m1 .bcard-meta{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.m1 .bcard-title{font-family:var(--serif);font-weight:500;font-size:24px;line-height:1.18;color:var(--ink)}
.m1 .bcard:hover .bcard-title{color:var(--bronze-deep)}
.m1 .bcard-desc{font-size:16px;line-height:1.6;color:var(--mut)}

/* the primary button sits in the hero on phones only (fix 2); the answer band carries no buttons */
.m1-hero-btn{display:none}
@media (max-width:960px){
  .m1-prods{grid-template-columns:repeat(2,minmax(0,1fr))}
  .m1-dl{grid-template-columns:1fr}
  .m1-split{grid-template-columns:1fr}
  .m1-split-head,.m1-split .body{padding:36px 32px}
  .m1 .row,.m1 .row.flip{grid-template-columns:1fr}
  .m1 .row.flip .row-img{order:0}
  .m1 .row-img{min-height:0;aspect-ratio:4/3}
  .m1-cards{grid-template-columns:1fr 1fr}
  .m1-cards.three,.m1-cards.two{grid-template-columns:1fr}
  .m1-revs{grid-template-columns:1fr}
  .m1 .masonry.four{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .m1 section{padding:64px 0}
  .m1 .m1-factsec{padding-bottom:0}
  .m1 .m1-factsec:has(+ .m1-tint){padding-bottom:64px}
  .m1-dl{grid-template-columns:1fr}
  .m1-dl>div{grid-template-columns:1fr;gap:2px}
  .m1 .abhero .ah-in{padding-top:48px;padding-bottom:48px}
  .m1-facts{padding:28px 24px 22px}
  .m1-split-head,.m1-split .body{padding:28px 24px}
  .m1 .m1-faq{padding:64px 0 32px}
  .m1 .m1-keep{padding:32px 0 64px}
  .m1 .sect-head,.m1-head{margin-bottom:36px}
  .m1 .imgband img{height:64vw}
  .m1-strip{grid-template-columns:1fr;gap:16px;margin-top:36px}
  .m1-note{padding:24px 24px}
  .m1-hero-btn{display:inline-block;margin-top:22px;position:relative;z-index:2}
  .m1 .abhero>img{object-position:var(--hpos-m,var(--hpos,50% 50%))}
  .m1 .bcard-title{font-size:22px}
  .m1-towns{justify-content:center}
  .m1 .area .area-note{text-align:center}
  .m1 h2.m-30{font-size:30px}.m1 h2.m-28{font-size:28px}
  .m1 h3.m-20{font-size:20px}.m1 h3.m-18{font-size:18px}
  /* fix 1: an H1 whose bound line is wider than a phone column steps down with the column (R10 size step) */
  .m1 .abhero h1.m-fit{font-size:min(46px,calc((100vw - 48px) / 9.3))}
  /* 2026-10-13: the two folder hubs (/events/, /service-areas/) use the gallery page head; their bound H1 groups
     ran 8 to 23px past a 390 or 375 column at the site's 46px floor, so they take the same phone size step */
  .m1-hub .gpagehead h1{font-size:min(46px,calc((100vw - 48px) / 9.3))}
}
@media (max-width:600px){
  .m1-cards{grid-template-columns:1fr}
  .m1-prod strong{font-size:18px}
  .m1 .masonry{columns:2;column-gap:10px}
  .m1 .masonry.four{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .m1 .masonry img{margin-bottom:10px}
  .m1 .masonry.four img{margin:0}
}
@media (max-width:430px){
  /* R6: at phone width a bound product name does not fit half a column, so the cards stack */
  .m1-prods{grid-template-columns:1fr}
  /* R7/R10: on phones the facts panel keeps its top and bottom rules and drops the side rules and side padding,
     so the heading gets the full column (Destination's 4-word heading needs 323px at 28px) */
  .m1-facts{padding:26px 0 18px;border-left:0;border-right:0;background:transparent}
}
/* Page chrome on the 8 money pages only (body:has(.m1)), never on the other pages (R16).
   The closed phone menu panel sits off screen but still renders, so copy-fit counted its
   wrapped category groups; hide it until it opens. Footer list items stay on one line. */
@media (max-width:860px){body:has(.m1) .nav-m:not([open])>ul{visibility:hidden}}
body:has(.m1) .f-grid li{white-space:nowrap}