/* SIDE A · Open Crate (on top of mission.css) */
.crate-page .intro .sub{ margin:14px 0 0; max-width:46ch; color:var(--bone-2); }
.crate-page .intro .go{ margin-top:26px; }
.crate-mark{ width:min(64vw,300px); justify-self:end; }
.crate-mark svg{ display:block; width:100%; height:auto; }
.body > p.big.after{ margin-top:26px; }
@media (min-width:700px){ .crate-page .exp{ grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:28px; } }
.body strong{ color:var(--bone); font-weight:600; }

.listen-for{ list-style:none; margin:4px 0 0; padding:0; max-width:52ch; }
.listen-for li{ display:grid; grid-template-columns:22px minmax(0,1fr); padding:12px 0; border-top:1px solid var(--rule); color:var(--bone); font-size:17px; }
.listen-for li:last-child{ border-bottom:1px solid var(--rule); }
.listen-for li::before{ content:"+"; color:var(--oxide); font:500 15px/1.5 var(--f-mono); }

/* The form */
#crate-form{ max-width:720px; margin-top:10px; }
.c-row{ border:0; margin:0; padding:16px 0 14px; border-top:1px solid var(--rule); min-width:0; }
.c-row > label, .c-row > legend{ display:flex; align-items:baseline; gap:10px; color:var(--bone-2); padding:0; margin-bottom:10px; }
.c-row legend{ float:left; width:100%; } .c-row legend + *{ clear:both; }
.cn{ color:var(--bone-3); min-width:24px; }
.req{ color:var(--oxide); }
.opt{ margin-left:auto; color:var(--bone-3); letter-spacing:.1em; }
#crate-form input[type=text], #crate-form input[type=email], #crate-form input[type=url], #crate-form textarea{
  width:100%; display:block; background:transparent; border:0; border-bottom:1px solid #E9E2D640; border-radius:0; padding:8px 0 10px;
  color:var(--bone); font:500 clamp(19px,1.8vw,22px)/1.35 var(--f-label); -webkit-appearance:none; appearance:none;
}
#crate-form textarea{ font:400 17px/1.55 var(--f-label); resize:vertical; min-height:96px; }
#crate-form input::placeholder, #crate-form textarea::placeholder{ color:#E9E2D652; }
#crate-form input:focus, #crate-form textarea:focus{ outline:none; border-bottom-color:var(--oxide); }
.pre-wrap{ display:flex; align-items:baseline; gap:4px; border-bottom:1px solid #E9E2D640; }
.pre-wrap:focus-within{ border-bottom-color:var(--oxide); }
.pre-wrap input{ border-bottom:0 !important; }
.pre{ color:var(--bone-3); font:500 22px/1 var(--f-label); }
.count{ margin:6px 0 0; color:var(--bone-3); text-align:right; }
.err{ margin:8px 0 0; color:#E08770; font:400 italic 15px/1.45 var(--f-liner); }
.is-invalid input, .is-invalid textarea, .is-invalid .pre-wrap{ border-bottom-color:#E08770 !important; }
.hint{ margin:8px 0 0; color:var(--bone-3); font:400 italic 14.5px/1.45 var(--f-liner); }

.records .rec{ display:grid; grid-template-columns:34px minmax(0,1fr); align-items:baseline; }
.records .rn{ color:var(--oxide); }
.records .rec + .err{ margin-left:34px; }
.why-l{ display:flex; align-items:baseline; gap:10px; margin:18px 0 4px; color:var(--bone-3); }

.seg{ display:inline-flex; border:1px solid #E9E2D659; margin:2px 0 14px; }
.seg label{ position:relative; cursor:pointer; }
.seg input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.seg span{ display:inline-flex; align-items:center; min-height:44px; padding:0 16px; font:400 12px/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--bone-2); }
.seg input:checked + span{ background:var(--bone); color:var(--lacquer); }
.seg input:focus-visible + span{ outline:2px solid var(--oxide); outline-offset:2px; }

.drop{ position:relative; border:1.5px dashed #E9E2D659; transition:border-color .2s, background .2s; }
.drop.over{ border-color:var(--oxide); background:#B7422F14; }
.drop.has{ border-style:solid; border-color:var(--bone); }
.drop input{ position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }
.drop input:focus-visible + .drop-l{ outline:2px solid var(--oxide); outline-offset:4px; }
.drop-l{ display:grid; gap:8px; padding:30px 22px; text-align:center; pointer-events:none; }
.drop-t{ font:700 clamp(17px,1.6vw,20px)/1.3 var(--f-label); color:var(--bone); word-break:break-word; }
.drop-s{ color:var(--bone-3); }
.drop.has .drop-t::before{ content:"♪ "; color:var(--oxide); }

.check{ position:relative; display:grid; grid-template-columns:30px minmax(0,1fr); gap:6px 12px; align-items:start; padding:18px 0 6px; border-top:1px solid var(--rule); cursor:pointer; }
.check input{ position:absolute; opacity:0; width:30px; height:30px; margin:0; cursor:pointer; }
.check .box{ width:24px; height:24px; border:1.5px solid #E9E2D680; margin-top:1px; display:grid; place-items:center; }
.check input:checked + .box{ background:var(--oxide); border-color:var(--oxide); }
.check input:checked + .box::after{ content:""; width:10px; height:10px; border-radius:50%; background:var(--lacquer); }
.check input:focus-visible + .box{ outline:2px solid var(--oxide); outline-offset:3px; }
.check-s{ color:var(--bone); font-size:15.5px; line-height:1.5; }
.check .err{ grid-column:2; }

.ts{ margin-top:16px; min-height:0; }
.form-err{ margin:16px 0 0; padding:14px 16px; border-left:3px solid var(--oxide); background:#B7422F1F; color:var(--bone); font-size:15px; }
.form-err strong{ display:block; font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:13px; margin-bottom:4px; }
.form-err .err-code{ display:block; margin-top:6px; font:400 11px/1.4 var(--f-mono); color:var(--bone-3); }

.submit{ display:flex; justify-content:space-between; align-items:center; width:100%; min-height:62px; margin-top:22px; padding:0 22px; border:0; border-radius:0; cursor:pointer;
  background:var(--oxide); color:var(--bone); font:500 13.5px/1 var(--f-mono); letter-spacing:.2em; text-transform:uppercase; transition:background .25s; }
.submit:hover{ background:var(--bone); color:var(--lacquer); }
.submit[disabled]{ opacity:.55; cursor:progress; }
.submit .arr{ font:400 20px/1 var(--f-label); letter-spacing:0; }
.progress{ margin-top:16px; }
.progress .bar{ height:4px; background:#E9E2D626; overflow:hidden; }
.progress .bar i{ display:block; height:100%; width:0; background:var(--oxide); transition:width .3s; }
.progress .mono{ margin:10px 0 0; color:var(--bone-2); }
.progress .keep{ margin:4px 0 0; color:var(--bone-3); font:400 italic 14px/1.4 var(--f-liner); }
.legal{ margin:16px 0 0; color:var(--bone-3); font-size:13.5px; }
.legal a{ color:var(--bone-2); }

.done{ max-width:620px; padding-top:6px; }
.done .kicker{ color:var(--oxide); }
.done-h{ margin:12px 0 18px; font:900 clamp(48px,8vw,110px)/.86 var(--f-label); text-transform:uppercase; letter-spacing:-.045em; }
.done p:not(.kicker){ color:var(--bone-2); }
.done p.big{ font:400 italic clamp(19px,1.8vw,24px)/1.45 var(--f-liner); color:var(--bone); }
.done .go{ margin-top:20px; }

.track.bone a{ color:var(--lacquer); }

@media (max-width:699px){
  .mast .navlink:not([aria-current]){ display:none; }
}
@media (min-width:1000px){
  .crate-mark{ width:min(30vw,420px); justify-self:center; }
}

/* Review page (private) */
.rv{ padding-inline:var(--gutter); padding-block:36px 80px; }
.rv h1{ margin:10px 0 24px; font:900 clamp(48px,8vw,110px)/.86 var(--f-label); text-transform:uppercase; letter-spacing:-.045em; }
.rv-gate{ max-width:520px; }
.rv-gate label{ display:block; color:var(--bone-2); margin-bottom:8px; }
.rv-gate input{ width:100%; background:transparent; border:0; border-bottom:1px solid #E9E2D640; color:var(--bone); font:500 20px/1.4 var(--f-label); padding:8px 0; }
.rv-gate input:focus{ outline:none; border-bottom-color:var(--oxide); }
.rv-top{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px 28px; margin-bottom:10px; }
.rv-top h1{ margin:0; }
.rv-filter{ display:flex; border:1px solid #E9E2D659; }
.rv-filter button{ min-height:40px; padding:0 14px; background:none; border:0; color:var(--bone-2); font:inherit; letter-spacing:.14em; text-transform:uppercase; cursor:pointer; }
.rv-filter button[aria-pressed="true"]{ background:var(--bone); color:var(--lacquer); }
.rv-count{ color:var(--bone-3); margin:0; }
.rv-items{ list-style:none; margin:20px 0 0; padding:0; display:grid; gap:0; }
.rv-item{ padding:26px 0 22px; border-top:1px solid var(--rule); display:grid; gap:10px; max-width:860px; }
.rv-item.st-declined{ opacity:.5; }
.rv-meta{ margin:0; color:var(--oxide); }
.rv-name{ margin:2px 0 0; font:800 clamp(26px,3vw,40px)/1 var(--f-label); text-transform:uppercase; letter-spacing:-.02em; }
.rv-who{ margin:6px 0 0; color:var(--bone-3); font-size:14.5px; }
.rv-who a{ color:var(--bone-2); }
.rv-bio{ margin:4px 0 0; color:var(--bone); white-space:pre-wrap; max-width:66ch; }
.rv-recs{ list-style:none; margin:4px 0 0; padding:0; }
.rv-recs li{ padding:6px 0; border-top:1px solid #E9E2D614; }
.rv-recs .mono{ color:var(--oxide); margin-right:8px; }
.rv-why{ margin:0; color:var(--bone-2); font:400 italic 15.5px/1.5 var(--f-liner); }
.rv-set audio{ width:100%; max-width:640px; margin-top:6px; }
.rv-file{ margin:6px 0 0; color:var(--bone-3); }
.rv-link{ color:var(--bone); word-break:break-all; }
.rv-act{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.rv-act button{ min-height:38px; padding:0 12px; background:none; border:1px solid #E9E2D659; color:var(--bone-2); font:inherit; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; }
.rv-act button:hover{ border-color:var(--bone); color:var(--bone); }
.rv-act .rv-del{ margin-left:auto; border-color:#B7422F88; color:#E08770; }
.rv-empty{ color:var(--bone-3); padding:20px 0; }
.review .mast{ position:static; }

/* At a glance: four facts, the way a flyer would list them */
.facts{ list-style:none; display:flex; flex-wrap:wrap; gap:0; margin:22px 0 0; padding:0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); max-width:560px; }
.facts li{ padding:10px 22px 10px 0; color:var(--bone); position:relative; }
.facts li + li{ padding-left:14px; }
.facts li + li::before{ content:""; position:absolute; left:0; top:50%; width:5px; height:5px; margin-top:-2.5px; border-radius:50%; background:var(--oxide); }
/* Steps: the number does the talking */
.crate-page .exp .c-n{ font:900 clamp(40px,4vw,56px)/1 var(--f-label); letter-spacing:-.03em; color:var(--oxide); margin-bottom:12px; }
/* A tip from the booth */
.tip{ margin:24px 0 0 !important; padding:14px 18px; border-left:3px solid var(--oxide); background:#E9E2D60A; max-width:52ch; color:var(--bone) !important; font:400 italic 17px/1.5 var(--f-liner); }
.tip .mono{ display:block; font-style:normal; color:var(--oxide); margin-bottom:4px; }
.follow-l{ margin-top:18px !important; }
.follow-l a{ color:var(--bone); text-decoration:none; border-bottom:1px solid var(--oxide); }
.listen-for li .ld{ grid-column:2; display:block; margin-top:6px; color:var(--bone-2); font:400 italic 15.5px/1.5 var(--f-liner); }