/* /recognition/ (lane nyd-recognition-1022): the Best of New York seal page. On the kit's tokens (site.css :root), buttons (.btn, .btn.taxi,
   .tl), bands (.band, .band.panel, .bh, .lead) and inputs; square corners everywhere except the seal itself, which is a circle. */
.rec{--rec-err:#8a2424}
.rec [hidden]{display:none!important}
/* the old Audrey theme's p (20px, line-height 2) reaches this page; the kit's reading size and leading, stated */
.rec-two>div>p,.rec-qs details p,.rec li{font-size:var(--t3);line-height:1.65}
.rec :is(a,button,summary,input,select,textarea,[tabindex]):focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.rec .btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;transition:background-color .12s,color .12s}
.rec .btn:hover{background:#3a3a3a}.rec .btn.taxi:hover{background:var(--ink);color:#fff}
.rec .tl{display:inline-flex;align-items:center;min-height:44px;padding:0 0 3px;border-bottom-width:2px}.rec .tl:hover{border-bottom-color:var(--taxi)}
.rec .lead{max-width:40em}

/* the room: the words on the left, the seal as large as the page allows on the right */
.rec-hero{border-bottom:2px solid var(--ink);padding:72px 0 64px;overflow:hidden}
.rec-hero-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px 72px;align-items:center}
.rec-hero h1{font-size:clamp(44px,6.2vw,84px);letter-spacing:-.035em;line-height:.98;max-width:11.5em;text-wrap:balance;margin:6px 0 0}
.rec-hero .eyebrow{color:var(--ink2)}
.rec-dek{font:400 var(--t5)/1.4 var(--body);color:var(--ink2);margin:22px 0 0;max-width:30em}
.rec-intro{font:400 var(--t4)/1.65 var(--body);margin:18px 0 0;max-width:36em}
.rec-doors{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin:32px 0 0}
.rec-hero-seal{margin:0;width:min(360px,34vw)}.rec-hero-seal img{width:100%;height:auto}

.rec-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 72px;align-items:start}
.rec-two h2{font-size:var(--t6)}.rec-two>div>p{margin:14px 0 0;max-width:36em}
.rec-links{display:flex;flex-wrap:wrap;gap:12px 24px;margin:20px 0 0}
.rec-h3{font-size:var(--t5);margin:34px 0 0}
.rec .rec-fine{font:400 var(--t2)/1.55 var(--body);color:var(--ink2);margin:10px 0 0;max-width:40em}
.rec .rec-small{font:400 var(--t2)/1.6 var(--body);color:var(--ink2);margin:36px 0 0;max-width:46em;border-top:1px solid var(--line);padding-top:18px}

/* the finder */
.rec-finder{margin:26px 0 0;max-width:760px}
.rec-label{display:block;font:600 var(--t1)/1.3 var(--caps);letter-spacing:.06em;color:var(--ink);margin:18px 0 6px}.rec-label span{font-weight:400;color:var(--ink2);letter-spacing:0}
.rec-finder .rec-label{margin-top:0}
.rec-q input{height:60px;font:400 var(--t5)/1.2 var(--body);padding:0 16px}
.rec-count{font:500 var(--t1)/1.4 var(--caps);letter-spacing:.06em;color:var(--ink2);margin:10px 0 0;min-height:1.4em}
.rec-results{list-style:none;margin:6px 0 0;padding:0;border-top:2px solid var(--ink)}
.rec-results:empty{border-top:0}
.rec-results li{margin:0}
.rec-results button{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;width:100%;text-align:left;background:var(--paper);border:0;border-bottom:1px solid var(--line);padding:12px 14px;cursor:pointer;min-height:56px}
.rec-results button:hover,.rec-results button[aria-selected="true"]{background:var(--taxi)}
.rec-results b{font:600 var(--t4)/1.2 var(--disp);letter-spacing:-.01em}
.rec-results span{font:400 var(--t2)/1.4 var(--body);color:var(--ink2)}.rec-results em{grid-row:1/3;grid-column:2;align-self:center;font:600 var(--t0)/1 var(--caps);letter-spacing:.08em;text-transform:uppercase;font-style:normal;color:var(--ink)}
.rec-more{display:flex;gap:24px;margin:12px 0 0}
.rec-none{background:var(--paper);border:2px solid var(--ink);padding:16px 18px;margin:12px 0 0;max-width:760px}.rec-none p{margin:0}.rec-none p+p{margin-top:8px;color:var(--ink2);font-size:var(--t2)}

/* the place, picked */
.rec-pick{background:var(--paper);border:2px solid var(--ink);padding:26px 28px;margin:26px 0 0;display:grid;grid-template-columns:120px minmax(0,1fr);gap:24px 28px;max-width:1000px}
.rec-pick:focus{outline:none}
.rec-pick img{width:120px;height:120px}
.rec-pick h3{font-size:var(--t6)}
.rec-pick .rec-meta{font:400 var(--t2)/1.5 var(--body);color:var(--ink2);margin:6px 0 0}
.rec-pick ol{margin:14px 0 0;padding:0 0 0 1.3em}.rec-pick li{margin:6px 0;font:400 var(--t3)/1.5 var(--body)}.rec-pick li a{text-decoration-thickness:2px;text-decoration-color:var(--taxi);text-underline-offset:3px}.rec-pick li a:hover{text-decoration-color:var(--ink)}
.rec-pick .rec-doors{margin:20px 0 0}
.rec-pick-checking{color:var(--ink2)}

/* the seal's files */
.rec-dl{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 0}
.rec-code{margin:14px 0 0;border:2px solid var(--ink);background:var(--paper)}
.rec-code pre{margin:0;padding:16px;overflow-x:auto;font:400 13px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;word-break:break-all;max-height:220px}
.rec-code .btn{width:100%}
.rec-rules{margin:10px 0 0;padding:0 0 0 1.2em}.rec-rules li{margin:6px 0;max-width:36em}
.rec-preview{margin:0;justify-self:center;text-align:center}
.rec-pv{display:grid;place-items:center;width:min(420px,100%);aspect-ratio:1;background:var(--panel);border:1px solid var(--line)}
.rec-pv img{width:240px;height:240px}
.rec-preview figcaption,.rec-fig figcaption{font:400 var(--t2)/1.5 var(--body);color:var(--ink2);margin:10px 0 0}

/* the decal */
.rec-state{border-left:4px solid var(--taxi);padding:4px 0 4px 14px;margin:18px 0 0;font-weight:700}
.rec-steps{margin:10px 0 0;padding:0 0 0 1.3em}.rec-steps li{margin:8px 0;max-width:34em}
.rec-fig{margin:0}.rec-door{width:100%;max-width:460px;height:auto;display:block;background:var(--paper)}

/* the form */
.rec-form{max-width:760px;margin:20px 0 0}
.rec-fs{border:0;border-top:2px solid var(--ink);margin:30px 0 0;padding:6px 0 0;min-width:0}
.rec-fs legend{font:600 var(--t5)/1.2 var(--disp);letter-spacing:-.01em;padding:14px 0 0;float:left;width:100%}
.rec-fs legend+*{clear:both}
.rec-form select{font:400 var(--t3)/1.4 var(--body);color:var(--ink);background:var(--paper);border:2px solid var(--ink);padding:12px 14px;width:100%;border-radius:0;min-height:52px;cursor:pointer}
.rec-chosen{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;background:var(--paper);border:2px solid var(--ink);padding:12px 14px;margin:12px 0 0;font:600 var(--t4)/1.3 var(--disp)}
.rec-chosen span{font:400 var(--t2)/1.4 var(--body);color:var(--ink2)}
.rec-radios{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:18px 0 0}
.rec-radios label,.rec-check{display:flex;align-items:center;gap:12px;min-height:52px;padding:10px 14px;background:var(--paper);border:2px solid var(--ink);cursor:pointer;font:400 var(--t3)/1.35 var(--body)}
.rec-radios label:hover,.rec-check:hover{background:var(--taxi)}
.rec-radios input,.rec-check input{width:20px;height:20px;flex:none;margin:0;accent-color:var(--ink);-webkit-appearance:auto;appearance:auto;padding:0;border:0}
.rec-check{margin:22px 0 0;align-items:flex-start}
.rec-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}.rec-grid.three{grid-template-columns:2fr 1fr 1.4fr}
.rec-qty{max-width:120px}
.rec-err{color:var(--rec-err);font:600 var(--t1)/1.4 var(--caps);letter-spacing:.02em;margin:6px 0 0;min-height:0}.rec-err:empty{display:none}
.rec-form [aria-invalid="true"]{border-color:var(--rec-err);box-shadow:inset 0 0 0 1px var(--rec-err)}
.rec-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.rec-send{margin:28px 0 0}.rec-send .btn{min-width:260px}.rec-send .btn[disabled]{opacity:.6;cursor:wait}
.rec-status{font:400 var(--t4)/1.5 var(--body);margin:16px 0 0}.rec-status.ok{border:2px solid var(--ink);background:var(--paper);padding:16px 18px;font-weight:700}.rec-status.bad{color:var(--rec-err);font-weight:700}

/* the questions */
.rec-qs{margin:10px 0 0;max-width:860px}
.rec-qs details{border-bottom:1px solid var(--line)}
.rec-qs summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:56px;padding:12px 0;font:600 var(--t4)/1.3 var(--disp);letter-spacing:-.01em}
.rec-qs summary::-webkit-details-marker{display:none}
.rec-qs summary:after{content:"+";font:400 26px/1 var(--disp);flex:none;width:28px;text-align:center}
.rec-qs details[open] summary:after{content:"\2212"}
.rec-qs summary:hover{color:var(--ink2)}
.rec-qs details p{margin:0 0 18px;max-width:40em}

@media (max-width:900px){
 .rec-hero{padding:44px 0 40px}
 .rec-hero-in{grid-template-columns:1fr}
 .rec-hero-seal{width:min(240px,62vw);grid-row:1;justify-self:start}
 .rec-two{grid-template-columns:1fr}
 .rec-pick{grid-template-columns:1fr;padding:20px}
 .rec-pick img{width:96px;height:96px}
}
@media (max-width:560px){
 .rec-doors .btn{width:100%}
 .rec-radios,.rec-grid,.rec-grid.three{grid-template-columns:1fr}
 .rec-send .btn{width:100%;min-width:0}
 .rec-results button{grid-template-columns:1fr}.rec-results em{grid-row:auto;grid-column:auto}
}
@media (prefers-reduced-motion:reduce){.rec .btn{transition:none}}