/* The World's Best (/worlds-best/...). Shared by every generated list page.
   Chrome (nav, mobile menu, footer) mirrors cities.html; the list is its own. */
:root{
  --bg:#FAF9F6;--bg-2:#EFEDE7;--ink:#14130F;--ink-2:#3A3833;--muted:#6E6A60;--muted-2:#9A948A;
  --blue:#236C9B;--gold:#9C6F12;--line:rgba(0,0,0,0.12);--line-strong:rgba(0,0,0,0.20);--dash:rgba(0,0,0,0.26);
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.eyebrow{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--muted-2)}

/* nav (cities.html) */
.nav{position:fixed;top:0;left:0;right:0;z-index:30;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;
  padding:11px clamp(18px,4vw,44px);background:rgba(250,249,246,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-left,.nav-right{display:flex;align-items:center;gap:26px}
.nav-right{justify-content:flex-end}
.navlink{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);transition:color .2s}
.navlink:hover,.navlink.active{color:var(--ink)}
.nav .brand{font-family:'Archivo',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.3em;text-indent:.3em;font-size:14px;white-space:nowrap}
.navcta{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:9px 18px;background:var(--blue);
  border:1px solid var(--blue);border-radius:999px;color:#fff}
.navcta:hover{background:#1B567C;border-color:#1B567C}
.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;background:transparent;border:0;cursor:pointer;padding:9px}
.hamburger span{display:block;height:2px;width:22px;background:var(--ink);border-radius:2px}
.mobile-menu{position:fixed;inset:0;z-index:60;background:rgba(250,249,246,.98);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:26px;opacity:0;pointer-events:none;transition:opacity .3s}
.mobile-menu.open{opacity:1;pointer-events:auto}
.mobile-menu a{font-family:'Archivo',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:28px}
.mobile-menu a.mm-cta{font-family:'Inter',sans-serif;font-weight:600;font-size:13px;letter-spacing:.16em;padding:14px 30px;background:var(--blue);border-radius:999px;color:#fff}
.mm-close{position:absolute;top:18px;right:22px;width:44px;height:44px;background:transparent;border:0;font-size:30px;cursor:pointer}
@media(max-width:1240px){.nav-left .navlink,.nav-right .navlink,.nav .navcta{display:none}.hamburger{display:flex}}

/* header + filter */
.wb-head{padding:clamp(120px,16vh,170px) 16px clamp(30px,4vw,44px);text-align:center;border-bottom:1px dashed var(--dash)}
.wb-head h1{font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:-.02em;line-height:1.02;font-size:clamp(38px,6.4vw,78px);margin-top:18px}
.wb-head p{font-family:'Lora',Georgia,serif;color:var(--muted);font-size:clamp(16px,1.8vw,19px);line-height:1.6;max-width:620px;margin:18px auto 0}
/* THE SENTENCE FILTER: "Show me the best [places] in [the world]". Each word
   is a button that opens a custom panel (worlds-best.js): native menus were
   tried and looked wild. Panels are paper, a hairline and square corners. */
.wb-head .wb-sentence{font-family:'Archivo',sans-serif;font-weight:700;font-size:clamp(21px,2.4vw,30px);letter-spacing:-.01em;
  line-height:1.6;color:var(--ink);margin:24px auto 0;max-width:900px}
.wb-sel{display:inline-block;position:relative;white-space:nowrap}
.wb-word{font:inherit;font-weight:800;color:var(--blue);background:none;border:0;border-bottom:2px dashed var(--blue);
  padding:0 22px 0 0;cursor:pointer;position:relative;line-height:1.25}
.wb-word::after{content:'';position:absolute;right:4px;top:50%;width:7px;height:7px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:translateY(-75%) rotate(45deg);transition:transform .2s}
.wb-word[aria-expanded="true"]::after{transform:translateY(-25%) rotate(-135deg)}
.wb-word:hover{color:#16527a}
.wb-word:focus-visible{outline:2px solid var(--blue);outline-offset:4px}

.wb-pop{position:absolute;z-index:40;top:calc(100% + 12px);left:50%;transform:translateX(-50%);background:var(--bg);
  border:1px solid var(--line-strong);box-shadow:0 18px 50px rgba(20,19,15,.14);text-align:left;white-space:normal;
  font-family:'Inter',sans-serif;font-size:14px;font-weight:500;letter-spacing:0;line-height:1.3}
.wb-pop[hidden]{display:none}
.wb-pop-fam{width:min(440px,92vw);display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:8px}
.wb-pop-cty{width:min(320px,92vw);padding:0}
.wb-opt{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;padding:10px 12px;color:var(--ink-2);
  font:inherit;text-align:left;cursor:pointer}
.wb-opt svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.wb-opt:hover,.wb-opt.hi{background:var(--bg-2);color:var(--ink)}
.wb-opt.on{color:var(--blue);font-weight:600}
.wb-opt:disabled{opacity:.3;cursor:default;background:none}
.wb-opt[data-hide]{display:none}
.wb-find{display:block;width:100%;border:0;border-bottom:1px solid var(--line);background:none;padding:14px 16px;
  font:inherit;font-size:15px;color:var(--ink);outline:none}
.wb-find::placeholder{color:var(--muted-2)}
.wb-opts{max-height:300px;overflow-y:auto;padding:6px;overscroll-behavior:contain}
.wb-none{padding:14px 16px;color:var(--muted);font-family:'Lora',Georgia,serif;font-style:italic}
/* On a phone the panel is a bottom sheet: an absolute panel under a word in
   mid-sentence would hang off the screen edge. */
@media(max-width:600px){
  .wb-pop{position:fixed;top:auto;bottom:0;left:0;right:0;transform:none;width:auto;max-height:70vh;overflow-y:auto;
    border:0;border-top:1px solid var(--line-strong);box-shadow:0 -12px 40px rgba(20,19,15,.18);padding-bottom:env(safe-area-inset-bottom)}
  .wb-pop-fam{width:auto;padding:12px}
  .wb-pop-cty{width:auto}
  .wb-opts{max-height:50vh}
  .wb-opt{padding:13px 12px;font-size:15px}
}

/* THE CATEGORY ROW. Always visible, so browsing is a tap rather than a
   dropdown; the headline select and this row stay in step (worlds-best.js).
   Icons are the globe's family bar. Scrolls sideways on a phone. */
.wb-cats{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:1100px;margin:30px auto 0}
.wb-cat{display:inline-flex;align-items:center;gap:8px;font-family:'Inter',sans-serif;font-size:13px;font-weight:500;color:var(--ink-2);
  background:none;border:1px solid var(--line-strong);border-radius:999px;padding:8px 15px 8px 12px;cursor:pointer;
  transition:border-color .2s,background .2s,color .2s}
.wb-cat svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.wb-cat:hover{border-color:var(--ink);color:var(--ink)}
.wb-cat.on{background:var(--ink);border-color:var(--ink);color:#fff}
.wb-cat:disabled{opacity:.32;cursor:default;border-color:var(--line)}
.wb-cat:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
@media(max-width:760px){
  .wb-cats{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;margin:24px -16px 0;padding:0 16px 4px;scrollbar-width:none}
  .wb-cats::-webkit-scrollbar{display:none}
  .wb-cat{flex:none}
}

/* THE MASTHEAD: title, italic standfirst, mono byline, as a feature opens. */
.wb-head .wb-stand{font-family:'Lora',Georgia,serif;font-style:italic;color:var(--ink-2);font-size:clamp(18px,2vw,23px);line-height:1.5;
  max-width:640px;margin:18px auto 0}
.wb-by{margin-top:16px;font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)}
.wb-by span{margin:0 8px}

/* THE LIST (wb-page.mjs item(), mirrored by row() in worlds-best.js), set as
   an issue of a magazine: No. 01 is the cover, then parts of five, each opened
   by a contents line, through a rhythm of spread, mirrored spread, diptych and
   closing plate. Country-page type: Archivo capitals, Lora prose, Space Mono.

   THE GRID. The list is one 14-track grid: a flexible outer track either side
   (the bleed) and twelve columns capped at 86px between them. Every entry is a
   subgrid of it, so a photograph can run to the page edge on one side while
   its text still sits on the same twelve columns as everything else. */
.wbx{--gap:clamp(14px,2vw,28px);list-style:none;display:grid;
  grid-template-columns:minmax(0,1fr) repeat(12,minmax(0,86px)) minmax(0,1fr);
  column-gap:var(--gap);row-gap:clamp(88px,11vw,168px);padding:clamp(40px,5vw,72px) 0 clamp(90px,10vw,150px)}
.wbx > li{grid-column:1/-1;display:grid;grid-template-columns:subgrid}
.wbx a{color:inherit}
.wbx-in{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:center}

/* ---- shared parts ---- */
.wbx-ph{margin:0;position:relative}
.wbx-img{position:relative;overflow:hidden;background:var(--bg-2);aspect-ratio:4/3}
.wbx-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block;
  transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.wbx-in:hover .wbx-img img{transform:scale(1.035)}
.wbx-img .map{object-fit:cover;filter:saturate(.85)}
.wbx-plate{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.wbx-ph figcaption{display:flex;gap:14px;align-items:baseline;justify-content:space-between;padding:11px 0 0;
  font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2)}
.wbx-pick{color:var(--gold);letter-spacing:.22em}

.wbx-no{display:block;font-family:'Archivo',sans-serif;font-weight:900;line-height:.78;letter-spacing:-.04em;
  font-size:clamp(84px,10vw,168px);color:transparent;-webkit-text-stroke:1.2px var(--ink-2);margin-bottom:clamp(18px,2vw,28px)}
.wbx-kick{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--blue)}
.wbx h3{font-family:'Archivo',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:-.005em;line-height:.98;
  font-size:clamp(30px,3.5vw,52px);margin-top:14px;text-wrap:balance}
.wbx-txt p{font-family:'Lora',Georgia,serif;font-size:clamp(16.5px,1.35vw,18.5px);line-height:1.66;color:var(--ink-2);
  margin-top:20px;max-width:46ch;text-wrap:pretty}
.wbx-drop p::first-letter{float:left;font-family:'Archivo',sans-serif;font-weight:800;font-size:3.6em;line-height:.8;
  padding:.07em .1em 0 0;color:var(--ink)}
.wbx-more{display:inline-block;margin-top:22px;font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue);padding-bottom:4px;border-bottom:1px dashed var(--blue);transition:color .2s,border-color .2s}
.wbx-in:hover .wbx-more{color:#16527a;border-bottom-style:solid}

/* ---- THE COVER (No. 01): the photograph edge to edge, the title centred
   beneath it and set the size of a cover line. No text on the photograph. */
.wbx-cover .wbx-ph{grid-column:1/-1}
.wbx-cover .wbx-img{aspect-ratio:16/8;max-height:84vh;width:100%}
.wbx-cover figcaption{padding-left:16px;padding-right:16px}
.wbx-cover .wbx-txt{grid-column:3/13;text-align:center;padding-top:clamp(34px,4vw,56px)}
/* The cover carries the same outlined numeral as every other entry, centred. */
.wbx-cover .wbx-no{margin-left:auto;margin-right:auto}
.wbx-cover .wbx-kick{letter-spacing:.32em}
.wbx-cover h3{font-size:clamp(46px,8.4vw,128px);letter-spacing:-.02em;line-height:.9;margin-top:20px}
.wbx-cover .wbx-txt p{font-style:italic;font-size:clamp(19px,1.9vw,25px);line-height:1.5;color:var(--muted);max-width:36ch;margin:24px auto 0}

/* ---- THE PART OPENER: a dashed rule, the part numeral, and a contents line
   of the five names that follow, so the long list reads in sections. */
.wbx > li.wbx-part{grid-column:2/14;display:grid;grid-template-columns:auto 1fr;column-gap:clamp(20px,3vw,48px);align-items:end;
  border-top:1px dashed var(--dash);padding-top:clamp(22px,2.6vw,34px);margin-bottom:calc(clamp(88px,11vw,168px) * -.45)}
.wbx-part .pn{font-family:'Archivo',sans-serif;font-weight:900;font-size:clamp(54px,6vw,92px);line-height:.8;letter-spacing:-.02em}
.wbx-part .pl{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.wbx-part ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px 0;font-family:'Lora',Georgia,serif;font-style:italic;
  font-size:clamp(15px,1.3vw,17.5px);color:var(--ink-2);line-height:1.45}
.wbx-part ol li:not(:last-child)::after{content:'/';color:var(--muted-2);font-style:normal;margin:0 .7em}
.wbx-part ol b{font-family:'Space Mono',monospace;font-style:normal;font-weight:400;font-size:.68em;letter-spacing:.12em;color:var(--muted-2);margin-right:.5em}

/* ---- THE SPREAD: the photograph runs off the left edge of the page, the
   text sits in the last four columns. .wbx-rev mirrors it off the right. */
.wbx-spread .wbx-ph{grid-column:1/9}
.wbx-spread .wbx-img{aspect-ratio:5/4}
.wbx-spread figcaption{padding-left:16px}
.wbx-spread .wbx-txt{grid-column:10/14}
.wbx-rev .wbx-ph{grid-column:7/15;grid-row:1}
.wbx-rev figcaption{padding-left:0;padding-right:16px}
.wbx-rev .wbx-txt{grid-column:2/6;grid-row:1}

/* ---- THE DIPTYCH: two portrait plates on the page at once, the second set
   lower, a dashed rule between them. */
.wbx > li.wbx-duo{grid-column:2/8;display:block}
.wbx > li.wbx-duo + li.wbx-duo{grid-column:8/14;margin-top:clamp(90px,12vw,190px);
  border-left:1px dashed var(--dash);padding-left:var(--gap);margin-left:calc(var(--gap) * -.5)}
.wbx-duo .wbx-in{display:block}
.wbx-duo .wbx-img{aspect-ratio:4/5}
.wbx-duo .wbx-txt{padding-top:28px}
.wbx-duo .wbx-no{font-size:clamp(64px,6.4vw,104px);margin-bottom:16px}
.wbx-duo h3{font-size:clamp(26px,2.6vw,38px)}

/* ---- THE PLATE: a letterbox photograph edge to edge, then three columns
   beneath it: the numeral, the name, the text. The closing image of a part. */
.wbx-plate-row .wbx-in{align-items:start}
.wbx-plate-row .wbx-ph{grid-column:1/-1}
.wbx-plate-row .wbx-img{aspect-ratio:21/9;max-height:80vh}
.wbx-plate-row figcaption{padding-left:16px;padding-right:16px}
.wbx-plate-row .wbx-txt{grid-column:2/14;display:grid;grid-template-columns:subgrid;padding-top:clamp(30px,3.4vw,48px);align-items:start}
.wbx-plate-row .wbx-no{grid-column:1/3;grid-row:1/4;margin:0}
.wbx-plate-row .wbx-kick{grid-column:3/8;grid-row:1}
.wbx-plate-row h3{grid-column:3/8;grid-row:2;font-size:clamp(34px,4.2vw,64px)}
.wbx-plate-row .wbx-body{grid-column:8/13;grid-row:1/4}
.wbx-plate-row .wbx-txt p{margin-top:0}

/* ---- the reveal: each entry rises in once as it arrives. */
.wbx [data-rv]{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
.wbx [data-rv].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.wbx [data-rv]{opacity:1;transform:none;transition:none}.wbx-img img{transition:none}}

@media(max-width:1000px){
  .wbx-spread .wbx-ph{grid-column:1/8}
  .wbx-spread .wbx-txt{grid-column:9/14}
  .wbx-rev .wbx-ph{grid-column:8/15}
  .wbx-rev .wbx-txt{grid-column:2/7}
}

/* ---- PHONE: the issue keeps its rhythm rather than collapsing to one
   column of identical blocks. The list is a two-column grid: the cover and
   the plate run edge to edge, a spread bleeds off ONE edge (the mirrored
   spread off the other, its text set to the right), and the diptych stays
   two portrait plates side by side, the second still set lower. */
@media(max-width:760px){
  .wbx{grid-template-columns:1fr 1fr;column-gap:12px;row-gap:64px;padding-top:28px}
  .wbx > li{grid-column:1/-1;display:block;scroll-margin-top:64px}
  .wbx-in{display:block}
  .wbx > li.wbx-part{grid-column:1/-1;margin:0 16px -20px;display:block;padding-top:22px}
  .wbx-part .pn{font-size:48px;margin-bottom:12px}
  .wbx-txt,.wbx-cover .wbx-txt,.wbx-plate-row .wbx-txt{display:block;padding:22px 16px 0}
  .wbx-ph figcaption,.wbx-rev figcaption{padding:10px 16px 0}
  .wbx-no{font-size:64px;margin-bottom:12px}
  .wbx h3{font-size:30px}
  .wbx-txt p{margin-top:14px}
  /* the cover: a tall portrait, edge to edge */
  .wbx-cover .wbx-img{aspect-ratio:4/5;max-height:74vh}
  .wbx-cover h3{font-size:clamp(40px,12vw,56px)}
  /* the spread bleeds off the left edge, with paper to its right; the
     mirrored spread bleeds off the right */
  .wbx-spread .wbx-img{aspect-ratio:4/3;margin-right:32px}
  .wbx-rev .wbx-img{margin-right:0;margin-left:32px}
          /* the diptych: two portrait plates side by side, the second set lower */
  .wbx > li.wbx-duo{grid-column:auto;margin:0;padding:0;border:0}
  .wbx > li.wbx-duo + li.wbx-duo{grid-column:auto;margin-top:56px;margin-left:0;padding-left:0;border:0}
  .wbx-duo .wbx-img{aspect-ratio:4/5}
  .wbx-duo .wbx-txt{padding:16px 0 0 16px}
  .wbx-duo + .wbx-duo .wbx-txt{padding:16px 16px 0 0}
  .wbx-duo .wbx-ph figcaption{padding:8px 0 0 16px;font-size:9.5px;letter-spacing:.12em}
  .wbx-duo + .wbx-duo figcaption{padding:8px 16px 0 0}
  .wbx-duo .wbx-no{font-size:44px;margin-bottom:8px}
  .wbx-duo h3{font-size:20px}
  .wbx-duo .wbx-kick{font-size:9.5px;letter-spacing:.18em}
  .wbx-duo .wbx-txt p{font-size:14.5px;line-height:1.5;margin-top:10px}
  .wbx-duo .wbx-more{margin-top:14px;font-size:10.5px}
  /* the plate: a letterbox, edge to edge, then the three parts stacked */
  .wbx-plate-row .wbx-img{aspect-ratio:16/10}
  .wbx-plate-row .wbx-no{margin-bottom:12px}
  .wbx-plate-row .wbx-txt p{margin-top:14px}
}

footer{background:#08090C;padding:60px clamp(20px,6vw,90px) 50px;color:#8C8F98}
.foot-top{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
.foot-mark{font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:.26em;text-transform:uppercase;font-size:15px;color:#F4F4F2}
.foot-mark + p{font-family:'Lora',Georgia,serif;font-size:14px;margin-top:12px;max-width:280px;line-height:1.65}
.foot-links{display:flex;gap:40px;flex-wrap:wrap}
.foot-col h5{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#5E626C;margin-bottom:14px}
.foot-col a{display:block;font-size:14px;margin-bottom:10px}
.foot-col a:hover{color:#F4F4F2}
.foot-bottom{margin-top:50px;padding-top:24px;border-top:1px solid rgba(255,255,255,.09);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:#5E626C;font-size:12px}
.wb-opt[data-off]{display:none}

/* THE EXPLORE BAND (worlds-best.js explore()). The dispatch footer's Explore
   band, same tiles (.xtile: photo, scrim, uppercase name on the image) and
   head, so the site has one explore language. Widened from its three tiles to
   five: a tall lead tile and a two-by-two beside it. Replaces the App CTA when
   a country or a category is chosen. */
.wb-explore{border-top:1px dashed var(--dash);padding:clamp(56px,8vw,100px) 0 clamp(60px,8vw,100px)}
.wb-explore[hidden]{display:none}
.more-head{text-align:center;margin-bottom:clamp(32px,4vw,46px);padding:0 16px}
.more-head h3{font-family:'Archivo',sans-serif;font-weight:800;font-size:clamp(26px,3.4vw,42px);letter-spacing:-.015em;margin-top:12px;color:var(--ink)}
.xgrid{width:min(1240px,calc(100vw - 32px));margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;
  grid-template-rows:repeat(2,clamp(190px,19vw,270px));gap:clamp(12px,1.6vw,20px)}
.xtile{position:relative;display:block;overflow:hidden;color:inherit;background:var(--bg-2)}
.xtile:nth-child(1){grid-row:1 / span 2}
.xtile:nth-child(1) h4{font-size:clamp(24px,2.6vw,38px)}
.xtile:nth-child(1) p{font-size:clamp(14px,1.1vw,16px);max-width:40ch}
.xtile .img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.xtile:hover .img{transform:scale(1.05)}
.xtile .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,9,12,0) 32%,rgba(8,9,12,.74))}
.xtile .body{position:absolute;left:0;right:0;bottom:0;padding:clamp(16px,1.7vw,28px)}
.xtile .ce{display:block;margin-bottom:8px;color:rgba(255,255,255,.82);letter-spacing:.2em}
.xtile h4{font-family:'Archivo',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.01em;font-size:clamp(16px,1.5vw,22px);line-height:1.06;color:#fff}
.xtile p{font-family:'Lora',Georgia,serif;font-size:clamp(13px,1vw,14.5px);line-height:1.5;color:rgba(255,255,255,.85);margin-top:8px;max-width:34ch;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Fewer than five: the lead tile still spans both rows, the rest fill in. */
.xgrid[data-tiles="1"]{grid-template-columns:1fr;grid-template-rows:clamp(260px,30vw,420px)}
.xgrid[data-tiles="2"]{grid-template-columns:1.3fr 1fr;grid-template-rows:clamp(220px,24vw,320px)}
.xgrid[data-tiles="2"] .xtile:nth-child(1){grid-row:auto}
.xgrid[data-tiles="3"]{grid-template-columns:1.3fr 1fr}
.xgrid[data-tiles="4"] .xtile:nth-child(4){grid-column:2 / span 2}
/* Dispatches: a strip of the same tiles under the mosaic. */
.xstrip-head{width:min(1240px,calc(100vw - 32px));margin:clamp(36px,4vw,52px) auto 18px;display:flex;align-items:center;gap:16px;
  font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.xstrip-head::after{content:'';flex:1;border-top:1px dashed var(--dash)}
.xstrip{width:min(1240px,calc(100vw - 32px));margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,20px)}
.xstrip .xtile{grid-row:auto;height:clamp(200px,20vw,280px)}
.xstrip .xtile:nth-child(1) h4{font-size:clamp(16px,1.5vw,22px)}
@media(max-width:760px){
  .xgrid,.xgrid[data-tiles]{grid-template-columns:1fr 1fr;grid-template-rows:none;gap:12px}
  .xgrid .xtile{grid-row:auto !important;grid-column:auto !important;height:clamp(170px,46vw,240px)}
  .xgrid .xtile:nth-child(1){grid-column:1 / -1 !important;height:clamp(240px,70vw,340px)}
  .xgrid .xtile:not(:first-child) p{display:none}
  .xgrid .xtile:not(:first-child) h4{font-size:15px}
  .xstrip{grid-template-columns:1fr}
}
.xstrip[data-tiles="1"]{grid-template-columns:1fr}
.xstrip[data-tiles="2"]{grid-template-columns:1fr 1fr}
@media(max-width:760px){.xgrid .xtile:not(:first-child) .kc{display:none}}