/* Kris Bradley | offer pages and the Porch Lights map
   Porch Lights (/porch-lights/), A Song for You (/a-song-for-you/), House Concerts (/house-concerts/),
   Private Events (/private-events/) plus the compact Porch Lights block on the home page.
   Loads after home.css and kb-brand.css and uses their tokens. */

.offer { background: var(--paper); color: var(--ink); }
.offer__hero { position: relative; padding: clamp(96px, 12vw, 150px) 0 clamp(48px, 6vw, 80px); background: radial-gradient(ellipse 70% 60% at 85% 10%, rgba(217, 105, 46, .18), transparent 60%), linear-gradient(180deg, var(--night) 0%, #1F1A16 55%, var(--night-2) 100%); color: var(--cream); overflow: hidden; }
.offer__hero::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(200, 155, 90, .6), transparent); }
.offer__hero .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.offer__hero h1 { font-family: var(--poster, var(--display)); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; font-size: clamp(38px, 5.6vw, 76px); line-height: .98; margin: 10px 0 18px; color: var(--cream); }
.offer__hero h1 em { font-family: 'Caveat', cursive; font-style: normal; text-transform: none; font-weight: 600; color: var(--gold); letter-spacing: .01em; font-size: 1.35em; line-height: .9; display: inline-block; transform: rotate(-2deg); transform-origin: left bottom; padding-right: .1em; }
.offer__lede { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; color: rgba(242, 237, 228, .86); max-width: 34em; margin: 0 0 24px; }
.offer__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.offer__note { font-family: var(--mono, monospace); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(242, 237, 228, .6); margin: 14px 0 0; }
.offer__art { position: relative; }
.offer__art img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); border: 1px solid rgba(255, 255, 255, .08); }
.offer__art .stamp { position: absolute; right: -8px; top: -14px; transform: rotate(6deg); background: var(--porch); color: #2A1A06; font-family: var(--mono, monospace); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; padding: 10px 14px; border-radius: 999px; box-shadow: 0 10px 24px -10px rgba(246, 178, 74, .9); }

.offer__body { padding: clamp(48px, 6vw, 88px) 0; }
.offer__body .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 440px); gap: clamp(28px, 5vw, 72px); align-items: start; }
.offer__copy h2 { font-family: var(--poster, var(--display)); font-weight: 400; text-transform: uppercase; letter-spacing: .02em; font-size: clamp(26px, 3vw, 40px); margin: 0 0 14px; color: var(--ink); }
.offer__copy h2 + p, .offer__copy p { font-size: 17px; line-height: 1.65; color: #4A3F36; max-width: 38em; }
.offer__copy .block { margin-bottom: clamp(32px, 4vw, 52px); }

/* numbered steps */
.steps { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 14px; counter-reset: step; }
.steps li { position: relative; padding: 16px 18px 16px 64px; background: #FCF7ED; border: 1px solid rgba(26, 20, 16, .12); border-radius: 12px; box-shadow: 0 10px 24px -20px rgba(26, 20, 16, .6); }
.steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 16px; top: 14px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--ember); color: #FFF6E8; font-family: var(--poster, var(--display)); font-size: 17px; }
.steps li b { display: block; font-family: var(--display); font-size: 18px; margin-bottom: 4px; color: var(--ink); }
.steps li span { font-size: 15.5px; line-height: 1.5; color: #4A3F36; }

/* what you get */
.gets { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.gets li { padding: 14px 16px 14px 44px; position: relative; background: #FCF7ED; border: 1px solid rgba(26, 20, 16, .12); border-radius: 12px; font-size: 15px; line-height: 1.5; color: #4A3F36; }
.gets li::before { content: ""; position: absolute; left: 16px; top: 18px; width: 14px; height: 14px; border-radius: 50%; background: var(--porch); box-shadow: 0 0 0 4px rgba(246, 178, 74, .22); }
.gets li b { color: var(--ink); }

/* price chip */
.price { display: inline-flex; align-items: baseline; gap: 10px; padding: 14px 20px; border-radius: 14px; background: var(--night); color: var(--cream); margin: 6px 0 16px; box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .8); }
.price b { font-family: var(--poster, var(--display)); font-weight: 400; font-size: clamp(30px, 3.4vw, 44px); line-height: 1; color: var(--porch); }
.price span { font-family: var(--mono, monospace); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(242, 237, 228, .7); }

/* fine print */
.fine { font-size: 14px !important; line-height: 1.6 !important; color: #6B6058 !important; border-left: 3px solid rgba(200, 155, 90, .5); padding-left: 14px; }

/* the form card */
.fcardform { position: sticky; top: 100px; background: var(--night); color: var(--cream); border-radius: 16px; padding: clamp(22px, 3vw, 32px); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); border: 1px solid rgba(255, 255, 255, .06); }
.fcardform h3 { font-family: var(--poster, var(--display)); font-weight: 400; text-transform: uppercase; letter-spacing: .02em; font-size: clamp(22px, 2.4vw, 30px); margin: 0 0 6px; color: var(--cream); }
.fcardform > p { margin: 0 0 18px; color: rgba(242, 237, 228, .75); font-size: 15px; line-height: 1.5; }
.fcardform .f { display: grid; gap: 12px; }
.fcardform .f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fcardform label { display: grid; gap: 6px; font-family: var(--mono, monospace); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(242, 237, 228, .7); }
.fcardform input, .fcardform select, .fcardform textarea { width: 100%; font: inherit; font-size: 16px; padding: 13px 14px; border-radius: 10px; border: 1px solid rgba(26, 20, 16, .2); background: #F6EFE2; color: var(--ink); outline: none; transition: box-shadow .2s, border-color .2s; }
.fcardform input:focus, .fcardform select:focus, .fcardform textarea:focus { border-color: var(--porch); box-shadow: 0 0 0 4px rgba(246, 178, 74, .22); }
.fcardform textarea { min-height: 120px; resize: vertical; }
.fcardform .btn { width: 100%; justify-content: center; margin-top: 4px; }
.fcardform .form__msg { min-height: 1.2em; margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: var(--porch); }
.fcardform .hp { position: absolute; left: -9999px; }
.fcardform .tiny { font-size: 12.5px; color: rgba(242, 237, 228, .5); margin: 10px 0 0; line-height: 1.5; }
form.is-done .btn { opacity: .6; }

/* proof strip */
.proof { padding: 0 0 clamp(40px, 5vw, 70px); }
.proof .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.proof__item { background: #FCF7ED; border: 1px solid rgba(26, 20, 16, .12); border-radius: 12px; padding: 18px 18px 16px; }
.proof__item b { display: block; font-family: var(--poster, var(--display)); font-weight: 400; font-size: clamp(26px, 3vw, 36px); line-height: 1; color: var(--ember); margin-bottom: 6px; }
.proof__item span { font-size: 14px; line-height: 1.45; color: #4A3F36; }

/* cross links at the bottom of each offer page */
.more { padding: clamp(40px, 5vw, 70px) 0 clamp(60px, 7vw, 100px); background: linear-gradient(180deg, var(--paper), #F3EEE5); }
.more h2 { font-family: var(--poster, var(--display)); font-weight: 400; text-transform: uppercase; letter-spacing: .02em; font-size: clamp(22px, 2.6vw, 32px); margin: 0 0 18px; color: var(--ink); }
.more__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.more__grid a { display: grid; gap: 6px; padding: 20px 20px 22px; background: #FCF7ED; border: 1px solid rgba(26, 20, 16, .12); border-radius: 12px; text-decoration: none; color: var(--ink); box-shadow: 0 10px 24px -20px rgba(26, 20, 16, .6); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.more__grid a:hover { transform: translateY(-3px); box-shadow: 0 18px 30px -20px rgba(26, 20, 16, .7); }
.more__grid a b { font-family: var(--display); font-size: 19px; }
.more__grid a span { font-size: 14.5px; color: #4A3F36; line-height: 1.45; }
.more__grid a small { font-family: var(--mono, monospace); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #A9762F; margin-top: 4px; }

/* Porch Lights map */
.plmap { position: relative; width: 100%; aspect-ratio: 16 / 10; min-height: 320px; border-radius: 16px; overflow: hidden; background: #0C1620 radial-gradient(ellipse 60% 50% at 50% 50%, rgba(246, 178, 74, .08), transparent 70%); border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
.plmap--tall { aspect-ratio: 16 / 9; min-height: 380px; }
.plmap::before { content: "Lighting the map…"; position: absolute; inset: 0; display: grid; place-items: center; color: rgba(242, 237, 228, .55); font-family: var(--mono, monospace); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; z-index: 0; }
.plmap.is-ready::before { display: none; }
.plmap.is-failed::before { content: "The map wouldn't load. The list below still works."; }
.plmap.leaflet-container, .plmap .leaflet-container { background: #0C1620 !important; font-family: var(--body); }
.plmap .pl-tiles { filter: sepia(.35) hue-rotate(170deg) saturate(.7) brightness(.72) contrast(1.05); }
.plmap .leaflet-control-attribution { background: rgba(12, 22, 32, .7); color: rgba(242, 237, 228, .5); font-size: 10px; }
.plmap .leaflet-control-attribution a { color: rgba(242, 237, 228, .7); }
.pl-tip { background: var(--night); color: var(--cream); border: 1px solid rgba(246, 178, 74, .5); border-radius: 8px; padding: 8px 10px; font-size: 13px; line-height: 1.35; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .8); }
.pl-tip::before { border-top-color: rgba(246, 178, 74, .5) !important; }
.plstats { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 16px 0 0; padding: 0; list-style: none; }
.plstats li { display: flex; align-items: baseline; gap: 8px; font-family: var(--mono, monospace); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(242, 237, 228, .7); }
.plstats b { font-family: var(--poster, var(--display)); font-weight: 400; font-size: 26px; line-height: 1; color: var(--porch); letter-spacing: 0; }
.offer .plstats li { color: #6B6058; }
.offer .plstats b { color: var(--ember); }

/* brightest towns */
.towns { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.towns__row { display: grid; grid-template-columns: 34px minmax(0, 1fr) minmax(110px, 36%); align-items: center; gap: 12px; padding: 12px 14px; background: #FCF7ED; border: 1px solid rgba(26, 20, 16, .12); border-radius: 12px; }
.towns__row.is-lead { background: #FFF3DE; border-color: rgba(217, 105, 46, .45); }
.towns__rank { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--night); color: var(--porch); font-family: var(--poster, var(--display)); font-size: 15px; }
.towns__name { font-family: var(--display); font-size: 17px; line-height: 1.2; color: var(--ink); display: grid; gap: 3px; min-width: 0; }
.towns__name small { font-family: var(--mono, monospace); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #A9762F; }
.towns__bar { height: 10px; border-radius: 999px; background: rgba(26, 20, 16, .1); overflow: hidden; }
.towns__bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--ember), var(--porch)); box-shadow: 0 0 12px rgba(246, 178, 74, .6); transition: width 1.2s var(--ease); }
.towns__empty { padding: 14px 16px; background: #FCF7ED; border: 1px dashed rgba(26, 20, 16, .25); border-radius: 12px; color: #4A3F36; font-size: 15px; }
.dark .towns__row { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .1); }
.dark .towns__row.is-lead { background: rgba(246, 178, 74, .1); border-color: rgba(246, 178, 74, .45); }
.dark .towns__name { color: var(--cream); }
.dark .towns__rank { background: var(--porch); color: #2A1A06; }
.dark .towns__bar { background: rgba(255, 255, 255, .1); }
.dark .towns__empty { color: rgba(242, 237, 228, .75); border-color: rgba(255, 255, 255, .2); background: transparent; }

/* home page block */
.plights { position: relative; padding: clamp(72px, 9vw, 120px) 0; background: radial-gradient(ellipse 60% 50% at 20% 0%, rgba(246, 178, 74, .14), transparent 65%), linear-gradient(180deg, #110D0A, var(--night) 60%, #110D0A); color: var(--cream); box-shadow: inset 0 0 220px rgba(0, 0, 0, .55); }
.plights__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); gap: clamp(28px, 5vw, 64px); align-items: start; }
.plights .section-head { margin-bottom: 22px; }
.plights .section-head h2 { font-family: var(--poster, var(--display)); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; font-size: clamp(36px, 4.6vw, 64px); line-height: 1; }
.plights .section-head p { color: rgba(242, 237, 228, .8); }
.plights__side h3 { font-family: var(--poster, var(--display)); font-weight: 400; text-transform: uppercase; letter-spacing: .02em; font-size: clamp(20px, 2.2vw, 26px); margin: 0 0 4px; color: var(--cream); }
.plights__side > p { margin: 0 0 12px; color: rgba(242, 237, 228, .75); font-size: 15px; line-height: 1.5; }
.plights .fcardform { position: static; margin-top: 22px; background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .1); box-shadow: none; }
.plights__more { display: inline-block; margin-top: 16px; font-family: var(--mono, monospace); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--porch); text-decoration: none; border-bottom: 1px solid rgba(246, 178, 74, .5); padding-bottom: 3px; }

@media (max-width: 900px) {
  .offer__hero .wrap, .offer__body .wrap, .plights__grid { grid-template-columns: 1fr; }
  .offer__art { max-width: 520px; }
  .fcardform { position: static; }
}
@media (max-width: 640px) {
  .offer__hero { padding-top: 84px; }
  .offer__hero h1 { font-size: clamp(34px, 10.5vw, 44px); }
  .fcardform .f2 { grid-template-columns: 1fr; }
  .towns__row { grid-template-columns: 30px minmax(0, 1fr); }
  .towns__bar { grid-column: 2; }
  .plmap { min-height: 260px; aspect-ratio: 4 / 3; border-radius: 12px; }
  .price b { font-size: 30px; }
}

/* home: the three ways to book, under the map */
.bookme { margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid rgba(255, 255, 255, .1); }
.bookme .eyebrow { margin-bottom: 14px; }
.bookme__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.bookme__grid a { display: grid; gap: 6px; padding: 22px 22px 24px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; text-decoration: none; color: var(--cream); transition: transform .3s var(--ease), border-color .3s, background .3s; }
.bookme__grid a:hover { transform: translateY(-3px); border-color: rgba(246, 178, 74, .5); background: rgba(246, 178, 74, .06); }
.bookme__grid b { font-family: var(--poster, var(--display)); font-weight: 400; text-transform: uppercase; letter-spacing: .02em; font-size: 22px; }
.bookme__grid span { font-size: 15px; line-height: 1.5; color: rgba(242, 237, 228, .75); }
.bookme__grid small { font-family: var(--mono, monospace); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--porch); margin-top: 6px; }

.offer__lede strong { color: var(--cream); font-weight: 600; }
.offer__lede + .offer__lede { margin-top: -8px; }
.offer__note a { color: var(--porch); text-decoration: none; border-bottom: 1px solid rgba(246, 178, 74, .5); }
.offer__copy p strong { color: var(--ink); }
.offer__copy .block > p + .gets, .offer__copy .gets + p { margin-top: 14px; }

/* a photo beside a copy block */
.block--photo { display: grid; grid-template-columns: minmax(180px, 260px) 1fr; gap: 24px; align-items: start; }
.offer__photo { margin: 0; transform: rotate(-1.5deg); }
.offer__photo img { display: block; width: 100%; height: auto; border-radius: 10px; border: 6px solid #FCF7ED; box-shadow: 0 18px 36px -22px rgba(26, 20, 16, .7); }
@media (max-width: 640px) { .block--photo { grid-template-columns: 1fr; } .offer__photo { max-width: 260px; } }

/* the song questionnaire */
.fcardform--long { position: static; }
.fcardform .q { gap: 4px; margin-top: 6px; position: relative; padding-left: 34px; }
.fcardform .q .q__n { position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--ember); color: #FFF6E8; font-family: var(--poster, var(--display)); font-size: 13px; }
.fcardform .q b { font-family: var(--display); font-size: 17px; letter-spacing: 0; text-transform: none; color: var(--cream); line-height: 1.25; }
.fcardform .q small { font-family: var(--body); font-size: 13.5px; letter-spacing: 0; text-transform: none; color: rgba(242, 237, 228, .68); line-height: 1.5; margin-bottom: 4px; }
.fcardform .q textarea { min-height: 86px; }
.fcardform > p + p { margin-top: -10px; }
.offer__copy p { margin: 0 0 14px; }
.offer__copy .block > p:last-child { margin-bottom: 0; }

/* upcoming shows */
.gigs { list-style: none; margin: 10px 0 14px; padding: 0; display: grid; gap: 12px; }
.gig { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: start; padding: 14px 16px; background: #FCF7ED; border: 1px solid rgba(26, 20, 16, .12); border-radius: 12px; box-shadow: 0 10px 24px -20px rgba(26, 20, 16, .6); }
.gig__date { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 10px; background: var(--night); color: var(--cream); line-height: 1; }
.gig__date b { font-family: var(--poster, var(--display)); font-weight: 400; font-size: 26px; color: var(--porch); }
.gig__date small { font-family: var(--mono, monospace); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; margin-top: 2px; }
.gig__info { display: grid; gap: 3px; }
.gig__info > b { font-family: var(--display); font-size: 19px; color: var(--ink); }
.gig__info > span { font-size: 15px; color: #4A3F36; }
.gig__info > small { font-size: 14px; color: #6B6058; line-height: 1.45; }
.gig__info a { color: var(--ember); }
.gig--private .gig__date { background: #E9DFCB; color: var(--ink); } .gig--private .gig__date b { color: var(--ember); }
.gig--big { border-color: rgba(217, 105, 46, .45); background: #FFF3DE; }
#shows, #towns, #light { scroll-margin-top: 90px; }