/* Tour-page chrome: the card grid and the lightbox. Shared by every product
   tour — deliver/tour.html and operations/tour.html — and inlined into the
   offline previews their generators emit.

   Extracted 2026-08-23 (tobren.io#4). It had been a constant in build-tour.py
   that build-ops-tour.py was forced to duplicate: build-tour.py writes its
   output at module level, so importing it to share the constant would have
   regenerated Deliver's live tour page as a side effect of building the
   Operations one. A file both generators read has neither problem. */

.tour-hero .sub{max-width:700px}
.tour-note{font-size:12.5px;color:rgba(244,247,251,.55);margin-top:22px;letter-spacing:.01em}
.tour-sec{padding:64px 0 8px}
.tour-sec + .tour-sec{padding-top:26px}
.tour-sec h2{font-size:clamp(25px,3.4vw,33px);color:var(--night)}
.tour-sec .lede{color:var(--steel);font-size:16px;margin-top:8px;max-width:620px}
.tour-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:32px;align-items:start}
@media(max-width:820px){.tour-grid{grid-template-columns:1fr}}
.tour-card{display:block;width:100%;text-align:left;background:var(--surface);border:1px solid var(--hairline);
 border-radius:12px;overflow:hidden;cursor:pointer;font:inherit;color:inherit;
 transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.tour-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(27,42,74,.13);border-color:#cfdae8}
.tour-shot{position:relative;background:var(--night-deep);overflow:hidden;display:block;border-bottom:1px solid var(--hairline)}
.tour-shot img{width:100%;height:auto;display:block}
.tour-shot::after{content:"View full size";position:absolute;right:12px;bottom:12px;background:var(--orange);
 color:var(--night);font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
 padding:6px 11px;border-radius:6px;opacity:0;transform:translateY(5px);transition:opacity .18s,transform .18s}
.tour-card:hover .tour-shot::after,.tour-card:focus-visible .tour-shot::after{opacity:1;transform:none}
.tour-body{padding:20px 22px 22px;display:block}
.tour-body .tt{display:block;font-family:"Spectral",Georgia,serif;font-weight:600;letter-spacing:-.01em;
 font-size:20px;color:var(--night);line-height:1.3}
.tour-body .ss{display:block;font-size:14.5px;color:var(--steel);margin-top:7px;line-height:1.6}

/* placeholder shown for a screen whose capture has not landed yet */
.tour-ph{display:flex;align-items:center;justify-content:center;min-height:230px;background:var(--night-deep);
 color:rgba(244,247,251,.5);font:600 12px/1.5 Montserrat,sans-serif;letter-spacing:.1em;text-transform:uppercase;
 text-align:center;padding:20px}

/* ---- lightbox ---- */
.lb[hidden]{display:none}
.lb{position:fixed;inset:0;z-index:120;background:rgba(15,26,46,.93);backdrop-filter:blur(6px);
 display:flex;align-items:center;justify-content:center;padding:28px}
.lb-panel{background:var(--surface);border-radius:14px;max-width:1180px;width:100%;max-height:100%;
 display:flex;flex-direction:column;overflow:hidden}
.lb-img{background:var(--night-deep);flex:none;max-height:56vh;overflow:auto}
.lb-img img{width:100%;display:block}
.lb-txt{padding:24px 30px 28px;overflow:auto}
.lb-txt .eyebrow{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--orange)}
.lb-txt h3{font-size:clamp(21px,3vw,28px);color:var(--night);margin-top:9px;line-height:1.22}
.lb-txt p{font-size:15px;color:var(--ink);margin-top:13px;line-height:1.72;max-width:78ch}
.lb-txt p em{color:var(--steel)}
.lb-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;
 padding:13px 18px;border-bottom:1px solid var(--hairline);background:var(--glacial)}
.lb-count{font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--steel)}
.lb-btns{display:flex;gap:8px}
.lb-btns button{background:var(--surface);border:1px solid var(--hairline);border-radius:7px;
 padding:7px 13px;font:600 13px/1 Montserrat,sans-serif;color:var(--night);cursor:pointer;transition:background .15s}
.lb-btns button:hover:not(:disabled){background:var(--night);color:#fff;border-color:var(--night)}
.lb-btns button:disabled{opacity:.35;cursor:default}
.lb-close{background:var(--orange)!important;color:var(--night)!important;border-color:var(--orange)!important;font-weight:700!important}
.lb-close:hover{background:var(--orange-deep)!important;color:var(--night)!important;border-color:var(--orange-deep)!important}
@media(max-width:700px){.lb{padding:0}.lb-panel{border-radius:0;max-height:100vh}.lb-img{max-height:40vh}.lb-txt{padding:20px}}