/* =====================================================================
   REAL HOLDING GROUP · BLOG (blog.js): its own reader over the scene, under the bar (z 110 < .nav 120).
   The RHG family, dark and warm: graphite, charcoal, dark stone, deep bronze; warm off-white words; copper only as
   an accent. Never pure black, never the old ivory. Inter only. One grain for everything: the site's own (.grain,
   styles.css), no noise overlay of the blog's own. Chapters hand their colour over through a soft blend (each
   background reaches up over the end of the one before); the elements hand the reading over (blog.js).
   ===================================================================== */
.blog{
  /* surfaces (from the site's tokens: --base #1f1e1d, --surface #262423, graphite #242323 #363636 #525254) */
  --b-0:#1e1d1c; --b-1:#232120; --b-2:#2a2826; --b-3:#302c29; --b-4:#3a3531; --b-5:#524943;
  /* copper (the site's --cognac #795238 and --cognac-lite #c08a57) and its desaturated microtype tone */
  --b-cu:#795238; --b-cu-lite:#c08a57; --b-cu-m:#c49e80;
  /* words: the site's --hi and --stone, a body tone between them */
  --b-hi:#F1EDE7; --b-tx:#d3cbc2; --b-tx2:#AEA7A3;
  /* the cover: the letters' one black material; its copy a little brighter (headline, body, microtype), the chapters'
     line in a warm off-white */
  --b-ink:#0b0a0a; --b-c-hd:#F6F2EC; --b-c-bd:#e3ddd5; --b-c-mi:#c9c2ba; --b-nav:#d6cfc6;
  --b-line:rgba(174,167,163,.16); --b-line2:rgba(174,167,163,.32);
  --b-row:86px;                                  /* the chapter row, under the bar */
  --b-top:clamp(168px, 20vh, 200px);             /* the bar, the chapter row and its band's soft edge above every chapter's content */
  --b-ext:22vh;                                  /* how far a chapter's colour reaches up over the one before (a soft blend) */
  --b-gut:var(--gut, clamp(22px,5vw,72px));
  position:fixed; inset:0; z-index:110; overflow:hidden; background:var(--b-1); color:var(--b-tx);
  font-family:var(--font); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
.blog[hidden]{ display:none; }
html.is-blog{ overflow:hidden; }
/* while the blog covers it, the scene is not painted at all (layout untouched: its scroll stays where it was), nor the
   fixed footer under it; their loops hold where they are and go on from there as the way out starts (still covered) */
html.is-blog-covered .hero, html.is-blog-covered .hero *, html.is-blog-covered .ft[data-scene], html.is-blog-covered .ft[data-scene] *{ visibility:hidden !important; }
html.is-blog-covered :is(.hero, .ft[data-scene]), html.is-blog-covered :is(.hero, .ft[data-scene]) *,
html.is-blog-covered :is(.hero, .ft[data-scene])::before, html.is-blog-covered :is(.hero, .ft[data-scene])::after,
html.is-blog-covered :is(.hero, .ft[data-scene]) *::before, html.is-blog-covered :is(.hero, .ft[data-scene]) *::after{ animation-play-state:paused !important; }
/* the bar keeps its own dark variant over the blog; only Blog is marked as the current place */
.pill__link[data-blog-btn][aria-current="page"]{ color:var(--hi); background:rgba(174,167,163,.07); }
.pill__link.is-blog-hint{ color:var(--hi); background:rgba(174,167,163,.16); }

/* the way in: the scene dims a little, a copper line comes down from the Blog item and splits the screen */
.blog-fx__dim{ position:fixed; inset:0; z-index:108; background:rgba(22,21,20,.36); opacity:0; visibility:hidden; pointer-events:none; }
.blog-fx__v, .blog-fx__h{ position:fixed; z-index:111; display:block; background:var(--cognac-lite, #c08a57); opacity:0; visibility:hidden; pointer-events:none; }
.blog-fx__v{ width:1px; }
.blog-fx__h{ left:0; height:1px; }

.blog__scroll{ position:absolute; inset:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  scrollbar-width:thin; scrollbar-color:rgba(174,167,163,.28) transparent; }
.blog__scroll::-webkit-scrollbar{ width:8px; } .blog__scroll::-webkit-scrollbar-thumb{ background:rgba(174,167,163,.24); border-radius:8px; }
.blog__content{ outline:none; }
.blog__sr, .bsr{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
.blog__skip{ position:absolute; z-index:6; left:var(--b-gut); top:84px; padding:10px 16px; border:1px solid var(--b-line2); border-radius:999px; background:var(--b-1); color:var(--b-hi);
  font:500 .8rem/1 var(--font); letter-spacing:.06em; transform:translateY(-200%); opacity:0; cursor:pointer; }
.blog__skip:focus-visible{ transform:none; opacity:1; }
.blog :focus-visible{ outline:2px solid var(--b-cu-lite); outline-offset:3px; }
.blog [tabindex="-1"]:focus{ outline:none; }   /* (headings that take the focus on arrival: no ring, the reading starts there) */
/* (resets without weight: every component's own spacing and colour wins) */
:where(.blog) :where(h1, h2, h3, p, ol, ul, dl, dd, figure){ margin:0; padding:0; }
:where(.blog) :where(ol, ul){ list-style:none; }
:where(.blog) :where(a){ color:inherit; text-decoration:none; }
:where(.blog) :where(em){ font-style:normal; color:var(--b-cu-lite); }
:where(.blog) :where(time){ font-variant-numeric:tabular-nums; }
/* the one microtype of the blog: labels, eyebrows, metadata */
.bk-eye{ font-size:.72rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--b-cu-m); }

/* ---------------- the chapters' line: microtype, nothing behind it on the cover ---------------- */
/* The first thing in the blog's scroll, out of the flow (its margins give its place back: the cover starts at 0), at
   the middle of the cover's height, over the letters (its own layer, z 4: above the copy, under the bar). Sticky under
   the bar: it travels up with the cover and docks there for the chapters, one move with the scroll itself (no script,
   no jump). Its words: a warm off-white, copper only for the chapter being read. */
.bnav{ --bn-h:30px; --bn-mid:max(50vh, 280px); position:sticky; z-index:4; top:var(--b-row); height:var(--bn-h); padding:0 var(--b-gut); pointer-events:none;
  margin:calc(var(--bn-mid) - var(--bn-h) / 2) 0 calc(-1 * (var(--bn-mid) + var(--bn-h) / 2)); }
@supports (height:1svh){ .bnav{ --bn-mid:max(50svh, 280px); } }
.bnav__list{ position:relative; display:flex; justify-content:space-between; align-items:center; gap:12px; height:100%; pointer-events:auto; }
/* docked, what scrolls under the row and the bar is covered by the colour under it (blog.js reads it along the chapter's
   own gradient, --band): opaque, solid through the row's words and 20px under them, then a soft edge that ends before any
   chapter's first words (--b-top). No blur. On the cover it is not there at all (the line crosses the scene bare); it
   comes in only once the line has docked (blog.js, --band-o) */
.bnav::before{ content:""; position:absolute; left:0; right:0; top:calc(-1 * var(--b-row)); height:calc(var(--b-row) + 80px); pointer-events:none; background:var(--band, rgb(35,33,32)); opacity:var(--band-o, 0);
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 76%, transparent 100%); mask-image:linear-gradient(180deg, #000 0%, #000 76%, transparent 100%); }
.bnav__a{ position:relative; display:inline-flex; align-items:baseline; gap:.5em; padding:9px 0; margin:0; border:0; background:none; cursor:pointer; white-space:nowrap;
  font:500 .69rem/1 var(--font); letter-spacing:.17em; text-transform:uppercase; color:var(--b-nav); transition:color .3s var(--ease); -webkit-tap-highlight-color:transparent; }
.bnav__s{ color:inherit; opacity:.5; transition:opacity .3s; }
.bnav__a::after{ content:""; position:absolute; left:1.1em; bottom:2px; width:20px; height:1px; background:var(--b-cu-lite); transform:scaleX(0); transform-origin:0 50%; transition:transform .45s var(--ease); }
.bnav__a[aria-current="true"]{ color:var(--b-cu-lite); }
.bnav__a[aria-current="true"]::after{ transform:scaleX(1); }
.bnav__a[aria-current="true"] .bnav__s{ opacity:1; }
.bnav__a.is-stone{ color:var(--b-hi); }   /* (over Dos escalas' stone half: the light words, AA) */
@media (hover:hover){ .bnav__a:hover{ color:var(--b-hi); } .bnav__a:hover .bnav__s{ opacity:1; } }
.bnav__toggle{ display:none; }

/* ---------------- chapters ---------------- */
/* each chapter's colour reaches up over the end of the one before and blends into it (no edge, no wipe) */
.bch{ position:relative; z-index:0; overflow-x:clip; }
.bch__bg{ --ext:var(--b-ext); position:absolute; left:0; right:0; top:calc(-1 * var(--ext)); bottom:0; z-index:0; pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 var(--ext)); mask-image:linear-gradient(180deg, transparent 0, #000 var(--ext)); }
.bch__in{ position:relative; z-index:1; padding:var(--b-top) var(--b-gut) 20vh; }
/* a chapter's name is a label, never a headline: "/ 02  COLOMBIA", then one line of context */
.bhead{ display:grid; grid-template-columns:auto 1fr; column-gap:14px; align-items:baseline; margin-bottom:clamp(44px,8vh,96px); max-width:640px; }
.bhead__n{ font-size:.72rem; font-weight:500; letter-spacing:.18em; color:var(--b-cu-m); opacity:.8; }
.bhead__t{ font-size:.72rem; font-weight:600; line-height:1.2; letter-spacing:.18em; text-transform:uppercase; color:var(--b-cu-m); outline:none; }
.bhead__intro{ grid-column:1 / -1; margin-top:14px; max-width:48ch; font-size:clamp(.94rem,1.02vw,1.04rem); line-height:1.55; color:var(--b-tx2); }
.bhead--r{ margin-left:auto; }
.bempty{ font-size:.95rem; color:var(--b-tx2); }

/* ---------------- 1 · PORTADA ---------------- */
/* the layers, bottom up: the surface (0), the letters (1), the floor that takes them in and the shade toward Panorama
   (2), the copy (3); the chapters' line (4) is the blog's own layer, the bar stays above the blog */
.bch--cover{ height:100vh; height:100svh; min-height:560px; z-index:2; }   /* (above the chapters: the A's window reaches over Panorama) */
.bcov__bg{ position:absolute; inset:0; z-index:0; overflow:hidden;
  background:
    radial-gradient(120% 92% at 50% 40%, rgba(14,13,12,0) 56%, rgba(14,13,12,.46) 100%),          /* the vignette */
    radial-gradient(54% 40% at 60% 44%, rgba(176,160,146,.10) 0%, rgba(176,160,146,0) 72%),        /* a low haze behind the letters */
    radial-gradient(40% 30% at 20% 40%, rgba(121,82,56,.08) 0%, rgba(121,82,56,0) 70%),
    linear-gradient(180deg, #232221 0%, #262423 40%, #282523 70%, #2a2623 100%); }               /* graphite, a little warmer below */
/* the letters' stage: each letter in its own plane, positioned on its own (no row), clipped by the cover's edges */
.bcov__letters{ position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none; }
.bl{ position:absolute; display:block; left:var(--x); top:calc(var(--b) - var(--h)); z-index:var(--z, 1);
  font-size:calc(var(--h) / .7275); line-height:.7275; font-weight:800; letter-spacing:0; white-space:nowrap; }   /* (the box is the cap height: top is the cap, bottom the baseline) */
/* its resting tilt lives on its own layer, never animated: the fall (on .bl__m) is relative to it, so the letters land
   already tilted and nothing changes when the fall hands over */
.bl__t{ display:block; rotate:var(--r, 0deg); transform-origin:50% 100%; }
.bl__m{ position:relative; display:flow-root; transform-origin:50% 100%; }   /* (flow-root: the face's margins stay inside it) */
/* the face: one black material for the four (one fill, no edge, no light, no tone of its own); the letters differ only by
   place, scale, tilt and blur. Its foot dissolves into the floor: a mask in the letter's own frame (it tilts, falls and
   drifts with it), opaque down to 60% of the letter's height, fading on, gone from 88% to the base. The box reaches
   --mp past the glyph above and at the sides (negative margins: the glyph keeps its place) so the mask never clips the
   blur */
.bl__g{ --mp:48px; --ch:.7275em; position:relative; display:block; padding:var(--mp) var(--mp) 0; margin:calc(-1 * var(--mp)) calc(-1 * var(--mp)) 0;
  color:var(--b-ink); filter:blur(var(--bl, 0px));
  -webkit-mask-image:linear-gradient(180deg, #000 0, #000 calc(var(--mp) + var(--ch) * .6), rgba(0,0,0,.88) calc(var(--mp) + var(--ch) * .66), rgba(0,0,0,.62) calc(var(--mp) + var(--ch) * .72), rgba(0,0,0,.32) calc(var(--mp) + var(--ch) * .78), rgba(0,0,0,.1) calc(var(--mp) + var(--ch) * .84), rgba(0,0,0,0) calc(var(--mp) + var(--ch) * .88));
  mask-image:linear-gradient(180deg, #000 0, #000 calc(var(--mp) + var(--ch) * .6), rgba(0,0,0,.88) calc(var(--mp) + var(--ch) * .66), rgba(0,0,0,.62) calc(var(--mp) + var(--ch) * .72), rgba(0,0,0,.32) calc(var(--mp) + var(--ch) * .78), rgba(0,0,0,.1) calc(var(--mp) + var(--ch) * .84), rgba(0,0,0,0) calc(var(--mp) + var(--ch) * .88));
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; }
.bl__b{ display:inline-block; width:0; height:0; vertical-align:baseline; }
.bl__k{ position:absolute; left:var(--mp); top:var(--kb, calc(var(--mp) + var(--ch))); width:0; height:0; }
.bl__k[data-k="x"]{ left:calc(var(--mp) + 1em); }
.bl__k[data-k="y"]{ top:calc(var(--kb, calc(var(--mp) + var(--ch))) - 1em); }
/* three planes, the depth by blur only: near (A, sharp), middle (R, L), far (E) */
.bl--a{ --bl:0px;   --z:4; }
.bl--r{ --bl:1.2px; --z:3; }
.bl--l{ --bl:.8px;  --z:2; }
.bl--e{ --bl:3.2px; --z:1; }
/* the composition, desktop: R low at the left (the largest mass, cut by the left edge, its base under the fold), E far
   and high behind it, A centre right (the nearest, upright, clear of the headline: its foot is gone before it), L at the
   right edge (tall, cut). Tops and bases all at different heights; every opaque part above the copy's band */
.bl--r{ --h:min(74vh, 52vw); --b:104vh; --x:-9vw;  --r:-8deg; }
.bl--e{ --h:min(50vh, 35vw); --b:70vh;  --x:26vw;  --r:9deg; }
.bl--a{ --h:min(58vh, 41vw); --b:89vh;  --x:53vw;  --r:-3deg; }
.bl--l{ --h:min(74vh, 52vw); --b:98vh;  --x:80vw;  --r:6deg; }
/* a few px of drift once they rest (the cover in view only), and only on the face */
@keyframes blDrift{ 0%{ translate:0 0; } 50%{ translate:var(--dx, 1.5px) var(--dy, -2px); } 100%{ translate:0 0; } }
.blog.is-live .bl__g{ animation:blDrift var(--dd, 17s) ease-in-out infinite; }
.bl--r{ --dd:19s; --dx:-1.5px; --dy:1.5px; } .bl--e{ --dd:23s; --dx:1px; --dy:-1px; } .bl--a{ --dd:16s; --dx:1.5px; --dy:-2px; } .bl--l{ --dd:21s; --dx:-1px; --dy:-2px; }
html.is-falling .bl__m, html.is-falling .bl__g{ will-change:transform, filter; }
/* the floor: one gradient from the graphite down to a near-black ground that takes the letters' dissolved feet in (the
   copy stands on it) */
.bcov__floor{ position:absolute; left:0; right:0; bottom:0; height:58%; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, rgba(13,12,11,0) 0%, rgba(13,12,11,.22) 22%, rgba(13,12,11,.52) 44%, rgba(12,11,10,.8) 66%, rgba(12,11,10,.95) 84%, #0c0b0a 100%); }
/* the way to Panorama: the cover darkens to its surface (blog.js); its foot stays the floor's near-black, the tone
   Panorama's top edge holds across the whole width (its glows come in below it: section 2) */
.bcov__shade, .bportal__sky{ background:linear-gradient(180deg, #1e1d1c 0%, #1e1d1c 64%, #0c0b0a 100%); }
.bcov__shade{ position:absolute; inset:0; z-index:2; opacity:0; pointer-events:none; }
/* the copy: the eyebrow at the top left; the headline centred on the floor, two lines, the body under it, narrow; the
   edition in the bottom left corner, the status and the disclaimer in the bottom right one */
.bcov__in{ position:absolute; inset:0; z-index:3; pointer-events:none; --foot:30px; --mast:calc(var(--b-row) + 10px);
  display:flex; flex-direction:column; justify-content:flex-end; align-items:center; padding:0 var(--b-gut) var(--foot); text-align:center; }
.bcov__in > *, .bcov__foot > *{ pointer-events:auto; }
.bcov__eye{ position:absolute; left:var(--b-gut); top:var(--mast); font-size:.72rem; letter-spacing:.2em; color:var(--b-c-mi); text-align:left; }
.bcov__h1{ position:relative; max-width:12em;
  font-size:clamp(2.5rem, 3.1vw, 3.25rem); font-weight:600; line-height:1.04; letter-spacing:-.032em; color:var(--b-c-hd); outline:none; }
.bline{ display:block; overflow:hidden; padding-bottom:.1em; margin-bottom:-.1em; }
.bline > span{ display:block; }
.bcov__body{ position:relative; margin-top:16px; width:min(25em, 100%);
  font-size:clamp(.875rem, 1.02vw, .9375rem); line-height:1.5; color:var(--b-c-bd); text-wrap:balance; }
/* the corners: one line of microtype each, on the body's last line (desktop) */
.bcov__foot{ position:absolute; left:var(--b-gut); right:var(--b-gut); bottom:var(--foot); display:flex; justify-content:space-between; align-items:flex-end; gap:24px; pointer-events:none; text-align:left; }
.bcov__ed{ display:flex; flex-wrap:wrap; gap:4px 14px; max-width:calc(50% - 210px);
  font-size:.66rem; font-weight:500; letter-spacing:.16em; line-height:1.5; text-transform:uppercase; color:var(--b-c-mi); }
.bcov__ed > span{ color:var(--b-c-bd); }
.bcov__note{ display:flex; flex-direction:column; align-items:flex-end; gap:3px; max-width:calc(50% - 210px); text-align:right; }
.bcov__status, .bcov__disc{ font-size:.62rem; font-weight:500; letter-spacing:.15em; line-height:1.5; text-transform:uppercase; color:var(--b-c-mi); }
.bcov__disc{ font-size:.58rem; letter-spacing:.13em; }
/* the way down: one thin copper line at the foot, drawn slowly (under the body) */
.bcov__cue{ position:absolute; left:50%; bottom:0; width:1px; height:calc(var(--foot) - 8px); background:linear-gradient(180deg, rgba(192,138,87,0), rgba(192,138,87,.8)); transform-origin:50% 0; }
.blog.is-live .bcov__cue{ animation:bCue 2.8s var(--ease) infinite; }
/* (under an open item the cover is not painted: its drift and its cue hold, and go on as the item closes) */
.blog.is-art-on .bl__g, .blog.is-art-on .bcov__cue{ animation-play-state:paused; }
@keyframes bCue{ 0%{ transform:scaleY(0); opacity:1; } 60%{ transform:scaleY(1); opacity:1; } 100%{ transform:scaleY(1); opacity:0; } }
/* the A's window onto Panorama: its surface and its main visual, at their own place, seen through the letter (its foot
   dissolved like the letter's while it is still the letter's size: blog.js) */
.bportal{ position:absolute; left:0; top:0; width:100%; height:300%; z-index:4; visibility:hidden; pointer-events:none; overflow:hidden; }
.bportal__sky{ position:absolute; left:0; top:0; width:100%; height:100vh; height:100svh; min-height:560px; }
.bportal__pano{ position:absolute; left:0; width:100%; }
.bportal__vis{ position:absolute; transform-origin:50% 50%; }

/* ---------------- 2 · PANORAMA (the darkest surface: the A opens onto it; it starts from the cover's near-black floor) ---------------- */
.bch--pano{ color:var(--b-tx); }
.bch--pano .bch__bg{ --ext:0px; -webkit-mask-image:none; mask-image:none; }
.bch--pano .bch__bg, .bportal__pano{ background:linear-gradient(180deg, #0c0b0a 0, #1a1918 16vh, #201e1d 34vh, #1e1d1c 60%, #23211f 100%); }
/* its two glows, on a layer of their own that comes in under the edge: its first 16vh are the surface's ramp alone, so
   its top is the floor's near-black across the whole width (no seam at the cover's lower edge while it scrolls away)
   and the band's colour (blog.js, panoAt) stays exact */
.bch--pano .bch__bg::before, .bportal__pano::before{ content:""; position:absolute; inset:0; pointer-events:none; background:
    radial-gradient(48% 34% at 84% 10%, rgba(121,82,56,.15) 0%, rgba(121,82,56,0) 70%),
    radial-gradient(60% 40% at 10% 86%, rgba(82,82,84,.14) 0%, rgba(82,82,84,0) 70%);
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 16vh); mask-image:linear-gradient(180deg, transparent 0, #000 16vh); }
.bpano{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:clamp(16px,2vw,32px); align-items:start; }
.bpano__vis--a{ grid-column:1 / span 5; grid-row:1; }
.bpano__txt{ grid-column:7 / -1; grid-row:1; padding-top:clamp(4px,1vh,12px); }
.bpano__eye{ display:flex; flex-wrap:wrap; gap:6px 18px; }
.bpano__eye > span:last-child{ color:var(--b-tx2); }
.bpano__n{ margin-right:1em; opacity:.8; }
.bpano__h{ margin-top:clamp(26px,5vh,54px); font-size:var(--ph, clamp(2.2rem, 3.6vw, 3.8rem)); font-weight:600; line-height:1.04; letter-spacing:-.034em; color:var(--b-hi); text-wrap:balance; outline:none; }
.bpano__h a{ display:inline; background-image:linear-gradient(var(--b-cu-lite), var(--b-cu-lite)); background-size:0% 1px; background-position:0 100%; background-repeat:no-repeat; transition:background-size .6s var(--ease), color .3s; }
@media (hover:hover){ .bpano__h a:hover{ background-size:100% 1px; } }
.bpano__h a:focus-visible{ outline-offset:6px; }
.bpano__deck{ margin-top:clamp(18px,3vh,30px); max-width:52ch; font-size:clamp(1rem,1.1vw,1.14rem); line-height:1.55; color:var(--b-tx); }
.bpano__why{ grid-column:2 / span 5; grid-row:2; margin-top:clamp(80px,16vh,180px); max-width:50ch; }
.bpano__vis--b{ grid-column:8 / span 4; grid-row:2; margin-top:clamp(40px,8vh,90px); }
.bwhy__t{ font-size:.7rem; font-weight:500; letter-spacing:.2em; color:var(--b-cu-m); }
.bwhy__p{ margin-top:14px; font-size:clamp(.98rem,1.06vw,1.08rem); line-height:1.62; color:var(--b-tx); }
/* the metadata is one line of microtype: SOURCE name · DATE · READING · CATEGORY (each label kept with its value: a
   wrap only ever falls between two pairs; a long source wraps inside its own value) */
.bmeta{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 22px; margin-top:clamp(20px,3vh,30px); font-size:.66rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--b-tx2); }
.bmeta > div{ display:inline-flex; align-items:baseline; gap:10px; min-width:0; }
.bmeta dt{ color:var(--b-cu-m); white-space:nowrap; }
.bmeta dd{ color:var(--b-tx); }
.bmeta a{ border-bottom:1px solid rgba(192,138,87,.5); }
@media (hover:hover){ .bmeta a:hover{ color:var(--b-cu-lite); } }
.bfig__cap{ display:flex; justify-content:space-between; gap:12px; margin-top:16px; font-size:.62rem; font-weight:500; letter-spacing:.17em; text-transform:uppercase; color:var(--b-tx2); }

/* partial corner frames (the gallery marks): four short corners, copper on hover or focus */
.bframe{ position:relative; }
.bframe__c{ position:absolute; width:14px; height:14px; border:0 solid currentColor; color:rgba(174,167,163,.5); transition:color .35s var(--ease); pointer-events:none; }
.bframe__c--tl{ left:-12px; top:-12px; border-left-width:1px; border-top-width:1px; }
.bframe__c--tr{ right:-12px; top:-12px; border-right-width:1px; border-top-width:1px; }
.bframe__c--bl{ left:-12px; bottom:-12px; border-left-width:1px; border-bottom-width:1px; }
.bframe__c--br{ right:-12px; bottom:-12px; border-right-width:1px; border-bottom-width:1px; }
.bvis{ position:relative; overflow:hidden; aspect-ratio:var(--ar, 4 / 5); background:var(--vb, #2a2827); }
.bvis svg{ position:absolute; inset:0; width:100%; height:100%; transition:transform .7s var(--ease); transform-origin:50% 50%; }

/* ---------------- items (Colombia): three columns of different size and height, the title is the link ---------------- */
.bcols{ display:grid; grid-template-columns:5fr 3fr 4fr; column-gap:clamp(28px,4vw,72px); align-items:start; }
.bcol{ display:flex; flex-direction:column; gap:clamp(72px,12vh,140px); }
.bcols--co .bcol:nth-child(2){ margin-top:clamp(90px,20vh,240px); }
.bcols--co .bcol:nth-child(3){ margin-top:clamp(36px,7vh,90px); }
.bitem{ position:relative; display:block; }
.bitem__vis{ margin:12px 12px 0; }
.bitem--l .bitem__vis{ max-width:440px; } .bitem--m .bitem__vis{ max-width:400px; } .bitem--s .bitem__vis{ max-width:300px; }
.bitem--txt .bitem__vis{ display:none; }
.bitem__lab{ display:flex; justify-content:space-between; gap:12px; margin-top:26px; font-size:.62rem; font-weight:500; letter-spacing:.17em; text-transform:uppercase; color:var(--b-cu-m); }
.bitem__lab time{ color:var(--b-tx2); white-space:nowrap; }
.bitem__t{ margin-top:12px; font-size:var(--ts, clamp(1.2rem,1.5vw,1.5rem)); font-weight:600; line-height:1.18; letter-spacing:-.018em; color:var(--b-hi); text-wrap:balance; transition:transform .45s var(--ease); }
.bitem__a::after{ content:""; position:absolute; inset:0; z-index:2; }
.bitem__a:focus-visible{ outline:none; }
.bitem__a:focus-visible::after{ outline:2px solid var(--b-cu-lite); outline-offset:6px; }
.bitem__deck{ margin-top:12px; max-width:50ch; font-size:.9rem; line-height:1.56; color:var(--b-tx2); }
.bitem__src{ margin-top:14px; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--b-tx2); }
.bitem__src b{ font-weight:600; color:var(--b-tx); }
.bitem--l .bitem__t{ --ts:clamp(1.4rem,2vw,2.1rem); }
.bitem--s .bitem__t{ --ts:clamp(1.08rem,1.24vw,1.26rem); }
.bitem--s .bitem__deck{ font-size:.86rem; }
@media (hover:hover){
  .bitem:hover .bframe__c{ color:var(--b-cu-lite); }
  .bitem:hover .bvis svg{ transform:scale(1.03); }
  .bitem:hover .bitem__t{ transform:translateY(-2px); }
}
.bitem:focus-within .bframe__c{ color:var(--b-cu-lite); }
.bitem:focus-within .bvis svg{ transform:scale(1.03); }
.bitem:focus-within .bitem__t{ transform:translateY(-2px); }

/* ---------------- 3 · COLOMBIA (graphite medium, warmer as it goes) ---------------- */
.bch--co .bch__bg{ background:radial-gradient(60% 40% at 12% 30%, rgba(174,167,163,.05) 0%, rgba(174,167,163,0) 70%), linear-gradient(180deg, #2b2826 0%, #2f2b28 55%, #332e2a 100%); }

/* ---------------- 4 · EN NÚMEROS (deep bronze, stone, charcoal: the numbers are the title) ---------------- */
.bch--num .bch__bg{ background:
    radial-gradient(60% 45% at 88% 92%, rgba(154,107,69,.2) 0%, rgba(154,107,69,0) 70%),
    radial-gradient(50% 40% at 6% 18%, rgba(121,82,56,.1) 0%, rgba(121,82,56,0) 70%),
    linear-gradient(180deg, #2d2825 0%, #30281f 46%, #35291f 100%); }
.bnum{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); column-gap:clamp(32px,4.6vw,88px); row-gap:clamp(56px,10vh,110px); max-width:1500px; }
.bnum__i{ position:relative; padding-top:22px; }
.bnum__i:nth-child(3n+2){ margin-top:clamp(40px,7vh,90px); }
.bnum__line{ position:absolute; left:0; right:0; top:0; height:1px; background:var(--b-line2); transform-origin:0 50%; }
.bnum__line::after{ content:""; position:absolute; left:0; top:0; width:36px; height:1px; background:var(--b-cu-lite); }
.bnum__name{ font-size:.66rem; font-weight:500; letter-spacing:.17em; text-transform:uppercase; color:var(--b-cu-m); }
.bnum__v{ margin-top:clamp(14px,2vh,22px); overflow:hidden; padding-bottom:.06em; font-size:clamp(2.6rem, 4.4vw, 4.9rem); font-weight:500; line-height:1; letter-spacing:-.045em; color:var(--b-hi); font-variant-numeric:tabular-nums; white-space:nowrap; }
.bnum__vi{ display:block; }
.bnum__dl{ display:grid; grid-template-columns:auto 1fr; gap:6px 16px; margin-top:18px; font-size:.84rem; line-height:1.45; color:var(--b-tx2); max-width:40ch; }
.bnum__dl dt{ font-size:.6rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--b-tx2); padding-top:.32em; opacity:.85; }
.bnum__dl dd{ color:var(--b-tx); }
.bnum__src{ margin-top:14px; font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--b-tx2); }
.bnum__src a{ border-bottom:1px solid rgba(192,138,87,.5); color:var(--b-tx); }
@media (hover:hover){ .bnum__src a:hover{ color:var(--b-cu-lite); } }
.bnum__spark{ display:block; width:min(240px, 76%); height:46px; margin-top:16px; overflow:visible; }

/* ---------------- 5 · MUNDO (dark warm grey, haze, an abstract map; one story leads, a few support it) ---------------- */
.bch--wo .bch__bg{ background:radial-gradient(70% 46% at 30% 22%, rgba(174,167,163,.07) 0%, rgba(174,167,163,0) 70%), linear-gradient(180deg, #2c2a28 0%, #2b2928 60%, #2a2827 100%); }
.bmap{ position:absolute; left:0; top:var(--ext); width:100%; height:100vh; opacity:.9; }
.bmap path{ fill:none; stroke:rgba(241,237,231,.075); stroke-width:1; vector-effect:non-scaling-stroke; }
.bmap .bmap__r{ stroke:rgba(192,138,87,.42); stroke-dasharray:.006 .006; }
.bmap circle{ fill:rgba(192,138,87,.55); }
.bwo{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:clamp(16px,2vw,32px); }
.bwo__lead{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:inherit; align-items:end; }
.bwo__lead .bitem__vis{ grid-column:1 / span 8; max-width:none; }
.bwo__lead .bwo__txt{ grid-column:9 / -1; padding-bottom:4px; }
.bwo__lead .bitem__t{ --ts:clamp(1.5rem,2.3vw,2.5rem); }
.bwo__lead .bitem__lab{ margin-top:0; }
.bwo__sup{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:inherit; row-gap:clamp(64px,11vh,120px); margin-top:clamp(90px,16vh,180px); }
.bwo__sup .bitem{ padding-top:20px; border-top:1px solid var(--b-line); }
.bwo__sup .bitem__lab{ margin-top:0; }
.bwo__sup .bitem:nth-child(1){ grid-column:1 / span 4; }
.bwo__sup .bitem:nth-child(2){ grid-column:6 / span 3; margin-top:clamp(40px,8vh,96px); }
.bwo__sup .bitem:nth-child(3){ grid-column:10 / span 3; }
.bwo__sup .bitem:nth-child(4){ grid-column:1 / span 5; }
.bwo__sup .bitem:nth-child(5){ grid-column:8 / span 5; }
.bwo__sup .bitem:nth-child(n+6){ grid-column:span 4; }

/* ---------------- 6 · DOS ESCALAS (warm mid stone against graphite; one headline) ---------------- */
.bsc__bg{ --ext:var(--b-ext); background:#2a2827; }
.bsc__half{ position:absolute; top:0; bottom:0; width:50%;   /* (from the blend's top: the chapter's soft edge fades them in; a soft foot into Archivo) */
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 calc(100% - 16vh), transparent 100%); mask-image:linear-gradient(180deg, #000 0%, #000 calc(100% - 16vh), transparent 100%); }
.bsc__half--l{ left:0; background:radial-gradient(70% 50% at 30% 20%, rgba(241,237,231,.05), rgba(241,237,231,0) 70%), linear-gradient(180deg, #554c45 0%, #4e4640 100%); }
.bsc__half--r{ right:0; background:radial-gradient(70% 60% at 70% 30%, rgba(121,82,56,.16), rgba(121,82,56,0) 70%), linear-gradient(180deg, #221f1e 0%, #1e1c1b 100%); }
.bsc__h{ display:block; width:100%; font-size:clamp(2.4rem, 5.4vw, 6.2rem); font-weight:700; line-height:.96; letter-spacing:-.045em; color:var(--b-hi); outline:none; }
.bch--sc .bch__in{ padding-left:0; padding-right:0; }
.bch--sc .bsc__h, .bch--sc .bsc, .bch--sc .bsc__n{ padding-left:var(--b-gut); padding-right:var(--b-gut); }
.bsc__n{ display:block; margin-bottom:clamp(14px,2vh,22px); color:#e2cdb6; }
.bsc__topic{ margin-top:clamp(28px,4vh,44px); color:#e2cdb6; }
.bsc__h1{ display:block; }
.bsc__h2{ display:block; text-align:right; }
.bsc{ position:relative; }
.bsc__grid{ position:relative; display:grid; grid-template-columns:1fr 1fr; margin-top:clamp(48px,8vh,96px); }
.bsc__div{ position:absolute; left:50%; top:-24px; bottom:-24px; width:1px; margin-left:-.5px; background:var(--b-cu-lite); transform-origin:50% 0; }
.bsc__p{ position:relative; padding:0 clamp(24px,5vw,96px) 0 0; grid-row:1; grid-column:1; color:var(--b-hi); }
.bsc__p--wo{ padding:0 0 0 clamp(24px,5vw,96px); grid-column:2; }
.bsc__lab{ display:flex; justify-content:space-between; gap:12px; font-size:.68rem; font-weight:500; letter-spacing:.18em; color:#e2cdb6; }
.bsc__p--wo .bsc__lab{ color:var(--b-cu-lite); }
.bsc__lab span:last-child{ color:#dcd3c9; letter-spacing:.12em; }
.bsc__p--wo .bsc__lab span:last-child{ color:var(--b-tx2); }
.bsc__fig{ margin-top:clamp(26px,4.4vh,52px); font-size:clamp(1.9rem, 2.6vw, 2.8rem);   /* (data, never a second headline) */ font-weight:500; line-height:1; letter-spacing:-.045em; font-variant-numeric:tabular-nums; white-space:nowrap; }
.bsc__name{ margin-top:14px; font-size:.9rem; font-weight:600; }
.bsc__sum{ margin-top:12px; max-width:46ch; font-size:.95rem; line-height:1.58; color:#e4dcd2; }
.bsc__p--wo .bsc__sum{ color:var(--b-tx); }
.bsc__meta{ margin-top:20px; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:#dcd3c9; }
.bsc__p--wo .bsc__meta{ color:var(--b-tx2); }
.bsc__acts{ display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:20px; }
.blink{ display:inline-flex; align-items:center; gap:.55em; padding:6px 0; font-size:.68rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; border-bottom:1px solid currentColor; }
.blink svg{ width:11px; height:11px; fill:none; stroke:currentColor; stroke-width:1.4; transition:transform .35s var(--ease); }
@media (hover:hover){ .blink:hover svg{ transform:translate(2px,-2px); } .bsc__p--co .blink:hover{ color:#f0d9bf; } .bsc__p--wo .blink:hover{ color:var(--b-cu-lite); } }
.bsc__note{ margin-top:clamp(44px,7vh,80px); max-width:calc(50% - clamp(24px,5vw,96px)); font-size:.84rem; line-height:1.55; color:#e4dcd2; }
.bsc__note b{ display:block; margin-bottom:6px; font-size:.62rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:#e2cdb6; }

/* ---------------- 7 · ARCHIVO (graphite and dark stone): the editions on the time axis, then how it is made ---------------- */
.bch--ar .bch__bg{ --ext:0px; -webkit-mask-image:none; mask-image:none; background:linear-gradient(180deg, #2a2827 0%, #2d2a28 60%, #302c29 100%); }
.bar{ display:grid; grid-template-columns:1fr 1fr; align-items:start; }
.bar__side{ padding-right:clamp(32px,6vw,110px); }
.bar__side .bhead{ margin-bottom:clamp(40px,7vh,80px); }
.bar__tl{ position:relative; padding-left:clamp(28px,3.4vw,52px); }
.bar__line{ position:absolute; left:-.5px; top:calc(-1 * var(--b-top)); bottom:0; width:1px; background:var(--b-cu-lite); transform-origin:50% 0; }   /* (from the chapter's top edge: Dos escalas' divider arrives there) */
.bar__e{ position:relative; padding-bottom:clamp(34px,5.6vh,58px); }
.bar__e::before{ content:""; position:absolute; left:calc(-1 * clamp(28px,3.4vw,52px) - 4.5px); top:4px; width:9px; height:9px; border-radius:50%; background:var(--b-2); border:1px solid var(--b-cu-lite); }
.bar__e.is-cur::before{ background:var(--b-cu-lite); }
.bar__wk{ display:flex; flex-wrap:wrap; gap:6px 18px; font-size:.64rem; font-weight:500; letter-spacing:.17em; text-transform:uppercase; color:var(--b-cu-m); }
.bar__wk time{ color:var(--b-tx2); }
.bar__wk i{ font-style:normal; color:var(--b-tx); }
.bar__t{ margin-top:10px; font-size:clamp(1.08rem,1.4vw,1.4rem); font-weight:600; line-height:1.24; letter-spacing:-.016em; color:var(--b-hi); }
.bar__t a{ background-image:linear-gradient(var(--b-cu-lite), var(--b-cu-lite)); background-size:0% 1px; background-position:0 100%; background-repeat:no-repeat; transition:background-size .5s var(--ease); }
@media (hover:hover){ .bar__t a:hover{ background-size:100% 1px; } }
.bar__topics{ display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:10px; font-size:.78rem; color:var(--b-tx2); }
.bar__topics li::before{ content:"/ "; color:var(--b-cu-m); }
.bar__more{ margin-top:6px; padding:12px 0; border:0; border-bottom:1px solid var(--b-tx2); background:none; cursor:pointer; font:500 .68rem/1 var(--font); letter-spacing:.16em; text-transform:uppercase; color:var(--b-tx); }
@media (hover:hover){ .bar__more:hover{ color:var(--b-cu-lite); border-color:var(--b-cu-lite); } }
.bmeth{ position:relative; padding:clamp(24px,2.6vw,36px); background:rgba(174,167,163,.045); }
.bmeth::before{ content:""; position:absolute; left:0; top:0; width:48px; height:1px; background:var(--b-cu-lite); }
.bmeth__t{ font-size:.66rem; font-weight:500; letter-spacing:.2em; color:var(--b-cu-m); }
.bmeth__list{ margin-top:16px; counter-reset:m; }
.bmeth__list li{ position:relative; padding:10px 0 10px 32px; border-top:1px solid var(--b-line); font-size:.86rem; line-height:1.52; color:var(--b-tx2); counter-increment:m; }
.bmeth__list li::before{ content:counter(m, decimal-leading-zero); position:absolute; left:0; top:12px; font-size:.62rem; font-weight:500; letter-spacing:.1em; color:var(--b-cu-m); }
.bmeth__fix{ margin-top:16px; font-size:.86rem; line-height:1.6; color:var(--b-tx2); }
.bmeth__talk{ padding:0; border:0; border-bottom:1px solid var(--b-cu-lite); background:none; cursor:pointer; font:inherit; font-weight:600; color:var(--b-tx); }
@media (hover:hover){ .bmeth__talk:hover{ color:var(--b-cu-lite); } }
.bfoot{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:clamp(70px,12vh,140px); padding-top:20px; border-top:1px solid var(--b-line);
  font-size:.6rem; font-weight:500; letter-spacing:.17em; text-transform:uppercase; color:var(--b-tx2); }
.bch--ar .bch__in{ padding-bottom:56px; }

/* ---------------- one item (#blog/<slug>): the same dark palette, calmer type ---------------- */
.bart{ position:absolute; inset:0; z-index:4; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain;
  background:radial-gradient(50% 36% at 86% 8%, rgba(121,82,56,.12) 0%, rgba(121,82,56,0) 70%), linear-gradient(180deg, #232120 0%, #262423 100%); color:var(--b-tx);
  scrollbar-width:thin; scrollbar-color:rgba(174,167,163,.28) transparent; }
.bart[hidden]{ display:none; }
.blog.is-art .bnav{ visibility:hidden; }
.blog.is-art-on .blog__scroll{ visibility:hidden; }
.bart__in{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:clamp(16px,2vw,32px); padding:clamp(104px,13vh,130px) var(--b-gut) 80px; max-width:1640px; margin:0 auto; }
.bart__back{ grid-column:1 / -1; justify-self:start; display:inline-flex; align-items:center; gap:.7em; padding:8px 0; font-size:.68rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--b-tx); border-bottom:1px solid var(--b-line2); }
.bart__back svg{ width:14px; height:10px; fill:none; stroke:currentColor; stroke-width:1.4; transition:transform .35s var(--ease); }
@media (hover:hover){ .bart__back:hover{ color:var(--b-cu-lite); border-color:var(--b-cu-lite); } .bart__back:hover svg{ transform:translateX(-3px); } }
.bart__head{ grid-column:1 / span 9; margin-top:clamp(40px,7vh,80px); }
.bart__h{ margin-top:18px; font-size:clamp(2rem, 3.6vw, 3.9rem); font-weight:600; line-height:1.04; letter-spacing:-.034em; color:var(--b-hi); text-wrap:balance; outline:none; }
.bart__deck{ margin-top:clamp(18px,3vh,28px); max-width:60ch; font-size:clamp(1.02rem,1.2vw,1.2rem); line-height:1.55; color:var(--b-tx); }
.bart__meta{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:14px clamp(22px,3vw,48px); margin-top:clamp(28px,5vh,48px); padding:16px 0; border-top:1px solid var(--b-line); border-bottom:1px solid var(--b-line); }
.bart__meta div{ display:grid; gap:6px; }
.bart__meta dt{ font-size:.58rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--b-cu-m); }
.bart__meta dd{ font-size:.86rem; color:var(--b-tx); }
.bart__meta a{ border-bottom:1px solid rgba(192,138,87,.5); }
.bart__vis{ grid-column:1 / span 5; margin-top:clamp(48px,8vh,90px); margin-left:12px; margin-right:12px; }
.bart__vis .bvis{ --ar:4 / 5; }
.bart__cap{ margin-top:16px; font-size:.7rem; line-height:1.5; color:var(--b-tx2); }
.bart__body{ grid-column:7 / -1; margin-top:clamp(48px,8vh,90px); }
.bart__sec + .bart__sec{ margin-top:clamp(36px,5vh,56px); }
.bart__st{ font-size:.66rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--b-cu-m); }
.bart__p{ margin-top:14px; font-size:clamp(1rem,1.1vw,1.1rem); line-height:1.66; color:var(--b-tx); max-width:62ch; }
.bart__pts{ margin-top:14px; }
.bart__pts li{ position:relative; padding:12px 0 12px 30px; border-top:1px solid var(--b-line); font-size:.98rem; line-height:1.56; color:var(--b-tx); }
.bart__pts li::before{ content:""; position:absolute; left:0; top:1.25em; width:16px; height:1px; background:var(--b-cu-lite); }
.bart__why{ padding:clamp(22px,3vw,34px); background:rgba(174,167,163,.05); border-left:1px solid var(--b-cu-lite); }
.bart__ind{ display:grid; gap:6px; margin-top:14px; }
.bart__ind b{ font-size:clamp(2.2rem,3.4vw,3.2rem); font-weight:500; letter-spacing:-.04em; line-height:1; color:var(--b-hi); }
.bart__ind span{ font-size:.84rem; color:var(--b-tx2); }
.bart__src{ display:inline-flex; align-items:center; gap:.8em; margin-top:clamp(36px,5vh,56px); padding:15px 22px; border:1px solid rgba(192,138,87,.7); color:var(--b-hi); font-size:.68rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; transition:background .3s, border-color .3s; }
.bart__src svg{ width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.4; transition:transform .35s var(--ease); }
@media (hover:hover){ .bart__src:hover{ background:var(--b-cu); border-color:var(--b-cu); } .bart__src:hover svg{ transform:translate(2px,-2px); } }
.bart__src:focus-visible{ outline-offset:4px; }
.bart__note{ margin-top:18px; font-size:.76rem; line-height:1.55; color:var(--b-tx2); max-width:60ch; }
.bart__rel{ grid-column:1 / -1; margin-top:clamp(70px,11vh,130px); padding-top:24px; border-top:1px solid var(--b-line); }
.bart__rel ol{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(24px,3vw,48px); margin-top:22px; }
.bart__rel .bitem__t{ --ts:clamp(1.04rem,1.24vw,1.24rem); }
.bart__nf{ grid-column:1 / -1; margin-top:clamp(40px,7vh,80px); max-width:22ch; font-size:clamp(1.6rem,3vw,2.8rem); line-height:1.08; color:var(--b-hi); }

/* ---------------- tablet (landscape): the same landscape, the letters a little closer and more cut; after the cover
   the chapters' compact control (on the cover, the same line across the scene, in the flow: it scrolls away with the
   cover, fading before the bar, and the control comes in at the foot of the screen as it goes: blog.js, --nl, --nt) ---------------- */
@media (max-width:1100px){
  .bl--r{ --h:min(72vh, 54vw); --b:103vh; --x:-11vw; }
  .bl--e{ --h:min(48vh, 36vw); --b:68vh;  --x:25vw; }
  .bl--a{ --h:min(56vh, 42vw); --b:91vh;  --x:51vw; }
  .bl--l{ --h:min(72vh, 54vw); --b:97vh;  --x:79vw; }
  .bnav{ --bn-h:34px; position:relative; top:auto; padding:0; }
  .bnav::before{ display:none; }
  .bnav__toggle{ position:fixed; left:50%; bottom:max(14px, env(safe-area-inset-bottom)); transform:translateX(-50%); opacity:var(--nt, 1);
    display:inline-flex; align-items:center; gap:.55em; height:38px; padding:0 16px; border:1px solid rgba(174,167,163,.2); border-radius:999px; cursor:pointer; pointer-events:auto;
    background:rgba(30,29,28,.86); color:var(--b-hi); font:500 .64rem/1 var(--font); letter-spacing:.17em; text-transform:uppercase; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); -webkit-tap-highlight-color:transparent; white-space:nowrap; }
  .bnav__toggle .bnav__s{ color:var(--b-cu-lite); opacity:1; }
  .bnav__chev{ width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.4; transition:transform .3s var(--ease); }
  .bnav__toggle[aria-expanded="true"] .bnav__chev{ transform:rotate(180deg); }
  .bnav__list{ position:fixed; left:50%; bottom:calc(max(14px, env(safe-area-inset-bottom)) + 48px); height:auto; display:none; flex-direction:column; justify-content:flex-start; align-items:stretch; gap:0; min-width:220px; padding:8px; border-radius:16px; transform:translateX(-50%);
    background:rgba(30,29,28,.96); border:1px solid rgba(174,167,163,.16); box-shadow:0 24px 60px -30px rgba(0,0,0,.7); }
  .bnav.is-open .bnav__list{ display:flex; }
  .bnav .bnav__a{ width:100%; padding:13px 14px; }
  .bnav .bnav__a::after{ left:calc(14px + 1.1em); bottom:7px; }
  /* the line (on the cover): one row that scrolls sideways when it is wider than the screen (no bar shown), nothing
     behind it; the control waits */
  .bnav.is-line .bnav__toggle, .bnav.is-dim .bnav__toggle{ visibility:hidden; }
  .bnav.is-line .bnav__list{ position:relative; left:auto; bottom:auto; height:100%; display:flex; flex-direction:row; justify-content:space-between; align-items:center; gap:26px; min-width:0;
    padding:0 var(--b-gut); border:0; border-radius:0; background:none; box-shadow:none; transform:none; opacity:var(--nl, 1);
    overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scrollbar-width:none; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; scroll-padding-inline:var(--b-gut); }
  .bnav.is-line .bnav__list::-webkit-scrollbar{ display:none; }
  .bnav.is-line .bnav__list > li{ flex:none; scroll-snap-align:start; }
  .bnav.is-line .bnav__a{ width:auto; padding:11px 0; }
  .bnav.is-line .bnav__a::after{ left:1.1em; bottom:4px; }
  .bch__in{ padding-top:108px; }
  .bar__line{ top:-108px; }
  .bcols{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .bcols .bcol:nth-child(3){ grid-column:1 / -1; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:inherit; margin-top:clamp(72px,10vh,120px); }
  .bcols--co .bcol:nth-child(3){ margin-top:clamp(72px,10vh,120px); }
  .bpano__vis--a{ grid-column:1 / span 6; }
  .bpano__txt{ grid-column:7 / -1; }
  .bpano__why{ grid-column:1 / span 6; }
  .bpano__vis--b{ grid-column:8 / -1; }
  .bnum{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .bnum__i:nth-child(3n+2){ margin-top:0; }
  .bnum__i:nth-child(even){ margin-top:clamp(40px,7vh,90px); }
  .bwo__lead .bitem__vis{ grid-column:1 / span 7; }
  .bwo__lead .bwo__txt{ grid-column:8 / -1; }
  .bwo__sup .bitem:nth-child(n){ grid-column:span 6; margin-top:0; }
  .bart__vis{ grid-column:1 / span 6; } .bart__body{ grid-column:1 / -1; } .bart__head{ grid-column:1 / -1; }
}
@media (max-width:900px){
  .bart__in{ padding-top:96px; }
  /* the cover on tablets held upright and on phones: the letters in two rows (R and E above, A and L below, never a
     row), deeper than wide; the line crosses them at mid-height; the copy on the floor: the headline centred, the body
     under it, then the two corners (the edition, the status and the disclaimer) as the last line */
  .bcov__in{ --mast:clamp(84px, 11vh, 104px); --foot:max(18px, env(safe-area-inset-bottom)); }
  .bcov__h1{ font-size:clamp(1.625rem, 7.6vw, 2rem); max-width:none; }
  .bcov__body{ width:min(30em, 100%); margin-top:12px; font-size:.8125rem; line-height:1.5; }
  .bcov__foot{ position:relative; left:auto; right:auto; bottom:auto; width:100%; margin-top:18px; gap:14px; }
  .bcov__ed{ flex-direction:column; gap:2px; max-width:38%; font-size:.56rem; letter-spacing:.1em; }
  .bcov__note{ max-width:58%; gap:4px; }
  .bcov__status{ font-size:.54rem; letter-spacing:.08em; }
  .bcov__disc{ font-size:.54rem; letter-spacing:.08em; }
  .bcov__cue{ display:none; }
  .bcov__floor{ height:52%; }
  .bl--r{ --h:min(68vw, 31vh); --b:50vh; --x:-12vw; --r:-6deg; --bl:.8px; }
  .bl--e{ --h:min(46vw, 21vh); --b:40vh; --x:54vw;  --r:8deg;  --bl:2px; }
  .bl--a{ --h:min(62vw, 28vh); --b:72vh; --x:14vw;  --r:-2deg; }
  .bl--l{ --h:min(78vw, 35vh); --b:76vh; --x:64vw;  --r:4deg;  --bl:.6px; }
}

/* ---------------- phones: one editorial column (not identical cards) ---------------- */
@media (max-width:600px){
  .blog{ --b-ext:13vh; }
  .bch__in{ padding-bottom:16vh; }
  .bhead{ margin-bottom:48px; }
  .bhead--r{ margin-left:0; }
  .bcols{ display:flex; flex-direction:column; gap:72px; }
  .bcol, .bcols .bcol:nth-child(3){ display:contents; }
  .bitem--odd{ margin-left:14vw; }
  .bitem--odd .bitem__vis{ max-width:78%; }
  .bitem--s .bitem__vis{ max-width:62%; }
  .bpano{ display:flex; flex-direction:column; }
  .bpano__vis--a{ width:84%; margin-left:12px; }
  .bpano__txt{ margin-top:44px; padding-top:0; }
  .bpano__why{ margin-top:56px; }
  .bpano__vis--b{ width:68%; align-self:flex-end; margin-top:48px; margin-right:12px; }
  .bnum{ grid-template-columns:1fr; row-gap:60px; }
  .bnum__i:nth-child(n){ margin-top:0; }
  .bnum__i:nth-child(even){ margin-left:10vw; }
  .bwo, .bwo__lead, .bwo__sup{ display:flex; flex-direction:column; }
  .bwo__lead .bitem__vis{ margin:12px 12px 0; }
  .bwo__lead .bwo__txt{ margin-top:26px; }
  .bwo__sup{ gap:56px; margin-top:72px; }
  .bwo__sup .bitem:nth-child(even){ margin-left:12vw; }
  .bsc__h{ font-size:clamp(2.1rem, 10.6vw, 3.4rem); }
  .bsc__h2{ text-align:left; }
  .bsc__half{ width:100%; }
  .bsc__half--l{ top:0; bottom:auto; height:calc(var(--ext) + var(--sc-split, 60%)); -webkit-mask-image:none; mask-image:none; }
  .bsc__half--r{ top:auto; bottom:0; height:calc(100% - var(--ext) - var(--sc-split, 60%)); }
  .bsc__grid{ grid-template-columns:1fr; margin-top:40px; }
  .bsc__p--wo{ grid-column:1; grid-row:2; }
  .bsc__div{ display:none; }
  .bsc__p, .bsc__p--wo{ padding:0; }
  .bsc__p--wo{ margin-top:22vh; }
  .bsc__fig{ font-size:clamp(1.8rem, 9vw, 2.3rem); }
  .bsc__note{ position:relative; margin-top:48px; max-width:none; color:var(--b-tx); }
  .bsc__note b{ color:var(--b-cu-lite); }
  .bar{ grid-template-columns:1fr; }
  .bar__side{ padding-right:0; }
  .bar__tl{ margin-top:56px; }
  .bar__line{ top:0; }
  .bart__vis{ grid-column:1 / -1; max-width:78%; }
  .bart__meta{ gap:14px 26px; }
  .bart__rel ol{ grid-template-columns:1fr; }
}
@media (max-width:360px){
  .bcov__body{ font-size:.78rem; line-height:1.46; }
  .bcov__ed{ max-width:44%; letter-spacing:.08em; }
  .bcov__ed > *{ white-space:nowrap; }
  .bcov__note{ max-width:54%; }
}
/* the shortest phones (320 x 568, 375 x 667): the letters smaller and higher, clear of the eyebrow above and of the
   copy's band below */
@media (max-width:600px) and (max-height:700px){
  .bl--r{ --h:min(58vw, 27vh); --b:46vh; }
  .bl--e{ --h:min(42vw, 19vh); --b:40vh; }
  .bl--a{ --h:min(54vw, 25vh); --b:63vh; }
  .bl--l{ --h:min(68vw, 31vh); --b:65vh; }
}
/* the narrowest of them: the body cannot keep to three lines at a legible size, so it stays off the first screen
   (still read by assistive technology); the headline stands alone on the floor */
@media (max-width:340px) and (max-height:700px){
  .bcov__body{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
}

/* ---------------- reduced motion: everything in place, short fades only ---------------- */
@media (prefers-reduced-motion:reduce){
  .bnav__a::after, .bitem__t, .bvis svg, .bframe__c, .blink svg, .bart__back svg, .bart__src svg{ transition:none; }
  .blog.is-live .bl__g, .blog.is-live .bcov__cue{ animation:none; }
  .bch.is-calm{ opacity:0; transition:opacity .25s linear; }
  .bch.is-calm.is-seen{ opacity:1; }
}