/* edit.html: the Edit door. path.css carries the hero, rail and bands; this adds the image-editor band
   (toolbar shot, counts, the menu wall, the Stack and the Operators), solo bands and four doors in a row. */

/* the image editor band */
.ed-vp{border-top:1px solid var(--line)}
.ed-vp .h2 br{display:inline}
.ed-tool{margin:0}
.ed-tool img{display:block;height:auto;aspect-ratio:1600/572;object-fit:cover;object-position:left top}
.ed-tool figcaption{position:static;max-width:none;width:auto;background:none;color:var(--mute);padding:12px 2px 0;border-radius:0}
.ed-vp .ed-tool{border:0;background:none;border-radius:0}
.ed-vp .ed-tool img{border:1px solid var(--line-2);border-radius:5px}

.ed-count{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:40px}
.ed-count div{display:flex;gap:16px;align-items:baseline;padding:18px 20px;border:1px solid var(--line);border-radius:6px;background:var(--ink-2)}
.ed-count b{font-family:var(--display);font-weight:600;font-size:clamp(40px,4.4vw,64px);line-height:.9;letter-spacing:-.05em;color:var(--edit)}
.ed-count span{color:var(--mute);font-size:15px;line-height:1.4}

.ed-menus{columns:3 300px;column-gap:12px;margin-top:12px}
.ed-m{break-inside:avoid;margin-bottom:12px;padding:18px 20px 20px;border:1px solid var(--line);border-radius:6px;background:var(--ink-2)}
.ed-m h3{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:22px;letter-spacing:-.025em;margin-bottom:10px}
.ed-m h3 span{font-family:var(--mono);font-size:12px;font-weight:400;color:var(--edit);border:1px solid color-mix(in srgb,var(--edit) 45%,transparent);border-radius:3px;padding:2px 7px}
.ed-m h3 small{font-family:var(--mono);font-size:11.5px;font-weight:400;color:var(--dim);letter-spacing:0}
.ed-m p{font-size:14.5px;line-height:1.6;color:var(--fg)}
.ed-m p span{white-space:nowrap}
.ed-m p span:not(:last-child)::after{content:"\00a0· ";color:var(--dim);white-space:normal}
.ed-x{background:transparent;border-style:dashed}
.ed-x p{color:var(--mute)}
.ed-x p span{white-space:normal}

.ed-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,44px);margin-top:44px;align-items:start}
.ed-col{min-width:0;display:flex;flex-direction:column;gap:16px}
.ed-col h3{font-size:clamp(26px,2.4vw,34px);letter-spacing:-.035em;line-height:1.05;margin-top:6px}
.ed-fig{aspect-ratio:16/8.6}
.ed-fig img{object-position:left top}
.ed-ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.ed-ul li{position:relative;padding-left:18px;color:var(--mute);font-size:16px;line-height:1.45}
.ed-ul li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--edit)}
.ed-ops{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ed-ops li{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border:1px solid var(--line);border-radius:5px;background:var(--ink-2)}
.ed-ops b{font-weight:600;font-size:16px}
.ed-ops span{color:var(--mute);font-size:14px;line-height:1.4}

.ed-src{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:40px;padding-top:24px;border-top:1px solid var(--line)}
.ed-src > span{color:var(--dim);font-size:12px}
.ed-src p{color:var(--mute);font-size:15px;flex:1 1 320px}

/* bands */
.media.ed-solo{padding-bottom:0}
.media .vtl + .inset{bottom:-4%}
.ed-vcap{margin-top:10px;max-width:54%}
.ed-sound{font-size:15px;color:var(--mute);border-left:2px solid var(--play);padding-left:12px;max-width:520px}
.ed-sound a{color:var(--fg);white-space:nowrap;border-bottom:1px solid var(--line-2)}
.ed-sound a:hover{border-color:var(--play)}
.ed-sound a span{color:var(--play);font-family:var(--mono)}

/* four doors in a row */
.others.ed-four{grid-template-columns:repeat(4,minmax(0,1fr))}

@media (max-width:1080px){
  .ed-two{grid-template-columns:1fr}
  .ed-count{grid-template-columns:1fr}
  .others.ed-four{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .ed-vp .h2 br{display:none}
  .ed-ops{grid-template-columns:1fr}
  .ed-count div{padding:14px 16px}
  .ed-m{padding:16px}
  .ed-m p{font-size:14px}
  .others.ed-four{grid-template-columns:1fr}
  .ed-fig{aspect-ratio:16/10}
  .ed-vp .ed-tool img{aspect-ratio:16/10}
  .ed-vcap{max-width:48%}
}

/* a band whose pictures stack instead of overlapping, captions underneath */
.media.ed-pair{display:grid;gap:18px}
.ed-pf{margin:0}
.ed-pf .cap{margin-top:8px}
@media (max-width:760px){
  .media .inset figcaption{font-size:10px;padding:4px 6px;left:6px;right:6px;bottom:6px;max-width:calc(100% - 12px)}
}