/* Soft placeholder → photo. The photo waits (opacity 0) over its blurred
   preview until decoded; the early script then fades it in. The theme's
   own load animations are switched off here — they start on render, not on
   load, so a slow photo used to pop in after they had already finished. */
html.brg-js [data-brg-ph] img:not(.brg-ph-in):not(.prop-img-b){opacity:0}
html.brg-js [data-brg-ph] img{animation:none!important}
/* Count-up figures: hidden until their roll begins (see brg-enhance-early) */
html.brg-cnt [data-brg-count]:not(.brg-cnt-go){opacity:0}
[data-brg-count].brg-cnt-go{transition:opacity .25s ease}

/* Count-up: the final value holds the width (transparent, still read by
   screen readers); the rolling number sits on top of it, so a suffix like
   "m²" never shifts while the digits change. */
.brg-num{display:inline-grid;font-variant-numeric:tabular-nums lining-nums}
.brg-num>span{grid-area:1/1}
.brg-num-g{color:transparent}
.brg-num-l{text-align:left}

/* Menu links are italic display type; the slant of I / A / P overhangs the
   left edge. While a link slides in, Safari paints it on its own layer
   clipped to the link's box, cutting that overhang off. Room inside the
   box (padding), same position (matching negative margin). Specific enough
   to beat each template's own .m-link padding. */
.brg-mob-nav a.m-link{padding-left:.16em;padding-right:.16em;margin-left:-.16em}

/* Reading progress — gold hairline on the nav's bottom edge */
.brg-read-prog{position:absolute;left:0;bottom:-1px;width:100%;height:2px;background:var(--gold,#B8965A);
  transform:scaleX(0);transform-origin:left center;pointer-events:none;z-index:2}
@media (prefers-reduced-motion: reduce){ .brg-read-prog{display:none} }

/* "Continue reading" pill — dark glass, bottom centre */
.brg-resume{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:190;
  display:flex;align-items:center;gap:14px;padding:8px 8px 8px 20px;border-radius:999px;
  background:rgba(18,18,18,.74);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.78);box-shadow:0 18px 50px -20px rgba(0,0,0,.5);
  font-family:var(--sans,'Neue Montreal',sans-serif);font-size:.8rem;line-height:1.2;white-space:nowrap;max-width:calc(100vw - 32px);
  opacity:0;transform:translate(-50%,16px);transition:opacity .45s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
.brg-resume.on{opacity:1;transform:translate(-50%,0)}
.brg-resume.in-host{position:absolute}
.brg-resume-t{overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.brg-resume-go{font:500 10px/1 var(--sans,'Neue Montreal',sans-serif);letter-spacing:.16em;text-transform:uppercase;color:#1d1d1b;background:#fff;border:0;border-radius:999px;padding:11px 16px;cursor:pointer;transition:background .3s}
.brg-resume-go:hover{background:var(--gold-pale,#E8D5B0)}
.brg-resume-x{width:30px;height:30px;border-radius:50%;border:0;background:none;color:rgba(255,255,255,.6);display:grid;place-items:center;cursor:pointer}
.brg-resume-x svg{width:10px;height:10px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round}
.brg-resume button:focus-visible{outline:2px solid var(--gold,#B8965A);outline-offset:2px}
@media (max-width:420px){.brg-resume-t{display:none}}
@media (prefers-reduced-motion: reduce){.brg-resume{transition:none}}