/* site27 (26 Oct): the lead layer. One form look for /start, the search landing pages, the city pages and the 2027 moments
   page, taken from the Work with us form (.fm) so every form on the site reads the same. Posts go through assets/js/lead27.js */

/* the fields, as on /work-with-us */
.fm{display:grid;gap:clamp(24px,3vw,40px)}
.fm[hidden]{display:none}
.fm fieldset{border:0;margin:0;padding:0;min-width:0;display:grid;gap:16px}
.fm legend{padding:0;margin-bottom:16px}
.fm-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.fm-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:760px){.fm-two,.fm-three{grid-template-columns:1fr}}
.fm-f{display:grid;gap:8px;align-content:start;min-width:0}
.fm-f .lab{color:var(--b72)}
.fm-f .req{color:var(--bone)}
.fm-f input,.fm-f select,.fm-f textarea{width:100%;min-height:52px;margin:0;padding:16px;border:1px solid var(--b40);border-radius:0;background:rgb(12 14 15 / .5);
  color:var(--bone);font:400 16px/1.3 var(--t);-webkit-appearance:none;appearance:none;transition:border-color .6s var(--ez),box-shadow .6s var(--ez)}
.fm-f input::placeholder{color:var(--b40)}
.fm-f input:hover,.fm-f select:hover{border-color:var(--b72)}
.fm-f input:focus-visible,.fm-f select:focus-visible{outline:2px solid var(--bone);outline-offset:2px;border-color:var(--bone)}
.fm-f select{padding-right:48px;background-repeat:no-repeat;background-position:right 14px center;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'%3E%3Cpath fill='none' stroke='%23F4F2E8' stroke-opacity='.72' stroke-width='1.6' stroke-linecap='square' d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
.fm-f select:has(option[value=""]:checked){color:var(--b58)}
.fm-f select option{background:var(--off);color:var(--bone)}
.fm-f input:-webkit-autofill{-webkit-box-shadow:0 0 0 100px var(--lift) inset;-webkit-text-fill-color:var(--bone)}
.fm-f [aria-invalid="true"]{border-color:var(--bone);box-shadow:inset 0 0 0 1px var(--bone)}
.fm-f:has([aria-invalid="true"]) .lab::after{content:" · needed";color:var(--bone)}
.fm-hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}
.fm-go{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.fm-go .chip{cursor:pointer}
.fm-status{font:500 12px/1.5 var(--m);letter-spacing:.13em;color:var(--b72);min-height:1.5em;max-width:52ch}
.fm-status.ok{color:var(--bone)}
.fm-note{font-size:14px;color:var(--b58);max-width:60ch}
.fm-note a{color:var(--b88);border-bottom:1px solid var(--b40)}

/* the answers as choices: a radio under each cut corner chip, so the keyboard and screen readers get a real radio group */
.pickset{display:flex;flex-wrap:wrap;gap:8px}
.pickset label{position:relative;display:inline-flex}
.pickset input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.pickset .chip{pointer-events:none}
.pickset input:checked + .chip{color:var(--anti)}
.pickset input:checked + .chip::before{clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%)}
.pickset input:focus-visible + .chip::after{inset:-4px;--t:2px;--c:calc(var(--cut) + 2.34px);background:var(--bone)}
@media (hover:hover){
  .pickset input:hover + .chip{color:var(--anti)}
  .pickset input:hover + .chip::before{clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%)}
}
fieldset[aria-invalid="true"] legend::after{content:" · pick one";color:var(--bone)}
.q-n{font:500 12px/1 var(--m);letter-spacing:.13em;color:var(--b58);margin-right:12px}
.q-h{font-family:var(--d);font-weight:700;font-size:clamp(20px,2vw,32px);letter-spacing:-.03em;line-height:1.1;color:var(--bone);text-transform:none}

/* the short brief on landing pages: the close, then the form on the lift */
.brief{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,6vw,96px);align-items:start;max-width:1480px;margin-inline:auto}
.brief-l{display:grid;gap:24px;justify-items:start}
.brief-l .d2{max-width:14ch}
.brief .fm,.lead-done{border:1px solid var(--b16);padding:clamp(16px,2.4vw,40px);background:var(--lift);gap:24px}
.surface--lift .brief .fm,.surface--lift .lead-done{background:var(--off)}
@media (max-width:960px){.brief{grid-template-columns:1fr}}

/* the thank you state that replaces a sent form */
.lead-done{display:grid;gap:16px;align-content:start}
.lead-done[hidden]{display:none}
.lead-done:focus{outline:0}
.lead-done .d3{max-width:20ch}
.lead-done .row{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}

/* /start: the questions on the left, the work on the right on wide screens */
.start{padding:calc(var(--hdr) + clamp(40px,6vw,88px)) var(--pad) clamp(72px,9vw,128px)}
.start-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(40px,6vw,96px);max-width:1480px;margin-inline:auto;align-items:start}
.start-h{display:grid;gap:16px;margin-bottom:clamp(32px,4vw,56px)}
.start-h .d1{max-width:12ch;font-size:clamp(40px,5.4vw,88px)}
.start .fm{gap:clamp(32px,4vw,48px)}
.start .fm fieldset{border-top:1px solid var(--b16);padding-top:24px}
.start-side{display:grid;gap:16px;position:sticky;top:calc(var(--hdr) + 24px)}
.start-side figure{margin:0;display:grid;gap:8px}
.start-side img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--lift)}
.start-side ol{display:grid;gap:12px;list-style:none;margin:8px 0 0;padding:0}
.start-side li{display:grid;grid-template-columns:28px 1fr;gap:8px;color:var(--b72);font-size:16px;line-height:1.45}
.start-side li b{font:500 12px/1.9 var(--m);color:var(--b58)}
@media (max-width:960px){.start-in{grid-template-columns:1fr}.start-side{position:static}.start-side figure{display:none}}
.start-done{margin-top:8px}
.start-done .pick{margin-top:8px}

/* moments strip on the city pages */
.mstrip{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:clamp(8px,1.2vw,24px);max-width:1480px;margin:clamp(24px,4vw,48px) auto 0}
.mstrip a{display:grid;gap:8px;align-content:start;padding:clamp(16px,2vw,32px);border:1px solid var(--b16);color:inherit;text-decoration:none;transition:border-color .6s var(--ez)}
.mstrip a:hover{border-color:var(--b72)}
.mstrip b{font-family:var(--d);font-weight:700;font-size:clamp(24px,2.6vw,40px);letter-spacing:-.035em;line-height:1}
.mstrip h3{font-size:clamp(20px,1.8vw,24px);letter-spacing:-.025em}
.mstrip p{color:var(--b72);font-size:16px;line-height:1.5}
@media (max-width:760px){.mstrip{grid-template-columns:1fr}}

/* /moments-2027: the year as a ledger, month by month */
.mo-hero{padding:calc(var(--hdr) + clamp(48px,8vw,120px)) var(--pad) clamp(40px,6vw,88px);max-width:calc(1480px + 2 * var(--pad));margin-inline:auto}
.mo-hero .d1{max-width:11ch}
.mo-hero .lede{margin-top:24px}
.mo-hero .row{margin-top:32px}
.mo-filters{display:flex;flex-wrap:wrap;gap:8px;max-width:1480px;margin:0 auto clamp(24px,3vw,40px)}
.mo-month{max-width:1480px;margin-inline:auto}
.mo-month + .mo-month{margin-top:clamp(40px,5vw,72px)}
.mo-month[hidden]{display:none}
.mo-month > h2{font:500 12px/1.4 var(--m);letter-spacing:.13em;text-transform:uppercase;color:var(--b58);padding-bottom:12px;border-bottom:1px solid var(--bone)}
.mo-list{list-style:none;margin:0;padding:0}
.mo{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,6fr) minmax(0,3fr);gap:clamp(16px,3vw,48px);padding:clamp(24px,3vw,40px) 0;border-bottom:1px solid var(--b16);scroll-margin-top:calc(var(--hdr) + 24px)}
.mo[hidden]{display:none}
.mo-when{display:grid;gap:8px;align-content:start}
.mo-when b{font-family:var(--d);font-weight:700;font-size:clamp(24px,2.2vw,36px);letter-spacing:-.035em;line-height:1}
.mo-what{display:grid;gap:12px;align-content:start}
.mo-what h3{font-size:clamp(24px,2.4vw,40px);letter-spacing:-.035em;line-height:1.05;max-width:22ch}
.mo-what p{color:var(--b72);max-width:58ch}
.mo-what .mo-play{color:var(--b88)}
.mo-meta{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:baseline}
.mo-meta .src a{color:var(--b72);border-bottom:1px solid var(--b40)}
.mo-work{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:start;color:inherit;text-decoration:none}
.mo-work img{width:96px;aspect-ratio:4/5;object-fit:cover;background:var(--lift);transition:opacity .6s var(--ez)}
.mo-work:hover img{opacity:.82}
.mo-work span{display:grid;gap:6px}
.mo-work .t{font-family:var(--d);font-weight:700;font-size:16px;line-height:1.2;letter-spacing:-.02em}
.mo-new{color:var(--b58);font-size:14px;line-height:1.5}
@media (max-width:960px){.mo{grid-template-columns:minmax(0,2fr) minmax(0,5fr)}.mo-work,.mo-new{grid-column:2}}
@media (max-width:600px){.mo{grid-template-columns:1fr}.mo-work,.mo-new{grid-column:auto}.mo-when{grid-template-columns:auto 1fr;align-items:baseline;gap:16px}}
.mo-foot{max-width:1480px;margin:clamp(24px,3vw,40px) auto 0;color:var(--b58);font-size:14px}

/* landing heroes carry type on the picture: the lede stays a short measure, clear of faces on the right */
.land-hero .lede{max-width:44ch}