/* Fonts are self-hosted. They used to come from fonts.googleapis.com, which
   cost a render-blocking stylesheet plus DNS + TLS to two extra third-party
   hosts (googleapis and gstatic) before any text could paint - on a page that
   otherwise serves everything from one CDN edge. It was also a third-party
   request carrying visitor IPs, which is a live question for a UK brand.
   Only the weights actually used are shipped: the old link also pulled Jost
   500/700 and Poppins 400/500, which nothing referenced. */

/* Jost ships as a VARIABLE font - 300, 400 and 600 all resolve to one file, so
   the whole range costs 26KB once rather than three static cuts. */
@font-face {
  font-family: 'Jost';
  src: url('../fonts/jost-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bebas Neue';
  src: url('../fonts/bebas-neue-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
/* Twisted brand heading font (menu). Licensed - Twisted supplied the family;
   it is the same face used on twisted.co. Converted from the 162KB TTF to an
   18KB woff2, which is the same outlines in a web container. */
@font-face {
  font-family: 'Sugar Magic';
  src: url('../fonts/sugarmagic.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body { font-family: 'Jost', sans-serif; background: #fff; color: #0a0a0a; overflow: hidden; }

.layout { display: grid; grid-template-columns: 60px 1fr; height: 100vh; }

/* ---- left sidebar nav ---- */
/* the live site's rail is rgba(0,0,0,.73) over its beige hero; this is that
   composite as a solid (ours sits on white, so nothing shows through) */
.sidebar { position: relative; background: #373532; display: flex; flex-direction: column; align-items: center; overflow: hidden; }
/* rail + logo sized to the live site: 60px column, wordmark capped at 140px
   long (site: img max-width 140px, rotated 90deg) centred ~96px from top */
.logo-wrap { width: 60px; height: 192px; position: relative; flex: none; }
.logo-wrap .logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(90deg); width: 140px; height: auto; }
.side-menu { position: absolute; top: 48%; left: 50%; transform: translate(-50%,-50%); width: 44px; height: 44px; background: none; border: none; cursor: pointer; padding: 0; }
.regions { position: absolute; bottom: 16px; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; }
/* live-site header-rail list: Bebas 16px, inactive #ccc, active 600 white,
   left-aligned, 2px #ccc dividers, ~5px item gap (widget 8f755e7) */
.regions { align-items: stretch; padding: 0 14px; }
.regions a { color: #ccc; font-family: 'Bebas Neue', sans-serif; font-size: 16px; font-weight: 400; line-height: 19px; letter-spacing: .5px; text-decoration: none; padding: 6px 0; text-align: left; }
.regions a.active { color: #fff; font-weight: 600; }
.regions a + a { border-top: 2px solid #ccc; margin-top: 3px; }

/* ---- body split: stage | right panel ---- */
.body { display: grid; grid-template-columns: minmax(0, 1fr) clamp(480px, 38vw, 820px);   /* wider (Luca, 2026-10-13) */ min-height: 0; height: 100%; }

/* one hairline weight/colour for the whole UI - Phil's layout uses rules, not
   boxes, so this token is what separation is built from */
:root { --rule: #e5e5e5; --tile-gap: 12px;
        /* Bars are sized from what the LABEL needs, not as a % of the panel.
           Percentages wasted space and needed a breakpoint that then had to be
           tuned twice: at 1440 the panel is 461px, the narrow rule gave a 52%
           bar, and the label column ended up 145px wide for a ~96px word.
           --label-col is the widest label ("Mariana Black", 106px) plus
           breathing room, so the bar takes everything else at EVERY width and
           the label can never truncate. --bar-inset is how much shorter an
           unselected bar is. */
        --label-col: 116px; --bar-gap: 16px; --bar-inset: 34px;
        /* Tile size: --tile-scale of what three would need to fill the row,
           but never below --tile-min, and never above --fill itself. That last
           clamp is what makes overflow impossible - at any width where the
           floor would not fit, the tile falls back to exactly the fill size.
           A flat scale could not serve both ends: 0.8 gave a good desktop tile
           and a 47px one on a laptop, while 1.0 fixed the laptop and made
           desktop too big. */
        --tile-scale: .86; --tile-min: 78px; }

/* The stage and the panel size each OTHER - the panel has a 420px floor, so a
   1024px iPad leaves the stage only 544px while the viewport still reads as
   "desktop". Viewport media queries cannot see that, which is why the thumbnail
   row overflowed its container by 65px there. These two are the containers the
   contents actually have to fit inside, so they are queried directly. */
.stage { container-type: inline-size; }
.panel { container-type: inline-size; }