/* /software/command/ page layout. Shared system in pylon.css, mockup kit in pylon-mockups.css. */
/* The prototype's dead .seat .shot rules (a prior screenshot-based seats design) are not ported. */
body{--acc:var(--indigo);--acc-txt:var(--indigo-txt)}
/* statement band */
/* the loop */
.loop-h{grid-column:1/6}
.loop-b{grid-column:7/13;align-self:end}
@media(max-width:1024px){.loop-h,.loop-b{grid-column:1/-1}.loop-b{margin-top:2rem}}
.loop{margin-top:clamp(3rem,5vw,4.5rem);align-items:start}
.loop-l{grid-column:1/5;border-top:1px solid var(--rule)}
.loop-v{grid-column:5/13;position:relative;border-top:1px solid var(--rule);border-left:1px solid var(--rule-2);margin-right:calc(-1 * (var(--px) + max(0px,(var(--vw,100vw) - var(--max)) / 2)))}
@media(max-width:1024px){.loop-l{grid-column:1/-1}.loop-v{grid-column:1/-1;border-left:0;margin-right:calc(var(--px) * -1);margin-left:calc(var(--px) * -1);margin-top:2rem}}
.step{display:grid;grid-template-columns:2.25rem minmax(0,1fr);align-items:baseline;gap:var(--gut);width:100%;padding:1.0625rem 0 1.0625rem .9375rem;border-bottom:1px solid var(--rule-2);text-align:left;position:relative;transition:background .35s var(--e)}
.step::before{content:'';position:absolute;left:-.875rem;top:-1px;bottom:-1px;width:2px;background:var(--acc);transform:scaleY(0);transition:transform .4s var(--e)}
.step:hover{background:linear-gradient(90deg,rgba(255,255,255,.03),transparent 60%)}
.step .no{font-family:var(--mono);font-size:.625rem;letter-spacing:.2em;color:var(--t4);transition:color .3s}
.step .nm{font-size:1.0625rem;font-weight:500;letter-spacing:-.025em;color:var(--t3);transition:color .3s}
.step .de{display:block;margin-top:.4375rem;font-size:.875rem;line-height:1.55;color:var(--t4);max-width:38ch;max-height:0;opacity:0;overflow:hidden;transition:max-height .45s var(--e),opacity .3s,margin .45s var(--e)}
.step[aria-selected="true"]::before{transform:scaleY(1)}
.step[aria-selected="true"] .no{color:var(--acc-txt)}
.step[aria-selected="true"] .nm{color:var(--t1)}
.step[aria-selected="true"] .de{max-height:7rem;opacity:1}
.loop-v{container-type:inline-size;background:#0c0c0f}
.loop-v .pane{position:absolute;inset:0;opacity:0;transition:opacity .5s var(--e);pointer-events:none}
.loop-v .pane[data-on]{opacity:1}
.loop-v .ar{position:relative;padding-top:62%}

.loop-f{display:flex;align-items:center;gap:.875rem;flex-wrap:wrap;margin-top:1.5rem;color:var(--t4)}
.loop-f .rule{flex:1;min-width:2rem;height:1px;background:var(--rule-2)}
/* seats */
.seats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut);margin-top:clamp(3rem,5vw,4.5rem);border-top:1px solid var(--rule)}
@media(max-width:900px){.seats{grid-template-columns:1fr}}
.seat{display:flex;flex-direction:column;padding-top:1.5rem;border-top:1px solid transparent;margin-top:-1px;transition:border-color .4s var(--e)}
.seat:hover{border-top-color:var(--acc)}
.seat:hover .shot img{transform:scale(1.02);filter:none}
.seat .lbl{color:var(--t4);margin-bottom:.875rem}
.seat h3{font-size:1.25rem;font-weight:500;letter-spacing:-.03em;color:var(--t1);margin-bottom:.625rem}
.seat p{font-size:.875rem;line-height:1.6;color:var(--t3);margin-bottom:1.5rem}
.seat .lnk{align-self:flex-start;margin-top:auto}
.seat .none-note{align-self:flex-start;margin-top:auto;font-family:var(--mono);font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--t4);padding-bottom:.375rem;border-bottom:1px solid var(--rule-2)}