/* ==== Digital Go-Bag home block (site v9.2; owner Oct 25, 2026, layout option a) ====
   A quiet block below the two closing buttons (.actions): a hairline divider, a short heading in the display face, one
   disclosure line and a text link with an arrow (no third button).
   v9.2 (owner, on 62b30dc: "The main page should have the icon element"): the sling mark (figure.mk, mark.css / mark-trace.js)
   sits above the heading, centred, traced in as one gold hairline when the block scrolls into view. Its box is fixed by width and
   the SVG's 200:120 viewBox, so nothing moves when it draws (no layout shift). */
.close .gb{max-width:880px;margin:var(--s8) auto 0;padding-top:var(--s7);border-top:1px solid var(--hair);display:flex;flex-direction:column;align-items:center;gap:var(--s3)}
/* v9.2 lockup (owner, Oct 25: "the icon element can be on the left of the headline ... balanced in the same relative size (height
   wise)", then on 8ce7a72: "increase the headline size more to match vertical size"): mark | headline, vertically centred, centred
   as a unit. The headline's visible height (cap top to the descender of the g, 1.03 x its size) matches the mark's whole drawing,
   strap included. Sizes come from the block's width (container units, .gb is the container):
     --gbh = the headline size: as large as one line allows (line = 8.65 x --gbh, gap .28 x --gbh, beside the mark), at most 88px.
     the mark: 1.03 x --gbh tall, never under 88px (82px wide), so it always shows the full drawing; the small variant (<= 80px wide)
     is left for genuinely tiny renders. From about 1000px the block is 880px wide: headline 88px, mark 91px, matched. Narrower
     (701-1000px) the mark holds 88px and the headline shrinks to stay on one line (58px at 701).
   The figure's box is fixed by these sizes before the trace runs (no layout shift). */
.close .gb{container-type:inline-size}
.close .gb-lock{--gbh:min(88px,calc((100cqi - 84px) / 8.95));display:flex;align-items:center;justify-content:center;gap:calc(var(--gbh) * .28)}
.close .gb-mark{--mkh:max(88px,calc(var(--gbh) * 1.03));flex:none;height:var(--mkh);width:calc(var(--mkh) * var(--mk-ar,1))}
.close .gb-h{font-family:var(--disp);font-weight:400;font-size:var(--gbh);line-height:1.08;letter-spacing:-.01em;color:var(--ink);margin:0;white-space:nowrap}
/* "Go-Bag": the pw-bulb gold turn-on (owner on 8ce7a72: "a gold turn-on effect for the headline like we use elsewhere"), the same
   fx-filament keyframes, 1.6 s and .15 s delay as the approved home headlines (ai.css). mark-trace.js arms the block (.fx-armed: JS on,
   motion allowed) and adds .fx-in when the sling trace finishes, so the line draws and then the word lights. No JS / reduced motion:
   the settled glow. One glow word. Colour and text-shadow only (no layout shift). */
.gb-lit.pw-bulb{color:#fff6e3;text-shadow:0 0 1px #fff0cc,0 0 2px #e6cf9c,0 0 4px #c6a568,0 0 9px rgba(222,168,80,.45),0 0 16px rgba(222,168,80,.14)}
.gb.fx-armed:not(.fx-in) .gb-lit.pw-bulb{color:#c6a568;text-shadow:0 0 1px rgba(198,165,104,.4)}
.gb.fx-in .gb-lit.pw-bulb{animation:fx-filament 1.6s cubic-bezier(.3,0,.2,1) .15s both}
@media (prefers-reduced-motion:reduce){.gb.fx-in .gb-lit.pw-bulb{animation:none}}
.close .gb-lock+.gb-p{margin-top:var(--s3)}
.close .gb-p{margin:0;font-size:var(--fs-body);line-height:1.6;color:var(--ink-2)}
.close .gb-link{display:inline-flex;align-items:center;gap:10px;margin-top:var(--s3);padding:6px 0;font-size:var(--fs-caps);font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hair-strong);transition:color var(--t-fast),border-color var(--t-fast)}
.close .gb-link i{font-style:normal;letter-spacing:0;color:var(--gold);transition:transform var(--t-fast)}
.close .gb-link:hover,.close .gb-link:focus-visible{color:var(--gold);border-color:var(--gold)}
.close .gb-link:hover i,.close .gb-link:focus-visible i{transform:translateX(3px)}
.close .gb-link:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
/* "Go-Bag" stays on one line; .hy: Bodoni Moda's opsz axis thins the hyphen to nothing at display sizes (see site/sub/build.py) */
.gb .nw{white-space:nowrap}
.hy{font-optical-sizing:none}
.rm .close .gb-link,.rm .close .gb-link i{transition:none}
@media (max-width:700px){
  .close .gb{margin-top:var(--s7);padding-top:var(--s6)}
  /* phones: side by side, the headline on two lines (The Digital / Go-Bag). Its visible height (2.1 x its size) matches the mark;
     the size is what fits beside the mark ("The Digital" = 4.9 x --gbh), at most 44px (44px at 390, 39px at 360); the mark never
     under 88px tall, so it keeps the full drawing */
  .close .gb-lock{--gbh:min(44px,calc((100cqi - 100px) / 5));gap:16px}
  .close .gb-h{white-space:normal;text-align:left}
  .close .gb-l1{display:block}
  .close .gb-mark{--mkh:max(88px,calc(var(--gbh) * 2.1))}
}