/* =====================================================================
   Editorial pages: /news, /prices, /events and one article.

   All three lists share .ed-*; events add .ev-* for the date block and
   an article adds .art-*. Tokens come from mesteel.css.
   ===================================================================== */

.ed-wrap{padding-top:32px;padding-bottom:64px;display:flex;flex-direction:column;gap:20px}
/* The hero already carries the heading and its own bottom fade, so the
   page below it starts closer than it would on its own. */
.ed-hero + .ed-wrap,.ed-hero + .wrap{padding-top:18px}
.ed-hero + .ed-wrap .ed-head:empty{display:none}

/* ---------- Page head ---------- */
.ed-head .kick{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.ed-head h1{font-size:34px;letter-spacing:-.02em;margin-top:4px}
.ed-head .sub{margin:8px 0 0;font-size:15px;line-height:1.6;color:#475569;max-width:66ch}

.ed-search{display:flex;gap:8px;margin-top:16px;max-width:560px}
.ed-search input{flex:1;min-width:0;background:#fff;border:1px solid var(--line);border-radius:999px;
                 padding:11px 18px;font:inherit;font-size:14px;color:var(--ink)}
.ed-search input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-10)}
.ed-search .btn{flex:none}

/* A section rule between "Coming up" and "Been and gone". */
.ed-sec{font-size:20px;letter-spacing:-.01em;display:flex;align-items:baseline;gap:10px;
        margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line)}
.ed-sec .fine{font-size:12.5px;font-weight:700;color:var(--mute);background:var(--bg);
              border-radius:999px;padding:3px 10px}

.ed-count{margin:0;font-size:13.5px;color:var(--mute);font-weight:600}
.ed-count b{color:var(--ink)}

/* Said out loud when the feed is the last one we held, not the live one. */
.ed-note{margin:0;background:#FFFBEB;border:1px solid #FDE68A;border-radius:12px;
         padding:12px 16px;font-size:13.5px;color:#92400E;font-weight:600}

.ed-empty{background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:40px 24px;text-align:center}
.ed-empty b{display:block;font-size:16px;margin-bottom:6px}
.ed-empty p{margin:0;font-size:14px;color:var(--mute);line-height:1.6}

/* ---------- The list ---------- */
.ed-list{display:flex;flex-direction:column;gap:12px}

.ed-item{background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:20px 22px;
         display:flex;flex-direction:column;gap:10px}
/* `.lift` carries the hover (mesteel.css). This rule used to declare a
   shadow of its own — a fifth of the site's cards with a sixth value. */

.ed-link{display:block;color:inherit}
.ed-link:hover h2{color:var(--blue)}

.ed-meta{display:flex;align-items:center;gap:10px;font-size:11.5px;font-weight:700;
         letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.ed-meta .sec{color:var(--blue);background:var(--blue-10);border-radius:999px;padding:3px 10px}

.ed-item h2{font-size:18.5px;line-height:1.35;letter-spacing:-.01em;margin:8px 0 0}
.ed-item p{margin:6px 0 0;font-size:14px;line-height:1.6;color:#475569}

.ed-tags{display:flex;flex-wrap:wrap;gap:6px}
.ed-tags .tag{font-size:11px;font-weight:700;color:var(--mute);background:var(--bg);
              border-radius:999px;padding:4px 10px;letter-spacing:.02em}

.ed-pager{display:flex;align-items:center;justify-content:center;gap:16px;padding-top:8px}
.ed-pager .fine{font-size:13px;font-weight:600;color:var(--mute)}

.ed-source{margin:0;padding-top:8px;font-size:12.5px;color:var(--mute);line-height:1.6}
.ed-source a{color:var(--blue);font-weight:600}

/* ---------- Events ----------
   A grid of poster cards, not a stack of rows. A diary is SCANNED — the
   question is "what is on, and when" — and three cards across answers that
   in one screen where the old full-width rows answered it in six.

   `auto-fill` with a 280px floor rather than a fixed column count: the same
   rule gives three across on a desktop, two on a tablet and one on a phone
   with no breakpoints to keep in step with each other. `minmax(0,1fr)` for
   the usual reason — a grid item's default min-width is auto, so a long
   unbroken venue name would widen the column instead of wrapping in it. */
/* Three across, two at tablet width, one on a phone — stated rather than
   left to `auto-fill`, which gave four on a wide screen and a ragged last
   row. `minmax(0,1fr)` for the usual reason: a grid item's default min-width
   is auto, so a long unbroken venue name would widen its column instead of
   wrapping in it. */
.ev-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:32px;margin-bottom:8px}

.ev-card{background:#fff;border-radius:16px;box-shadow:var(--shadow);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .18s ease,box-shadow .18s ease}
/* The same: `.lift` on the element, and the values are tokens. */

/* `.past` is dimmed rather than hidden: an exhibition that has been is
   still the answer to "did I miss it", and the "Ended" tag says so in
   words — opacity alone is not a label, and it is invisible to anybody
   reading the page rather than looking at it. */
.ev-card.past{opacity:.72}
.ev-card.past:hover{opacity:1}

/* The poster, 16:9. `aspect-ratio` on the LINK and not only on the image,
   so the box holds its height before the picture arrives and the grid does
   not reflow as the page loads. */
.ev-shot{position:relative;display:block;aspect-ratio:16/9;background:var(--blue-10);
  overflow:hidden}
.ev-shot img{display:block;width:100%;height:100%;object-fit:cover}

/* No artwork: the date, large, on the brand tint. A diary entry with no
   picture still carries the one fact somebody is scanning for, where an
   empty grey rectangle reads as a loading failure. */
.ev-noimg{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;line-height:1}
.ev-noimg b{font-size:40px;letter-spacing:-.03em;color:var(--blue)}
.ev-noimg i{font-size:12px;font-style:normal;font-weight:800;letter-spacing:.12em;
  color:var(--blue)}

.ev-tag{position:absolute;top:10px;left:10px;background:rgba(15,31,74,.86);color:#fff;
  font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px}

.ev-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;min-width:0}
.ev-body h3{font-size:16px;line-height:1.35;letter-spacing:-.01em;margin:0}
.ev-body h3 a{color:inherit}
.ev-card:hover h3 a{color:var(--blue)}

.ev-when{margin:0;font-size:13px;font-weight:700;color:var(--blue)}
.ev-where{margin:0;display:flex;align-items:center;gap:6px;min-width:0;
  font-size:12.5px;color:var(--mute)}
.ev-where span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev-where .flag{width:18px;height:13px;flex:none}

/* ---------- One event ---------- */
/* The facts, as a definition list: these are label/value pairs and a <dl>
   is what says so to anything that is not looking at the page. */
.ev-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:14px 24px;margin:18px 0 22px;padding:16px 18px;
  background:var(--bg);border-radius:14px}
.ev-facts > div{min-width:0}
.ev-facts dt{font-size:10.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mute);margin-bottom:3px}
.ev-facts dd{margin:0;font-size:14px;font-weight:700;line-height:1.45;
  display:flex;align-items:center;gap:7px}
.ev-facts .flag{width:18px;height:13px;flex:none}

/* The poster at full size. `max-height` because an organiser's artwork is
   often a portrait poster two thousand pixels tall, and a page that opens
   with three screens of one picture has buried the thing underneath it. */
.ev-poster{display:block;max-width:100%;max-height:460px;width:auto;
  border-radius:14px;margin:0 0 20px}

.ev-lede{margin:0 0 18px;font-size:16px;line-height:1.65;color:#334155;font-weight:500}

.ev-ended{margin-bottom:18px}
.ev-ended b{display:block;color:var(--ink)}

.ev-cta{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 8px}

@media (max-width:560px){
  .ev-facts{grid-template-columns:1fr;padding:14px}
  .ev-cta .btn{width:100%;justify-content:center}
}
/* ---------- One article ---------- */
/* The detail page's photo band lives in mesteel.css, beside .ed-hero: it is
   drawn by partials/detail-hero.php, which /marketplace/{offers}/{uuid}
   includes while loading marketplace.css and NOT this file. A shared
   partial's styles travel with the partial — CLAUDE.md lists four components
   that learned this the other way round. */

/* ---------- The right column ---------- */
.side-box{background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:16px 16px 14px}
.side-box h2{margin:0 0 12px;font-size:16px;font-weight:800;color:var(--ink)}
/* A box heading with its own link, as the homepage's section headings have.
   `flex-wrap` because "Featured companies" and "Directory →" together are
   wider than 300px at the smallest text size somebody may have set. */
.side-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:6px 12px;margin-bottom:12px}
.side-h h2{margin:0}
.side-h a{font-size:12.5px;font-weight:700;color:var(--blue);white-space:nowrap}

/* Related news: a thumbnail when the article has one, and no grey box when
   it does not — an empty square beside four of six items reads as a loading
   failure. `grid-template-columns:auto 1fr` lets the row close up. */
.rel-list{display:flex;flex-direction:column;gap:12px}
.rel{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;
  color:inherit;text-decoration:none}
.rel img{width:72px;height:54px;object-fit:cover;border-radius:8px;flex:none;
  background:var(--bg)}
.rel b{display:block;font-size:13.5px;line-height:1.35;font-weight:700}
.rel time{display:block;margin-top:3px;font-size:12px;color:var(--mute)}
.rel:hover b{color:var(--blue)}
.rel:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:10px}

/* The homepage's company card, in a 300px column.

   `.co` itself lives in home.css, which this page does not load — so the
   markup arrived here with none of its layout and the card rendered as three
   inline runs of text. This is the `locked-note` lesson again: a component
   reused on a second page needs its styles to travel with it. The rules are
   restated here rather than moved, because the homepage's card is a wide
   two-column row and this one is a 300px sidebar; they share a component and
   not a geometry.

   Avatar left, name and meta beside it, the tier pill on its own line under
   them — a name like "ATTIEH STEEL CO. LTD" plus a badge does not fit on one
   line at this width, and wrapping the pill to the far right leaves it
   stranded under nothing. */
.gold-list{display:flex;flex-direction:column;gap:10px}
.gold-list .co{display:grid;grid-template-columns:auto 1fr;gap:4px 11px;
  align-items:center;padding:11px 12px;border-radius:14px;color:inherit}
.gold-list .co .avatar{width:38px;height:38px;border-radius:11px;font-size:13px}
/* `min-width:0`: a grid item defaults to min-width:auto, so a long unbroken
   company name would push the card wider than the column instead of wrapping. */
.gold-list .co > div{min-width:0}
.gold-list .co b{display:block;font-size:13.5px;line-height:1.3;font-weight:700}
.gold-list .co small{display:block;margin-top:2px;font-size:11.5px;
  color:var(--mute);line-height:1.45}
/* Column 2 explicitly: auto-placement would drop the pill under the avatar.
   `margin:2px 0 0` is not redundant — mesteel.css gives `.co .pill` a
   `margin-left:auto` under its narrow breakpoint, and an auto margin beats
   `justify-self` in grid, so the pill sat on the far right without it. */
.gold-list .co .pill{grid-column:2;justify-self:start;margin:2px 0 0}

/* The article page: text column, then the ad. `max-width` on .art-wrap keeps
   the 840px measure on the prose; the grid is what puts the banner beside it.
   `minmax(0,…)` because a grid item's default min-width is auto and a wide
   table inside an article would otherwise push the ad off the page. */
.art-page{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;
  align-items:start;max-width:1220px}
.art-wrap{max-width:840px;min-width:0}
/* `position:sticky` only while the column FITS. Three blocks can run
   taller than the viewport, and a sticky element taller than its
   container simply never moves — it pins at the top and the bottom of
   it is unreachable. The media query is the test: above 900px of
   viewport height the column is short enough to behave. */
.art-side{width:300px;display:flex;flex-direction:column;gap:16px}
@media (min-height:900px){ .art-side{position:sticky;top:92px} }

@media (max-width:1060px){
  /* Below the article rather than squeezing it. An article is one column of
     prose and 300px out of it is a third of the measure. */
  .art-page{grid-template-columns:minmax(0,1fr);max-width:840px}
  /* Below the article. Centred, and the blocks keep their 300px so the
     ad is still the size it was sold as. */
  .art-side{position:static;width:auto;align-items:center;margin-top:28px}
  .art-side > *{width:300px;max-width:100%}
}
.art{background:#fff;border-radius:18px;box-shadow:var(--shadow);padding:32px 36px;
     display:flex;flex-direction:column;gap:12px}

.art-back{font-size:13.5px;font-weight:700;color:var(--blue)}
.art-back:hover{text-decoration:underline}

.art h1{font-size:30px;line-height:1.25;letter-spacing:-.02em;margin:4px 0 0}

.art-facts{list-style:none;margin:8px 0 0;padding:16px 18px;background:var(--bg);border-radius:14px;
           display:flex;flex-wrap:wrap;gap:12px 32px}
.art-facts li{display:flex;flex-direction:column;gap:3px;min-width:0}
.art-facts span{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.art-facts b{font-size:14px}

/* The one block on the site that prints HTML from elsewhere; every rule
   here is defensive, because the markup arrives without classes. */
/* A paywalled article stops after its excerpt, and this is where it says
   so. Spaced off the text rather than boxed tight against it: the reader
   has just been cut off mid-story, and the prompt wants to read as the
   next thing on the page rather than as part of the sentence. The note
   itself is `.locked-note.wide` from mesteel.css — same component and
   same wording as /prices/*, so a subscription means one thing here. */
.art-locked{margin:22px 0 4px}

.art-body{font-size:15.5px;line-height:1.75;color:#1E293B}
.art-body > :first-child{margin-top:0}
.art-body p{margin:0 0 16px}
.art-body h2{font-size:21px;margin:28px 0 10px;letter-spacing:-.01em}
.art-body h3,.art-body h4{font-size:17px;margin:22px 0 8px}
.art-body ul,.art-body ol{margin:0 0 16px;padding-left:22px}
.art-body li{margin:0 0 6px}
.art-body a{color:var(--blue);font-weight:600;text-decoration:underline;
            overflow-wrap:anywhere}
.art-body blockquote{margin:0 0 16px;padding:12px 18px;border-left:3px solid var(--blue-10);
                     color:#475569;font-style:italic}
/* A wide table scrolls inside the article rather than widening the page. */
.art-body table{width:100%;border-collapse:collapse;margin:0 0 16px;font-size:14px;display:block;overflow-x:auto}
.art-body th,.art-body td{border:1px solid var(--line);padding:8px 10px;text-align:left}
.art-body th{background:var(--bg);font-weight:700}
/* An image placed in the body by the editor. There was no rule for one at
   all, so a 2,000px photograph would have run straight out of the column —
   `max-width:100%` with `height:auto` is what keeps the aspect ratio while
   it scales down, and without the second half the picture squashes. */
.art-body img{display:block;max-width:100%;height:auto;border-radius:10px;
  margin:20px 0}
.art-body figure img{margin:0}
.art-body figure{margin:0 0 16px}
.art-body figcaption{font-size:12.5px;color:var(--mute);margin-top:6px}

@media (max-width:767px){
  .ed-head h1{font-size:27px}
  .ed-search{flex-wrap:wrap}
  .ed-search input{width:100%;flex:1 0 100%}
  .art{padding:22px 18px}
  .art h1{font-size:24px}
}

/* =====================================================================
   /news — two columns, as news.mesteel.com runs its own front page.
   Middle East on the left with a country filter, the world on the right.
   ===================================================================== */
.nw-wrap{padding-top:28px;padding-bottom:56px;display:flex;flex-direction:column;gap:16px}

/* ---------- The search bar ----------
   A text box, two selects and a button, in the site's own clothes. The
   screenshot this replaces was browser-default everything: square corners,
   a system blue focus halo and the OS's own dropdown arrow. */
/* ---------- The /news search bar ----------
   The DIRECTORY's filter bar, cell for cell: a white card holding grey
   `.field` cells, each an uppercase caption over its value, and the button
   at the end. The user asked for the company-search dropdowns and this is
   what they are made of.

   `.field` and `.search` are restated here rather than shared, because
   `combo.php`'s own docblock records that the shell is per-page — home.css
   and directory.css each define `.field` at their own size, and a page that
   defines neither renders the combo as a bare unstyled input, which is
   exactly what happened here. The measurements below are the directory's. */
.nws{margin:0}

.search{background:#fff;border-radius:18px;padding:8px;
  box-shadow:0 20px 60px rgba(15,31,74,.16),0 0 0 1px rgba(15,31,74,.06);
  display:grid;grid-template-columns:1.6fr 1fr 1fr auto;gap:6px}
.search .btn{border-radius:12px;padding:0 26px}

/* `min-width:0`: a grid item's default min-width is auto, so a long country
   name in the combo would widen the column rather than ellipsing inside it. */
.field{background:var(--bg);border-radius:12px;padding:12px 16px;min-width:0}
.field label,.field .lbl{display:block;font-size:10.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.field input,.field select{width:100%;border:0;background:none;font:inherit;
  font-size:15px;font-weight:700;margin-top:3px;color:var(--ink);outline:0;
  padding:0;appearance:none}
.field input::placeholder{color:var(--faint);font-weight:700}
/* appearance:none above strips the native arrow, which would otherwise leave
   the no-JS selects looking like text inputs. */
.field select{background:var(--chevron) no-repeat right center/16px;
  padding-right:24px;cursor:pointer}
.field select.any{color:var(--faint)}
.field select optgroup{font-weight:800;color:var(--ink)}
.field select option{font-weight:500}

/* The combo in this shell — padded 16px, not the register wizard's 18px. */
.field.combo{--chev-inset:16px}
.field .combo-row{margin-top:3px}
.field .combo-row input{margin-top:0}
.field.combo.is-open{box-shadow:0 0 0 2px var(--blue),0 0 0 5px rgba(31,63,143,.12)}

/* `display:contents`: Alpine's clone needs ONE element to hold the two
   combos and the two hidden inputs, and that wrapper must not become a grid
   cell of its own or both dropdowns would share one column. */
.nws-combos{display:contents}

.nws-clear-row{margin:10px 0 0;text-align:right}
.nws-clear{font-size:13px;font-weight:700;color:var(--mute)}
.nws-clear:hover{color:var(--blue)}

@media (max-width:980px){
  .search{grid-template-columns:1fr 1fr}
  .search .btn{grid-column:1/-1;padding:14px;min-height:52px}
}
@media (max-width:560px){
  /* One per row. Two across at 360 is two controls neither of which can
     show its own value. */
  .search{grid-template-columns:1fr}
  .nws-clear-row{text-align:center}
}
/* ---------- The page and its right column ----------
   `minmax(0,1fr)` on the main column, not `1fr`: a grid item's default
   min-width is auto, so the two-column list inside would refuse to shrink
   and push the ad off the page instead. */
/* ---------- /news: two layouts ----------
   The LANDING is two full-width headline columns with no ad — a third of the
   page given to a banner left both too narrow to read. The RESULTS view is
   one column of rows, which leaves room beside it, so that one carries the
   sidebar and the NEWS_SQ slot.

   `minmax(0,1fr)` on the results column, not `1fr`: a grid item's default
   min-width is auto, so a long unbroken headline would push the sidebar off
   the page rather than wrapping inside its own column. */
.nw-results{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;
  align-items:start}
.nw-main{min-width:0}

/* The sidebar itself is `.art-side`, the article page's, and it is used here
   unchanged — this layout only gives it a column to sit in. Its width, its
   sticky behaviour and the way it centres its children once it is stacked
   are all defined with the component, which is the point: the markup
   travelled to a second page and the behaviour travelled with it. */

/* One column, in the landing page's own card. `.nw-cols` carries the
   background, radius and shadow and `.nw-col` the padding, so the two
   views share everything except the column count — which is all this
   modifier changes.

   IT NO LONGER CLIPS. `overflow:hidden` cut the lifted shadow off
   every story card in the panel — 42px of reach against 32px of
   column padding at the foot. Measured before removing it: with the
   clip turned off, **not one descendant exceeds the panel's box**, so
   it was guarding nothing. The corners still round, because no child
   paints a background out to them; a thumbnail clips itself. */
.nw-cols.one{grid-template-columns:minmax(0,1fr)}

.nw-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;
         background:#fff;border-radius:16px;box-shadow:var(--shadow)}
.nw-col{min-width:0;padding:28px 32px 32px}
.nw-col + .nw-col{border-left:1px solid var(--line)}

.nw-title{font-size:30px;line-height:1.15;letter-spacing:-.02em;color:var(--blue);margin:0}

/* ---------- Country filter ---------- */
.nw-filter{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;margin-top:18px}
.nw-filter .chev{color:var(--ink);font-weight:800;font-size:15px;margin-right:6px}
.nw-filter a{font-size:14.5px;font-weight:600;color:#64748B;padding:4px 0}
.nw-filter a:hover{color:var(--blue)}
.nw-filter a.on{color:var(--ink);font-weight:800}

/* <details>, so the overflow list needs no script. */
.nw-more{position:relative}
.nw-more summary{list-style:none;cursor:pointer;font-size:14.5px;font-weight:600;color:#64748B;
                 display:inline-flex;align-items:center;gap:5px;padding:4px 0}
.nw-more summary::-webkit-details-marker{display:none}
.nw-more summary:hover{color:var(--blue)}
.nw-more[open] summary{color:var(--ink);font-weight:800}
.nw-more[open] summary span{transform:rotate(180deg)}
.nw-more summary span{display:inline-block;transition:transform .15s ease;font-size:12px}

.nw-more-panel{position:absolute;z-index:var(--z-dropdown);top:calc(100% + 8px);left:0;min-width:240px;max-height:320px;
               overflow-y:auto;background:#fff;border:1px solid var(--line);border-radius:14px;
               box-shadow:0 12px 34px rgba(15,31,74,.16);padding:8px}
.nw-more-panel a{display:flex;justify-content:space-between;align-items:center;gap:16px;
                 padding:8px 12px;border-radius:9px;font-size:14px;font-weight:600;color:var(--ink)}
.nw-more-panel a:hover{background:var(--bg);color:var(--blue)}
.nw-more-panel a.on{background:var(--blue-10);color:var(--blue);font-weight:800}
.nw-more-panel a span{font-size:11.5px;font-weight:700;color:var(--mute)}

.nw-active{margin:14px 0 0;font-size:13.5px;color:var(--mute);font-weight:600}
.nw-active b{color:var(--ink)}
.nw-active a{color:var(--blue);font-weight:700;margin-left:4px}

/* ---------- Articles ---------- */
.nw-list{margin-top:6px}
.nw-item{padding:22px 0;border-bottom:1px solid var(--line)}
.nw-item:last-child{border-bottom:0;padding-bottom:0}

.nw-item h3{font-size:19px;line-height:1.32;letter-spacing:-.01em;margin:0}
.nw-item h3 a{color:var(--ink)}
.nw-item h3 a:hover{color:var(--blue)}

/* The newsroom's own badge, in its own red — deliberately not a token,
   because it is their label rather than part of this site's palette. */
.nw-flag{display:inline-block;background:#E8112D;color:#fff;font-size:13px;font-weight:700;
         line-height:1.3;padding:2px 8px;margin-right:8px;vertical-align:2px;white-space:nowrap}

.nw-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-top:12px;
         font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.nw-meta .place{color:var(--blue)}
.nw-meta time{color:#475569}

.nw-item p{margin:14px 0 0;font-size:14.5px;line-height:1.65;color:#64748B}

.ed-empty.simple{background:none;box-shadow:none;padding:28px 0;text-align:left;
                 color:var(--mute);font-size:14px}

@media (max-width:900px){
  /* One column, so the sidebar drops under the results. The ad is first in
     the markup and therefore first here too, which is the order it is sold
     in — a banner under four company cards is one nobody scrolls to.

     Nothing else is needed: `.art-side` already goes `width:auto` and
     centres its 300px children below 1060px, with the component. */
  .nw-results{grid-template-columns:minmax(0,1fr)}

  .nw-cols{grid-template-columns:minmax(0,1fr)}
  .nw-col{padding:24px 20px}
  .nw-col + .nw-col{border-left:0;border-top:1px solid var(--line)}
  .nw-title{font-size:25px}
  .nw-item h3{font-size:17.5px}
  /* Anchored to the viewport edge instead of overflowing it. */
  .nw-more-panel{left:auto;right:0;min-width:200px}
}


/* Two across at tablet width, one on a phone.

   What was here is gone: a block of `grid-column` / `grid-row` rules placing
   a date leaf and an artwork column inside `.ev-card`. The card stopped
   being a grid when it became a poster card — it is a flex column now — so
   every one of those rules had been matching an element that no longer has
   the layout they describe. Dead CSS is worse than none: the next person to
   change this card would have read them as the rules in force. */
@media (max-width:1060px){
  .ev-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
}

@media (max-width:640px){
  .ev-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  .ev-body{padding:16px 18px 18px}
}

/* The lead image on an article: the item's OWN photograph, at the top of the
   body. It used to be the hero band as well, blurred; the band is the
   section's now and this is the only place the picture appears.

   The same rules an image the editor placed inside the body gets — full
   width of the text column, `height:auto` so the aspect ratio survives the
   scale down, and the 10px radius `.art-body img` uses — so a lead picture
   and a picture three paragraphs down are not two different sizes of
   rounding in one column. */
.art-shot{margin:20px 0;background:var(--bg);border-radius:10px;overflow:hidden}
.art-shot img{display:block;width:100%;max-width:100%;height:auto;border-radius:10px}
/* ---------- Jobs ----------
   The same card as an article, with the facts a vacancy carries instead
   of an excerpt. */
.job-item h2{margin-top:6px}
.ed-meta .sec.alt{color:var(--sell);background:var(--sell-10)}

.job-facts{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin-top:10px;
           font-size:13.5px;color:var(--mute)}
.job-facts .co{font-weight:700;color:var(--blue)}
.job-facts .co:hover{text-decoration:underline}
.job-facts .pay{margin-left:auto;font-size:13.5px;color:var(--ink)}

@media (max-width:600px){
  .job-facts .pay{margin-left:0;flex:1 0 100%}
}

/* The section rule separates one list from the next; directly under the
   hero it has nothing to separate. */
.ed-wrap > .ed-sec:first-child{border-top:0;padding-top:0;margin-top:0}

/* ---------- Job board action row ----------
   It was a two-tab bar, Vacancies and Candidates. The CV board is gone, so
   there is one side and nothing to tab between: the tab rules
   (`> a:not(.btn)`, `a.on`) went with it, and what is left is the row that
   holds "Post a vacancy". The class keeps its name because the markup and
   the border under it are unchanged. */
.job-tabs{display:flex;align-items:center;gap:20px;flex-wrap:wrap;
          padding-bottom:4px;border-bottom:1px solid var(--line)}
.job-tabs .sp{flex:1}
.job-tabs .btn{padding:8px 16px;font-size:13.5px}

/* `.cv-name` and `.cv-list` were here — the one-candidate layout for
   /jobs/wanted/{uuid}. That page is gone and nothing else used them. */

/* The apply form sits under the article rather than beside it. */
.apply-card{margin-top:16px}
.ch.tight{margin-top:8px}

/* ---------- Dashboard cards under an article ----------
   /jobs/{uuid} hangs cards below an article: the
   apply form, "This is your vacancy", the candidate's contact panel.
   They load dashboard.css for the vocabulary those cards are built from
   — .ch, .fld, .g2, .file-row — but its card rules are scoped to
   .dash-main, which is not on these pages. So the cards had NO padding
   at all, their hints printed at body size in near-black, and .save-row
   kept the dashboard's sticky-footer behaviour, which floated the Send
   button on top of the covering note above it.

   Ported rather than widening dashboard.css's own selectors, which would
   reach every page that loads it. billing.css carries the same short
   port for /membership; this is the handful those two pages use. */
.art-wrap > .card{padding:20px 22px;display:flex;flex-direction:column;gap:12px;
  border:0;box-shadow:var(--shadow)}
.art-wrap .card .hint{margin:0;font-size:13.5px;line-height:1.55;
  color:#475569;text-wrap:pretty}
.art-wrap .card p.bad{margin:0;color:var(--red);font-size:13px;font-weight:600}

/* Static, not sticky: there is no long form here to scroll past, and
   sticky is what put the button over the textarea. */
.art-wrap .save-row{position:static;background:none;box-shadow:none;padding:0}

@media (max-width:639px){
  .art-wrap > .card{padding:18px}
}
.ok-row{margin:0;background:var(--sell-10);color:#14532D;border-radius:12px;
        padding:14px 16px;font-size:14px;font-weight:600}

/* =====================================================================
   Documents — /about, /advertise, /terms, /privacy, /cookies
   ---------------------------------------------------------------------
   One measure, one rhythm. These are pages somebody reads a paragraph of
   and then leaves, or reads all of because they are about to sign
   something, and both want the same thing: a column narrow enough to
   track a line back to the next one.
   ===================================================================== */

.doc-wrap{padding-top:34px;padding-bottom:72px}
.doc{max-width:720px;margin:0 auto}

.doc-head{margin-bottom:34px;padding-bottom:26px;border-bottom:1px solid var(--line)}
.doc-head h1{font-size:40px;letter-spacing:-.025em;line-height:1.12;margin:0}
.doc-intro{margin:14px 0 0;font-size:18.5px;line-height:1.55;color:#334155;text-wrap:pretty}

.doc-sec{margin-top:34px}
.doc-sec:first-of-type{margin-top:0}
.doc-sec h2{font-size:21px;letter-spacing:-.015em;line-height:1.3;margin:0 0 12px}
.doc-sec p{margin:0 0 14px;font-size:16px;line-height:1.68;color:#334155;text-wrap:pretty}
.doc-sec p:last-child{margin-bottom:0}
.doc-sec a{color:var(--blue);font-weight:600;text-decoration:underline;
  text-underline-offset:2px;text-decoration-thickness:1px}
.doc-sec a:hover{color:var(--navy)}
.doc-sec b,.doc-sec strong{color:var(--ink);font-weight:700}

/* The bullets carry most of the load on these pages — what a membership
   includes, who can see which field — so they are spaced as their own
   blocks rather than run together as a list. */
.doc-list{margin:0 0 14px;padding:0;list-style:none;display:flex;
  flex-direction:column;gap:11px}
.doc-list li{position:relative;padding-left:22px;font-size:16px;line-height:1.62;
  color:#334155;text-wrap:pretty}
.doc-list li:before{content:"";position:absolute;left:2px;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--blue);opacity:.55}

/* The aside: the sentence that answers "but why is it like that". */
.doc-note{background:var(--bg);border-left:3px solid var(--blue);
  border-radius:0 10px 10px 0;padding:14px 18px;font-size:15px;line-height:1.6;
  color:#475569}
.doc-sec .doc-note{margin:0 0 14px}

.doc-updated{margin:32px 0 0;padding-top:20px;border-top:1px solid var(--line);
  font-size:13px;color:var(--mute)}
.doc-head .doc-updated{margin:16px 0 0;padding-top:0;border-top:0}

@media (max-width:720px){
  .doc-head h1{font-size:31px}
  .doc-intro{font-size:17px}
  .doc-wrap{padding-bottom:52px}
}

/* A draft, previewed by staff. Amber rather than the page's blue note: it is
   a warning about what this page is, not information about the story. */
.art-preview{background:#FFFBEB;border:1px solid #FDE68A;color:#78350F;
  border-radius:12px;padding:12px 16px;margin:0 0 18px}
.art-preview b{color:#78350F}

/* ---------- The country beside a news date ----------
   `.place` on a list row and `.sec` on the article page are the same fact in
   two sizes, so the flag and the "+N" are defined for both at once — a
   reader going from /news to the article must not see the country change
   shape on the way.

   `inline-flex` on the wrapper, because the flag is a box and a bare inline
   image sits on the text baseline with a descender's worth of gap under it. */
.nw-meta .place,
.ed-meta .sec{display:inline-flex;align-items:center;gap:6px}

/* The SIZE only; everything else is `.flag`'s. The list is the smaller of
   the two because the row is one line of 13px metadata. */
.nw-meta .place .nw-cflag{width:17px;height:13px;flex:none;border-radius:2px;
  box-shadow:0 0 0 1px rgba(15,31,74,.14)}
.ed-meta .sec .nw-cflag{width:19px;height:14px;flex:none;border-radius:2px;
  box-shadow:0 0 0 1px rgba(15,31,74,.14)}

/* "+2" — how many more countries the article is filed under. Quieter than
   the name it follows: it is a count, not a place. */
.place-more{font-style:normal;font-weight:700;opacity:.65;font-size:.9em}

/* ── The pills are links ─────────────────────────────────────────────────
   Every category and country pill, and the place chip beside the date on
   both the list and the article page, is an <a href> to that filtered list.
   They keep exactly the look they had; what is added here is only what a
   LINK needs that a <span> did not — no underline, the colour the span
   carried (an <a> would otherwise take the site's link colour), a hover
   state and a real focus ring.

   WRITTEN AS `.ed-tags a.tag`, (0,2,1), and not `a.tag`, (0,1,1). The plain
   `.ed-tags .tag` 600 lines above is (0,2,0): at equal specificity the lower
   rule in the file wins, and a rule that depends on its position is a rule
   that moves when somebody tidies the sheet. CLAUDE.md records that trap
   four times -- `.fld > span` over `.switch`, `table.inv` over
   `table.stack-sm`, `.anav a` reaching the dropdown panel, and `.anav a`
   again on the admin bar's padding curve. */
.ed-tags a.tag{text-decoration:none;color:var(--mute);
  transition:background .12s ease,color .12s ease}
.ed-tags a.tag:hover{background:var(--blue-10);color:var(--blue)}

/* The place chip hovers with an UNDERLINE rather than a colour swap,
   because `.ed-meta .sec.alt` paints the same chip green on an event and a
   hover rule naming a colour would have to know about both. An underline
   reads as a link whatever the chip is. */
.nw-meta a.place,
.ed-meta a.sec{text-decoration:none}
.nw-meta a.place:hover,
.ed-meta a.sec:hover{text-decoration:underline}

/* One focus ring for the three of them. `:focus-visible`, so a mouse press
   does not draw a box round the pill it has just followed. */
.ed-tags a.tag:focus-visible,
.nw-meta a.place:focus-visible,
.ed-meta a.sec:focus-visible{outline:2px solid var(--blue);outline-offset:2px;
  border-radius:999px}

/* ── "Submitted by X" ──────────────────────────────────────────────────
   The credit under a news article or an event that came in from the
   public. Quieter than the body and louder than the "Published …" line
   below it: it is a fact about where the story came from, which a reader
   weighing it wants, and it is not the story. */
.ed-credit{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--line);
  font-size:13px;color:var(--mute)}
.ed-credit b{color:var(--ink);font-weight:700}
.ed-credit a{color:var(--blue);font-weight:700}
.ed-credit a:hover{text-decoration:underline}

/* "Got a story?" — the submission call-out near the top of /news and
   /events. Quiet: it sits above editorial content and must not compete
   with the headline a reader came for. */
.ed-submit-cta{display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin:0 0 18px;padding:12px 18px;
  background:var(--blue-10);border-radius:14px;
  font-size:13.5px;font-weight:600;color:#334155}
@media (max-width:560px){
  .ed-submit-cta{justify-content:flex-start}
}