/* ═══════════════════════════════════════════════════════════════════
   LawWiser 2026. The direction, applied to every page that is not
   the home page.

   lab.css carries the direction as it was worked out on the home
   page, against the home page's own class names. This file carries
   the same decisions across to the index engine, the record pages
   and the hubs, which use their own markup.

   Nothing new is decided here. Every value comes from the design
   system at /preview-design-system/. If a value here disagrees with
   that document, this file is wrong.

   Loaded after lab.css, so it can rely on it and never fights it.
   ═══════════════════════════════════════════════════════════════════ */


/* ── The page title block ──────────────────────────────────────────
   Every index, record and hub page opens with the same three lines:
   kicker, title, standfirst, on ink. The kicker is already carried by
   the global .kick rule. The other two were still on the old spec. */

.ixtitle h1,
.rechead h1,
.hubhead h1,
.ixhead h1{
  font-family:var(--fd);
  font-weight:300;                       /* was 600 */
  font-size:clamp(40px,4.8vw,56px);      /* was a flat 42 */
  line-height:1.14;
  letter-spacing:-.012em;
}

/* The standfirst separates from the title three ways: italic, one
   step down in colour, and a shorter measure. On ink the colour step
   is white at 70 rather than the paper value. */
.ixtitle .standfirst,
.rechead .standfirst,
.hubhead .standfirst{
  font-style:italic;
  max-width:54ch;
}
.s-dark .ixtitle .standfirst,
.s-dark .rechead .standfirst,
.s-deep .ixtitle .standfirst,
.ixhead .standfirst{color:rgba(255,255,255,.7)}


/* ── Card and row titles ───────────────────────────────────────────
   Card title is Newsreader 500. 600 is no longer used on a serif
   anywhere on the platform. */
.ixcard h3,
.ixcard .mt{font-weight:500}
.ixrow h4,
.ixrow .t{font-weight:500}


/* ── Rules instead of gaps ─────────────────────────────────────────
   The same move lab.css makes on .agrid, carried to the index grid.
   The grid closes to zero gap, takes a rule across its top and
   hairlines between its columns. */
.ixgrid{
  gap:0;
  border-top:2px solid var(--ink);
}
/* Every cell carries its left and bottom rule, including the ones that
   start a row. The leftmost line then sits flush at the container edge,
   directly under the ink rule that spans the same width, and the whole
   thing reads as a ruled table.

   This is deliberate rather than lazy: the grid runs at three columns,
   two below 1100 and one on a phone, and the record count varies by
   page, so any rule that depends on knowing which cell starts a row
   breaks the first time either changes. */
.ixgrid .ixcard{
  padding:var(--s4) var(--s4) var(--s5);
  border-left:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--paper);               /* so no ground line crosses a title */
}

.ixrows{gap:0;border-top:2px solid var(--ink)}
.ixrows .ixrow{
  border-bottom:1px solid var(--line);
  background:var(--paper);
}

/* On a phone the vertical rules drop and each row takes a hairline
   above it instead, which is the same fallback lab.css uses. */
@media(max-width:860px){
  .ixgrid{border-top:none}
  .ixgrid .ixcard{
    border-left:none;
    border-top:1px solid var(--line);
    padding-left:0;padding-right:0;
  }
}


/* ── Group headings inside a list ──────────────────────────────────
   "May 2026" on events, "A" on the glossary. These label a block of
   records; they are not section heads, so they do not centre and they
   do not take the section-title size. They step down to the card
   level in weight and sit just above it in size. */
.ixgroup > h2,
.azgroup > h2{
  font-weight:400;                       /* was 600 */
  font-size:24px;
  line-height:1.2;
  letter-spacing:-.012em;
  /* Centred with the opening above them. These are the page's own
     divisions, not labels inside a list, so they follow the section-head
     rule: the head centres, the records under it stay ranged left. */
  text-align:center;
}
.ixgroup > h2,
.azgroup > h2{margin-left:auto;margin-right:auto}


/* ── The ground under a list ───────────────────────────────────────
   The index body is paper and so is the onward block beneath it, so
   the two need separating. Vertical rules at the section pitch, at
   the alpha the design system gives for this motif.

   Not gated on the reveal: these bands are often the first thing on
   screen after the masthead, and a ground that fades in behind a list
   the reader is already reading is worse than one that is simply
   there. */
.ixbody{position:relative;isolation:isolate;overflow:hidden}
.ixbody > *{position:relative;z-index:1}
.ixbody::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,
    color-mix(in srgb,var(--text) 6%,transparent) 0 1px,transparent 1px 64px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 72%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 72%,transparent 100%);
}


/* ── The navigation scrolls away; the masthead stays ───────────────
   Both bars used to pin, the nav directly beneath the masthead, and
   they travelled down the page together. Over a long read that costs
   about a hundred pixels of every screen for a bar nobody is using.

   The nav now scrolls off with the page and only the masthead holds,
   which is enough: the wordmark is the way back, and search and the
   one button are in it. The nav is a scroll away at either end.

   The masthead keeps its own sticky from the layer above. Nothing
   here touches it.

   Scoped off the home page. The home page is signed off, both bars
   travel together there by design, and this file must not reach it. */
body:not(.home) .navbar{
  position:static;
  top:auto;
}
/* That shadow existed to lift a floating bar off the content beneath
   it. A bar sitting in the flow has nothing to float over. */
body:not(.home) .past-hero .navbar{box-shadow:none}


/* ═══════════════════════════════════════════════════════════════════
   The record page: body left, rail right.

   The article ran one column against the left edge at an 80-character
   measure and left about half the screen empty. The measure comes back
   to the 60 to 70 the design system asks for, and the space that frees
   up becomes a rail carrying what was already in the database.
   ═══════════════════════════════════════════════════════════════════ */

.reccol.has-rail{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:var(--s6) var(--s7);
  align-items:start;
  /* .reccol was capped to a single reading column. With a rail beside it
     the cap has to come off the container, or the grid divides the old
     686px between the two and the article ends up narrower than before. */
  width:100%;
  /* The block spans the whole container: the article at its measure on
     the left, the rail against the right edge, and the slack between them
     as the gutter.

     Sizing the block to its contents instead was wrong. It left the rail
     floating near the middle of the screen with the entire right third
     empty, which reads as a column that has come loose rather than as a
     margin. A rail has to sit on an edge to be a rail. */
  max-width:none;
  justify-content:space-between;
}
/* The rail sits on the container's right edge, which is what Kartik asked
   for, and that left a 402px gutter -- the "hole, not a margin" the earlier
   author had capped the container to avoid. Both constraints are satisfiable
   at once by spending the slack on the two columns instead of the gap:
   the measure goes 34em -> 38em (about 71 characters, still inside the
   comfortable range) and the rail 340 -> 380. Gutter 402 -> 302. */
.reccol.has-rail{grid-template-columns:minmax(0,38em) 380px}
/* A 64-character measure beside a 340px rail is about 900px of content.
   Left to span the full 1340px container it opened a 440px gutter between
   the two, which is a hole, not a margin. The reading page is capped
   narrower than the index pages and keeps the left edge of the title, so
   the rail still sits on an edge and the gutter comes back to about 180. */
/* The reading width is still 1120, but it now hangs off the standard
   centred container instead of off the viewport's left edge. Pinning the
   wrap with margin-left:0 and pushing it in with a fixed 50px padding
   happened to line up with the header at 1440 and nowhere else: at 1920 the
   header sat at 290 and the body at 50, so the two bands were 240px out of
   register. The cap moves to the column, the container centres, and the
   left edge tracks the title at every width. */
.recbody .wrap{max-width:1340px;margin-inline:auto}
/* Railless columns keep story.css's 68ch reading cap; without this scope the
   1120 below overrode it and stretched the subject block and rules on events
   and deals to 1120 beside a 685px paragraph.

   Rail columns now take the full container, which puts the rail on the same
   right edge as the header. That restores the base .reccol rule's own intent
   ("a rail has to sit on an edge to be a rail"); the 1120 cap that had been
   layered over it bought a tighter gutter at the price of a rail that lined
   up with nothing. Asked for by Kartik, 15 Aug. */
.recbody .wrap > .reccol.has-rail{max-width:none}
/* The narrow container is for reading. A video page is not reading: the
   film wants the width, so it keeps the full container. */
body.single-lawwiser_video .recbody{padding-left:0}
/* The article rule above pins .wrap with margin-left:0, which is right when
   the body is meant to hang off the title's left edge. Capping the video
   wrap without also releasing that margin left the whole column against the
   left edge and threw every spare pixel to the right: 200px at 1440, 680px
   at 1920, while the header above it stayed centred. The video page uses the
   standard container instead, so body and header share both edges. */
body.single-lawwiser_video .recbody .wrap{max-width:1340px;margin-inline:auto}

/* 64 characters at 16px. The old 686px cap was set when the column had
   the whole width to itself. */
.reccol.has-rail .rich{max-width:38em}

/* The rail travels with the reader. It clears the masthead, which is the
   only thing still pinned, and its height is measured in JS. */
.recrail{position:sticky;top:calc(var(--mast-h,70px) + var(--s4))}
.railin{
  border-top:2px solid var(--ink);
  padding-top:var(--s4);
}
.recrail .railblk,
.recrail .recppl,
.recrail .recsubj{
  padding-bottom:var(--s4);
  margin-bottom:var(--s4);
  border-bottom:1px solid var(--line);
}
.recrail .railnext{border-bottom:none;margin-bottom:0;padding-bottom:0}
.recrail .t-kicker{
  display:block;margin-bottom:var(--s3);
  font-family:var(--fb);font-weight:600;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--brass-deep);
}

/* --- who is in the piece ------------------------------------------ */
/* One per line in a 300px rail: two would put a 34px face next to a
   two-line designation, and the name would win nothing by it. */
.recrail .pplgrid{display:grid;gap:var(--s3)}
.recrail .ppl{display:flex;gap:12px;align-items:center;text-decoration:none}
.recrail .ppl .pic,
.recrail .ppl .pic img{width:44px;height:44px;border-radius:50%;object-fit:cover;display:block}
.recrail .ppl .pic.init{
  display:flex;align-items:center;justify-content:center;
  background:var(--brass-tint);color:var(--brass-deep);
  font-family:var(--fd);font-size:18px;
}
.recrail .ppl .who{display:block;min-width:0}
.recrail .ppl .who b{
  display:block;font-family:var(--fd);font-weight:500;font-size:15px;
  line-height:1.25;color:var(--ink);
}
.recrail .ppl .who span{
  display:block;margin-top:3px;font-size:12.5px;line-height:1.35;color:var(--soft);
}
.recrail .ppl:hover .who b{color:var(--brass-deep)}

/* --- filed under --------------------------------------------------- */
.recrail .tops{display:flex;flex-wrap:wrap;gap:7px}
.recrail .tops a{
  display:inline-block;padding:5px 10px;
  border:1px solid var(--line);
  font-size:12.5px;color:var(--text);text-decoration:none;
  background:var(--paper);
}
.recrail .tops a:hover{border-color:var(--brass);color:var(--brass-deep)}

/* --- share ---------------------------------------------------------- */
/* Words, not logos. Four wordmarks in a rail would be the loudest thing
   on a page whose whole argument is restraint, and they are somebody
   else's brand colours besides. */
.recrail .shr{display:flex;flex-wrap:wrap;gap:7px}
.recrail .shr a{
  display:inline-block;padding:6px 11px;
  border:1px solid var(--line);
  font-family:var(--fb);font-size:12.5px;color:var(--text);
  text-decoration:none;
}
.recrail .shr a:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* --- read next ------------------------------------------------------ */
.recrail .nxt{display:block;text-decoration:none;padding:var(--s3) 0;border-top:1px solid var(--line)}
.recrail .nxt:first-of-type{border-top:none;padding-top:0}
.recrail .nxt .tg{
  display:block;font-family:var(--fb);font-weight:600;font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--brass-deep);margin-bottom:6px;
}
.recrail .nxt .ti{
  display:block;font-family:var(--fd);font-weight:400;font-size:16px;
  line-height:1.3;color:var(--ink);
}
.recrail .nxt .dt{
  display:block;margin-top:6px;font-family:var(--fm);font-size:11px;color:var(--soft);
}
.recrail .nxt:hover .ti{color:var(--brass-deep)}

/* --- narrow ---------------------------------------------------------- */
/* Below 1080 the rail stops being a rail: it unpins and follows the
   article, because a 300px column beside a 400px one is neither. */
@media(max-width:1080px){
  .reccol.has-rail{grid-template-columns:1fr}
  .reccol.has-rail .rich{max-width:38em}
  .recrail{position:static;max-width:34em}
  .railin{border-top-width:2px}
}


/* ═══════════════════════════════════════════════════════════════════
   The article body.
   ═══════════════════════════════════════════════════════════════════ */

/* --- headings, including the ones recovered from bold ------------- */
/* Same ladder as every other page: Newsreader 400, never a bold serif. */
.rich h2,
.rich h3{
  font-family:var(--fd);
  font-weight:400;
  letter-spacing:-.012em;
  color:var(--ink);
}
.rich h2{font-size:27px;line-height:1.18;margin:var(--s6) 0 var(--s3)}
.rich h3{font-size:21px;line-height:1.25;margin:var(--s5) 0 var(--s2)}
.rich h2:first-child,.rich h3:first-child{margin-top:0}
/* A recovered heading takes a short brass rule, so a reader can see the
   article has a structure even where the author did not mark one. */
.rich h2.lw-fromb::before{
  content:"";display:block;width:26px;height:2px;
  background:var(--brass);margin-bottom:13px;
}
/* The standfirst the client sets as an italic h3 at the very top is a
   standfirst, not a section heading. */
.rich > h3:first-child em{font-style:italic}

/* --- the interview ------------------------------------------------- */
/* Their interviews are an ordered list: each item opens with the question
   in bold and continues with the answer. Read as one block, question and
   answer are indistinguishable. Three changes separate them: the question
   moves to the serif, the answer stays in the sans, and the number leaves
   the text and sits in the margin in brass. */
.rich ol{
  list-style:none;
  margin:var(--s6) 0;
  padding:0;
  counter-reset:lwq;
}
.rich ol > li{
  counter-increment:lwq;
  position:relative;
  padding-left:var(--s6);
  padding-bottom:var(--s5);
  margin-bottom:var(--s5);
  border-bottom:1px solid var(--line);
}
.rich ol > li:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.rich ol > li::before{
  content:counter(lwq,decimal-leading-zero);
  position:absolute;left:0;top:4px;
  font-family:var(--fm);font-size:12px;letter-spacing:.06em;
  color:var(--brass-deep);
}
/* The question. */
.rich ol > li > strong:first-child,
.rich ol > li > b:first-child{
  display:block;
  font-family:var(--fd);
  font-weight:400;
  font-size:21px;
  line-height:1.3;
  letter-spacing:-.012em;
  color:var(--ink);
  margin-bottom:var(--s3);
}
/* A question typed across two lines with a break should read as one. */
.rich ol > li > strong:first-child br,
.rich ol > li > b:first-child br{content:" ";display:inline}
.rich ol > li > strong:first-child br::after,
.rich ol > li > b:first-child br::after{content:" "}

@media(max-width:640px){
  .rich ol > li{padding-left:0}
  .rich ol > li::before{position:static;display:block;margin-bottom:8px}
}


/* ═══════════════════════════════════════════════════════════════════
   The rail, given a structure.
   ═══════════════════════════════════════════════════════════════════ */

/* The lead block carries the weight; everything under it is reference. */
.recrail .raillead{padding-bottom:var(--s4)}
.recrail .leadpa{
  display:block;
  font-family:var(--fd);font-weight:400;font-size:24px;line-height:1.15;
  letter-spacing:-.012em;color:var(--ink);text-decoration:none;
}
.recrail .leadpa:hover{color:var(--brass-deep)}
.recrail .leadmore{
  display:inline-block;margin-top:10px;
  font-family:var(--fb);font-weight:500;font-size:12.5px;
  color:var(--brass-deep);text-decoration:none;
}
.recrail .leadmore:hover{text-decoration:underline;text-underline-offset:3px}
.recrail .leadmore .ar{display:inline-block;margin-left:5px;transition:transform .22s ease}
.recrail .leadmore:hover .ar{transform:translateX(4px)}

/* --- share: the glyphs, matching the footer ----------------------- */
.recrail .shr{display:flex;gap:8px}
.recrail .shr a{
  width:38px;height:38px;padding:0;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:50%;
  color:var(--text);background:transparent;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.recrail .shr a:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* --- read next: numbered, so two items read as a sequence --------- */
.recrail .railnext{counter-reset:lwn}
.recrail .nxt{counter-increment:lwn;position:relative;padding-left:26px}
.recrail .nxt::before{
  content:counter(lwn,decimal-leading-zero);
  position:absolute;left:0;top:var(--s3);
  font-family:var(--fm);font-size:11px;color:var(--brass);
}
.recrail .nxt:first-of-type::before{top:0}

/* --- the footer accounts are glyphs now, not words ---------------- */
footer .soc a{
  display:inline-flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.72);
}
footer .soc a:hover{color:var(--brass)}


/* ── The video page ────────────────────────────────────────────────
   The film needs width, so this column is not held to a reading
   measure: it takes whatever is left after the rail. The description
   below it is, because prose is prose. */
/* The film takes whatever the container leaves after the rail, so the two
   columns fill the width and nothing is left over to pool on one side. */
.reccol.is-video{grid-template-columns:minmax(0,1fr) 320px}
/* The prose keeps its 34em measure and starts on the film's left edge, so
   the column has one left margin the whole way down instead of the text
   stepping inward from the picture above it. */
.reccol.is-video .recmain .rich{max-width:34em;margin:var(--s5) 0 0}
.reccol.is-video .player,
.reccol.is-video .ytposter,
.reccol.is-video iframe{width:100%}
/* The poster was filling the column at its own proportions and running
   past the fold before the description began. The slot is 16:9, which is
   what the film is, and what the rail thumbs already reserve. */
.reccol.is-video .player,
.reccol.is-video .ytposter{position:relative;aspect-ratio:16/9;overflow:hidden;display:block}

/* The poster carries a caption so that a video CARD in a grid has a title.
   On the record page the H1 is already 400px above it, so the caption
   repeated it word for word and the play control landed on top of the
   repeat. Hidden here only; the cards keep theirs. */
.reccol.is-video .ytposter .cap{display:none}

/* With nothing to avoid, the control centres. */
.reccol.is-video .ytposter .play{
  left:50%;top:50%;transform:translate(-50%,-50%);
  transition:transform .25s ease, background-color .25s ease;
}
.reccol.is-video .ytposter:hover .play{transform:translate(-50%,-50%) scale(1.06)}
@media (prefers-reduced-motion:reduce){
  .reccol.is-video .ytposter .play{transition:none}
  .reccol.is-video .ytposter:hover .play{transform:translate(-50%,-50%)}
}
/* `> *` was catching the play control as well as the artwork, so the brass
   play button was stretched to inset:0 and filled the whole 768x432 poster.
   That flat brass slab was the video page's biggest visual fault, and it hit
   every one of the 466 video records. The affordance keeps its own placement
   from story.css. */
.reccol.is-video .player > *:not(.play),
.reccol.is-video .ytposter > *:not(.play),
.reccol.is-video .ytposter img,
.reccol.is-video iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* --- more like this ----------------------------------------------- */
.recrail .mrow{
  display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:start;
  padding:var(--s3) 0;border-top:1px solid var(--line);text-decoration:none;
}
.recrail .mrow:first-of-type{border-top:none;padding-top:0}
/* The slot is reserved at 16:9 whether or not there is artwork in it, so
   the rail does not reflow when real images replace the placeholders. */
.recrail .mthumb{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--ink)}
.recrail .mthumb > *,
.recrail .mthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.recrail .mbd{display:block;min-width:0}
.recrail .mrow .ti{
  display:block;font-family:var(--fd);font-weight:400;font-size:15px;line-height:1.28;
  color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.recrail .mrow .dt{
  display:block;margin-top:5px;font-family:var(--fm);font-size:10.5px;color:var(--soft);
}
.recrail .mrow:hover .ti{color:var(--brass-deep)}

@media(max-width:1080px){
  .reccol.is-video{grid-template-columns:1fr}
  .reccol.is-video .recmain .rich{max-width:34em}
}


/* ── The row image slot ────────────────────────────────────────────
   Deals and updates are a dated list, so the slot is small and sits
   first, before the date. Locked to the same 16:9 as every other slot
   on the site: one ratio, one crop to reason about, and real artwork
   drops in without the row changing height. */
.ixrows .ixrow{
  grid-template-columns:104px minmax(0,1fr) 216px;
  gap:var(--s4);
  align-items:start;          /* was baseline, against an 82px image block, so
                                 the date floated 68px below the row's top edge
                                 and nothing in the row shared a line */
  padding:20px 0;
}
.ixrows .ixrow .d{padding-top:4px}   /* optical: mono x-height against the serif */

/* The label sits in its own right column. Stacked above the headline it
   pushed the words down and left the right third of the row empty. */
.ixrows .ixrow .t{
  padding-top:5px;text-align:right;
  font-family:var(--fm);font-size:10.5px;letter-spacing:.09em;line-height:1.4;
  text-transform:uppercase;color:var(--brass-deep);
}
/* No max-width. The headline gets the column, which is the whole point of
   dropping the picture: most now hold one line instead of breaking at 64ch. */
.ixrows .ixrow h4{
  font-family:var(--fd);font-weight:400;font-size:19px;line-height:1.36;
  letter-spacing:-.005em;color:var(--ink);text-wrap:pretty;
}
@media(max-width:1100px){
  .ixrows .ixrow{grid-template-columns:96px minmax(0,1fr) 168px}
}
@media(max-width:860px){
  .ixrows .ixrow{grid-template-columns:1fr;gap:5px;padding:18px 0}
  .ixrows .ixrow .d{order:-1;padding-top:0}
  .ixrows .ixrow .t{order:-2;text-align:left;padding-top:0}
  .ixrows .ixrow h4{font-size:17px}
}


/* ── Two systematic failures the audit found ───────────────────────

   1. The doors in the onward block were the last bold serif left on the
      platform: h3 at Newsreader 600. Everything else moved off 600 when
      the direction landed; these were missed because they sit in their
      own component and matched none of the selectors that were changed. */
body:not(.home) .ondoors .door h3,
body:not(.home) .doors .door h3{font-weight:400;letter-spacing:-.012em}

/* 2. Every index page ran .ixbody and .onward back to back, both on
      paper. That is the one thing the design system says never to do,
      and it is why the foot of these pages reads as one long band. The
      onward block takes the tint, so the page alternates to the end. */
.onward{background:var(--brass-tint)}   /* was var(--tint), which is not a token
   anywhere in the system, so the declaration was invalid and the band fell back to
   transparent. Every index page has been running .ixbody and .onward back to back on
   paper, which the comment directly above this line says never to do. */

/* 3. The row's "Read →" is gone. The whole row is the link, so on 239 rows
      the arrow was 239 repetitions of a thing the cursor already says. The
      hover state carries the affordance instead. */

/* 4. The group heading already carries a 2px rule of its own, so the
      grid's cap rule drew a second line directly beneath it. One rule. */
.ixgroup .ixgrid{border-top:none}
/* An anchored group should not land with its heading under the masthead. */
.ixgroup{scroll-margin-top:calc(var(--mast-h,70px) + var(--s4))}


/* ═══════════════════════════════════════════════════════════════════
   India Unbound.
   Built from LawWiser's content in this platform's language. Uses the
   existing components wherever one exists; adds only what the page
   genuinely needs that nothing else does.
   ═══════════════════════════════════════════════════════════════════ */

.iuhead .ixtitle{max-width:none}
.iuhead .standfirst{max-width:54ch;font-style:italic;color:rgba(255,255,255,.7)}
.iuabout .iulede{max-width:64ch;margin:0 auto var(--s6);text-align:center}

/* --- the four figures ---------------------------------------------
   Rules, not cards. Four numbers in four boxes is a dashboard; four
   numbers divided by hairlines is a table, which is what this is. */
.iufigs{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:2px solid var(--ink);
}
.iufigs .iufig{
  padding:var(--s4) var(--s4) var(--s5);
  border-left:1px solid var(--line);
  background:var(--paper);
}
.iufigs .iufig:first-child{border-left:none}
.iufig .n{
  display:block;font-family:var(--fd);font-weight:300;
  font-size:clamp(32px,3.4vw,44px);line-height:1.05;letter-spacing:-.012em;color:var(--ink);
}
.iufig .t{
  display:block;margin-top:12px;font-family:var(--fb);font-size:13.5px;
  line-height:1.4;color:var(--text);max-width:22ch;
}
.iufig .s{
  display:block;margin-top:8px;font-family:var(--fm);font-size:11px;
  line-height:1.4;color:var(--soft);
}
@media(max-width:900px){
  .iufigs{grid-template-columns:repeat(2,1fr)}
  .iufigs .iufig:nth-child(odd){border-left:none}
  .iufigs .iufig:nth-child(n+3){border-top:1px solid var(--line)}
}
@media(max-width:560px){
  .iufigs{grid-template-columns:1fr;border-top:none}
  .iufigs .iufig{border-left:none;border-top:1px solid var(--line)}
}

/* --- the corridors ------------------------------------------------- */
.iugrid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:2px solid var(--ink)}
.iucard{
  display:block;text-decoration:none;
  padding:var(--s4) var(--s4) var(--s5);
  border-left:1px solid var(--line);
  background:var(--ground,var(--paper));
}
.iucard:first-child{border-left:none}
/* The image slot, reserved at 16:9 like every other slot on the site. */
.iuart{
  display:block;position:relative;aspect-ratio:16/9;overflow:hidden;
  background:var(--ink);margin-bottom:var(--s3);
}
.iuart .g{position:absolute;inset:0;background:linear-gradient(140deg,
  color-mix(in srgb,var(--ink) 92%,#000),color-mix(in srgb,var(--brass-dark) 34%,var(--ink-deep)))}
.iuart .m{position:absolute;inset:0}
.iuart .cc{
  position:absolute;left:14px;bottom:12px;
  font-family:var(--fm);font-size:11px;letter-spacing:.14em;color:var(--brass);
}
.iucard .no{
  display:block;font-family:var(--fm);font-size:11px;letter-spacing:.12em;color:var(--brass-deep);
  margin-bottom:8px;
}
.iucard h3{
  font-family:var(--fd);font-weight:400;font-size:22px;line-height:1.2;
  letter-spacing:-.012em;color:var(--ink);margin-bottom:8px;
}
.iucard p{font-size:14px;line-height:1.5;color:var(--soft);max-width:30ch;margin-bottom:var(--s3)}
.iucard .go{font-family:var(--fb);font-weight:500;font-size:12.5px;color:var(--brass-deep)}
.iucard .go .ar{display:inline-block;margin-left:5px;transition:transform .22s ease}
.iucard:hover .go .ar{transform:translateX(4px)}
@media(max-width:860px){
  .iugrid{grid-template-columns:1fr;border-top:none}
  .iucard{border-left:none;border-top:1px solid var(--line)}
}

/* --- latest: the quotation and the paper -------------------------- */
.iulat{display:grid;grid-template-columns:1.35fr 1fr;gap:0;border-top:1px solid rgba(255,255,255,.16)}
.iuquote{margin:0;padding:var(--s5) var(--s6) var(--s5) 0}
.iuquote blockquote{
  margin:0;font-family:var(--fd);font-weight:300;font-size:clamp(24px,2.6vw,32px);
  line-height:1.24;letter-spacing:-.012em;color:#fff;
}
.iuquote blockquote::before{content:"\201C"}
.iuquote blockquote::after{content:"\201D"}
.iuquote figcaption{display:flex;gap:12px;align-items:center;margin-top:var(--s4)}
.iupaper{
  display:block;text-decoration:none;padding:var(--s5) 0 var(--s5) var(--s6);
  border-left:1px solid rgba(255,255,255,.16);
}
.iupaper .kick{color:var(--brass)}
.iupaper h3{
  font-family:var(--fd);font-weight:400;font-size:26px;line-height:1.2;
  letter-spacing:-.012em;color:#fff;margin:var(--s2) 0 var(--s3);
}
.iupaper .go{font-family:var(--fb);font-weight:500;font-size:12.5px;color:var(--brass)}
.iupaper .go .ar{display:inline-block;margin-left:5px;transition:transform .22s ease}
.iupaper:hover .go .ar{transform:translateX(4px)}
@media(max-width:860px){
  .iulat{grid-template-columns:1fr}
  .iuquote{padding-right:0}
  .iupaper{border-left:none;border-top:1px solid rgba(255,255,255,.16);padding-left:0}
}

/* --- people, reserved ---------------------------------------------- */
.iupeople{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:2px solid var(--ink)}
.iuperson{
  display:flex;gap:14px;align-items:center;
  padding:var(--s4);border-left:1px solid var(--line);background:var(--paper);
}
.iuperson:first-child{border-left:none}
/* The portrait slot is square and reserved whether or not there is a
   face in it, so nothing moves when the real people arrive. */
.iuperson .pic,
.iuquote .pic{
  width:56px;height:56px;flex:0 0 56px;border-radius:50%;
  background:var(--brass-tint);display:block;
}
.iuquote .pic{width:44px;height:44px;flex-basis:44px;background:rgba(255,255,255,.12)}
.iuperson .who b,.iuquote .who b{
  display:block;font-family:var(--fd);font-weight:500;font-size:15px;color:var(--ink);
}
.iuquote .who b{color:#fff}
.iuperson .who span,.iuquote .who span{
  display:block;margin-top:3px;font-size:12.5px;color:var(--soft);
}
.iuquote .who span{color:rgba(255,255,255,.6)}
.iunote{
  margin-top:var(--s4);font-family:var(--fm);font-size:11.5px;color:var(--soft);
}
@media(max-width:860px){
  .iupeople{grid-template-columns:1fr;border-top:none}
  .iuperson{border-left:none;border-top:1px solid var(--line)}
}

/* 5. A heading on a dark ground is white. This was set per-component,
      by name, so any new dark section inherited ink on ink and its title
      vanished. Stated once, for every dark surface, so it cannot happen
      again on the next page we build. */
.s-dark h1,.s-deep h1,
.s-dark h2,.s-deep h2,
.s-dark h3,.s-deep h3{color:#fff}

/* --- India Unbound: the opening centres, and carries the figures ---
   The title block sits in the middle of the band like the section heads
   below it, so the page opens on the same axis it continues on. */
.iuhead .ixtop{display:block}
.iuhead .ixtitle{text-align:center;max-width:none}
/* The title is a capped block, so centring the text inside it left the
   block itself hard against the left edge and the words landed off the
   page's axis while the kicker and standfirst sat on it. Centre the box,
   not just the text. */
.iuhead .ixtitle h1{margin-left:auto;margin-right:auto;max-width:22ch}
.iuhead .ixtitle .kick{display:block}
.iuhead .standfirst{margin-left:auto;margin-right:auto;text-align:center}
.iuhead .iufigs{
  margin-top:var(--s6);
  border-top:1px solid rgba(255,255,255,.18);
}
/* On ink the hairlines and the type invert. */
.iuhead .iufigs .iufig{
  background:transparent;
  border-left:1px solid rgba(255,255,255,.14);
}
.iuhead .iufig .n{color:#fff}
.iuhead .iufig .t{color:rgba(255,255,255,.82)}
.iuhead .iufig .s{color:var(--brass)}
@media(max-width:900px){
  .iuhead .iufigs .iufig:nth-child(odd){border-left:none}
  .iuhead .iufigs .iufig:nth-child(n+3){border-top:1px solid rgba(255,255,255,.14)}
}
@media(max-width:560px){
  .iuhead .iufigs .iufig{border-left:none;border-top:1px solid rgba(255,255,255,.14)}
}


/* ═══════════════════════════════════════════════════════════════════
   The index opening.

   The band carried a record count and a last-added date in the far
   corner. Neither earned its place: a total is a vanity number and a
   date tells a reader nothing about whether the page is worth their
   time. Both are removed, and the band sizes to the words.

   The markup is still emitted; it is hidden here rather than stripped
   because what replaces it is still being decided. Once that is settled
   the element comes out of the template properly.
   ═══════════════════════════════════════════════════════════════════ */

.ixhead .ixtop{display:block}
.ixhead .ixtitle{max-width:none}
.ixhead .ixtitle .standfirst{max-width:54ch}
.ixhead .ixstats{display:none}


/* ── The events year filter ────────────────────────────────────────
   In the band rather than in a facet bar below it. There is one axis
   worth filtering these nine records on, and it belongs with the title.
   The category taxonomy could not do this: it carries a single term
   across every record. */
.ixyears{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-top:var(--s6);padding-top:var(--s4);
  border-top:1px solid rgba(255,255,255,.18);
}
.ixyears .yr{
  display:inline-flex;align-items:baseline;gap:7px;
  padding:9px 15px;
  border:1px solid rgba(255,255,255,.22);
  font-family:var(--fb);font-weight:500;font-size:13px;
  color:rgba(255,255,255,.86);text-decoration:none;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.ixyears .yr span{
  font-family:var(--fm);font-size:10.5px;
  color:var(--brass);
}
.ixyears .yr:hover{border-color:var(--brass);color:#fff}
.ixyears .yr.on{background:var(--brass);border-color:var(--brass);color:var(--ink)}
.ixyears .yr.on span{color:color-mix(in srgb,var(--ink) 70%,var(--brass))}


/* ── The index opening centres, as India Unbound does ──────────────
   Every page now opens on the same axis. The content below stays
   ranged left: a heading reads well centred, a grid of records does
   not, which is the rule the section heads already follow. */
.ixhead .ixtitle{text-align:center}
/* The kicker carries a 2px brass rule under it. As a block it stretched
   that rule across the whole 1252px container, which is the long line
   under EVENTS. Inline-block sizes it to the words; the parent's
   text-align does the centring. This was mine: I set display:block to
   centre it and took the rule's width with it. */
.ixhead .ixtitle .kick{display:inline-block}
/* The title is a capped block, so the box has to centre too, not just
   the text inside it. */
.ixhead .ixtitle h1{margin-left:auto;margin-right:auto;max-width:24ch}
.ixhead .ixtitle .standfirst{margin-left:auto;margin-right:auto;text-align:center}
/* "Home > Events" sat directly above a kicker reading EVENTS: the same
   word twice, two lines apart. The kicker names the page, so the trail
   goes. India Unbound already drops it for the same reason. */
.ixhead .crumbs{display:none}
.ixhead .ixyears{justify-content:center}
/* The filter bar under the band centres with everything above it. */
.ixhead .ixfacets{justify-content:center}


/* ── India Unbound, with the real content in it ────────────────────
   Four corridors now, eight experts, sourced figures and a quotation
   that runs to two paragraphs rather than one line. The grids size
   themselves, because the brief says more corridors are coming and a
   corridor may carry several pieces. */

/* Sources. Every figure that has one carries it, because a number on a
   client page without a source is the thing we said we would not do. */
.iufig .src{
  display:inline-block;margin-top:10px;
  font-family:var(--fm);font-size:10px;line-height:1.4;
  color:var(--brass);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--brass) 40%,transparent);
}
.iufig .src:hover{color:#fff;border-bottom-color:currentColor}

/* Corridors: four to a row, wrapping. Fixed rather than auto-fit, which
   laid out five tracks for four cards and left an empty column. A fifth
   corridor wraps to a second row of its own accord. */
.iugrid{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.iugrid{grid-template-columns:repeat(2,1fr)}
  .iucard:nth-child(-n+4){border-top:1px solid var(--line)}
  .iucard:nth-child(-n+2){border-top:none}}
@media(max-width:620px){.iugrid{grid-template-columns:1fr}}
.iucard{border-top:1px solid var(--line)}
.iucard:nth-child(-n+4){border-top:none}

/* The quotation stands alone now: no research panel beside it, and it
   runs long, so it drops from display size to a readable one. */
.iuquote.solo{max-width:62ch;margin:0 auto;padding:var(--s5) 0 0;text-align:left}
.iuquote.solo blockquote{font-size:clamp(19px,1.7vw,23px);line-height:1.45}
.iuquote.solo blockquote::before,
.iuquote.solo blockquote::after{content:none}
.iuquote.solo blockquote p{margin:0 0 var(--s3);max-width:none;color:#fff}
.iuquote.solo blockquote p:first-child::before{content:"\201C"}
.iuquote.solo blockquote p:last-child::after{content:"\201D"}
.iuquote.solo figcaption{justify-content:flex-start;margin-top:var(--s4);
  padding-top:var(--s4);border-top:1px solid rgba(255,255,255,.16)}

/* Eight people, four across, wrapping to two rows.
   Fixed at four rather than auto-fit: auto-fit put five in the first row
   and three in the second, which reads as a mistake and also breaks the
   rule that hides the top border on the first row. Four matches the
   figures row above and gives 4 + 4. */
.iupeople{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.iupeople{grid-template-columns:repeat(2,1fr)}
  .iuperson:nth-child(-n+4){border-top:1px solid var(--line)}
  .iuperson:nth-child(-n+2){border-top:none}}
@media(max-width:620px){.iupeople{grid-template-columns:1fr}}
.iuperson{align-items:flex-start;flex-direction:column;gap:var(--s3)}
.iuperson:nth-child(-n+4){border-top:none}
.iuperson{border-top:1px solid var(--line)}
/* The portrait slot is square and reserved whether or not there is a face
   in it yet, so the grid does not move when the photographs arrive. */
.iuperson .pic{width:72px;height:72px;flex-basis:72px;
  background:color-mix(in srgb,var(--brass) 16%,var(--paper));
  border:1px solid var(--line);border-radius:50%}
.iuperson .who .org{
  display:block;margin-top:4px;font-size:12.5px;line-height:1.35;color:var(--soft);
}
.iuperson .who .org i{
  display:block;margin-top:3px;font-style:normal;
  font-family:var(--fm);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--brass-deep);
}
@media(max-width:860px){
  .iucard,.iuperson{border-top:1px solid var(--line)!important}
  .iucard:first-child,.iuperson:first-child{border-top:none!important}
}

/* A supplied portrait fills its reserved slot exactly, so a person with a
   photograph and one without occupy the same space. */
.iuperson .pic.has,
.iuquote .pic.has{padding:0;border:none;overflow:hidden}
.iuperson .pic.has img,
.iuquote .pic.has img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}


/* ── The portraits ─────────────────────────────────────────────────
   object-position can pan but it cannot zoom, so a head cropped at the
   crown could not be rescued by moving it. The portrait is fitted whole
   (contain) and then scaled back in, which gives two controls per face:
   scale is how close, transform-origin is where. Read off the source
   images one at a time, not guessed.

   1.25 is the baseline: at that scale a 4:5 portrait fills the square
   exactly, which is what cover was doing. Below it, more of the frame
   comes back. */
.iuperson .pic.has img,
.iuquote .pic.has img{
  object-fit:contain;
  object-position:50% 50%;
  transform:scale(1.25);
  transform-origin:50% 42%;
}
.pic.has[data-who="abdulredha-al-lawati"] img{transform:scale(1.02);transform-origin:50% 34%}
.pic.has[data-who="aditi-anil-chavan"]   img{transform:translate(0,-5%) scale(1.04);transform-origin:50% 42%}
.pic.has[data-who="jan-holthuis"]        img{transform:scale(1.05);transform-origin:53% 40%}
.pic.has[data-who="ramkumar-r"]          img{transform:scale(1.16);transform-origin:47% 30%}
.pic.has[data-who="diego-botana"]        img{transform:translate(-11%,0) scale(1.26);transform-origin:49% 36%}
.pic.has[data-who="debopam-dutta"]       img{transform:translate(12%,0) scale(1.22);transform-origin:54% 42%}
.pic.has[data-who="mehak-oberoi"]        img{transform:scale(1.25);transform-origin:50% 42%}
.pic.has[data-who="abdullah-alowimari"]  img{transform:scale(1.18);transform-origin:47% 36%}
.pic.has[data-who="mayuri-vats"]         img{transform:scale(1.20);transform-origin:49% 40%}

/* Every portrait is a studio cutout on a white ground, so on paper each
   one read as a white disc rather than as a person. Multiply drops that
   white into the paper behind it and the figure sits on the page. */
.iuperson .pic.has{background:transparent;border:none}
.iuperson .pic.has img{mix-blend-mode:multiply}

/* ── The person cell ───────────────────────────────────────────────
   Paper cards on a paper band are invisible boxes. The cell now lifts on
   hover: ink ground, type inverted, and the portrait switches back to a
   normal blend over a paper disc so the cutout still reads. */
.iuperson{
  transition:background .22s ease, border-color .22s ease;
}
.iuperson:hover{background:var(--ink);border-left-color:var(--ink)}
.iuperson:hover .who b{color:#fff}
.iuperson:hover .who span{color:rgba(255,255,255,.72)}
.iuperson:hover .who .org i{color:var(--brass)}
.iuperson:hover .pic.has{background:var(--paper)}
.iuperson:hover .pic.has img{mix-blend-mode:normal}
/* The quotation sits on ink already, so its portrait keeps a paper disc
   and never multiplies. */
.iuquote .pic.has{background:var(--paper);border:none}

/* About us writes its section head straight into .wrap rather than wrapping
   it in .sh-l as the engine templates do, and it was the one head on the
   site still ranged left. Centred with the rest. */
body:not(.home) .wrap > .shead{text-align:center}
body:not(.home) .wrap > .shead > *{margin-left:auto;margin-right:auto}


/* ── Testimonials ──────────────────────────────────────────────────
   Three, ruled rather than carded, in the same language as the rest of
   the page. The quotation carries at display size because it is the
   point of the section; the attribution stays small underneath it.
   Not scoped off the home page: .tsts exists only there. */
.tsts{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:2px solid var(--ink)}
.tst{margin:0;padding:var(--s5) var(--s5) var(--s5) var(--s5);border-left:1px solid var(--line);
  display:flex;flex-direction:column}
.tst:first-child{border-left:none;padding-left:0}
.tst blockquote{margin:0 0 var(--s5);flex:1;
  font-family:var(--fd);font-weight:400;font-size:clamp(16px,1.5vw,19px);
  line-height:1.42;letter-spacing:-.008em;color:var(--ink)}
.tst blockquote::before{content:"\201C"}
.tst blockquote::after{content:"\201D"}
.tst figcaption{display:flex;gap:12px;align-items:center}
/* Studio cutouts on white, as India Unbound's were, so the same treatment
   drops that white into the paper behind it. */
.tst .pic{width:46px;height:46px;flex:0 0 46px;border-radius:50%;overflow:hidden;display:block}
.tst .pic img{width:100%;height:100%;object-fit:cover;object-position:50% 28%;display:block;mix-blend-mode:multiply}
.tst .who b{display:block;font-family:var(--fd);font-weight:500;font-size:15px;line-height:1.25;color:var(--ink)}
.tst .who span{display:block;margin-top:3px;font-size:12px;line-height:1.35;color:var(--soft)}
@media(max-width:860px){
  .tsts{grid-template-columns:1fr;border-top:none}
  .tst{border-left:none;border-top:1px solid var(--line);padding-left:0}
  .tst:first-child{border-top:none}
}

/* --- the testimonial band, in the system -------------------------- */
/* Paper backing so the arcs ground never crosses a quotation, which is
   the rule every other grid on the site follows. */
.tsts .tst{background:var(--paper)}
/* Reveals in sequence, like the section heads above it. */
html.js .tsts > *{opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease}
html.js .tsts.in > *{opacity:1;transform:none}
html.js .tsts.in > *:nth-child(2){transition-delay:.06s}
html.js .tsts.in > *:nth-child(3){transition-delay:.12s}
html.js .tsts.in > *:nth-child(n+4){transition-delay:.18s}
@media (prefers-reduced-motion:reduce){html.js .tsts > *{opacity:1!important;transform:none!important}}
/* Twelve of them, so rows need separating as well as columns. */
.tsts .tst{border-bottom:1px solid var(--line)}
.tsts .tst:nth-child(3n+1){border-left:none;padding-left:0}

/* ── The onward block lays out to how many doors it has ─────────────
   .ondoors is repeat(3,1fr) in story.css regardless of contents. Every
   index that offers two links therefore drew two cards and one empty
   track, left-aligned under a centred heading. Two and one now centre,
   and take a little more width each so the row reads as deliberate
   rather than as a three-up with one missing. */
.ondoors.n2{grid-template-columns:repeat(2,minmax(0,520px));justify-content:center}
.ondoors.n1{grid-template-columns:minmax(0,520px);justify-content:center}
@media(max-width:1180px){
  .ondoors.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .ondoors.n2,.ondoors.n1{grid-template-columns:1fr}
}

/* ── The practice area hubs ────────────────────────────────────────
   Twenty one pages on one template. Their surfaces alternate already,
   but the paper bands carried no ground, so they sat outside the
   geometry system. Applied by position, which reaches every hub at
   once without touching the template. Two motifs so the page does not
   run the same ground twice. */
.hubhead ~ section.s-paper:not(.onward){position:relative;isolation:isolate;overflow:hidden}
.hubhead ~ section.s-paper:not(.onward) > *{position:relative;z-index:1}
.hubhead ~ section.s-paper:not(.onward)::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 72%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 72%,transparent 100%);
  background:repeating-linear-gradient(90deg,
    color-mix(in srgb,var(--text) 6%,transparent) 0 1px,transparent 1px 64px);
}
.hubhead ~ section.s-paper:not(.onward) ~ section.s-paper:not(.onward)::before{
  background:repeating-linear-gradient(0deg,
    color-mix(in srgb,var(--text) 5%,transparent) 0 1px,transparent 1px 38px);
}
.hubhead ~ section.s-paper .ixcard,
.hubhead ~ section.s-paper .ixrow{background:var(--paper)}

/* ══ LEGACY EVENT BODIES ══════════════════════════════════════════════
   Seven event records still hold the old theme's Bootstrap markup:
   .row / .col-lg-*, .speaker_box, .event_org_img, and nav-tabs panels.
   Audited across the whole site, it is only those seven: 0 of 61 posts,
   0 of 466 videos, 0 of 239 deals, 0 of 114 glossary terms, 0 of 10
   tracks, 0 of 76 pages. Bootstrap is not loaded on this build, so the
   columns had no width and every speaker stacked in a single narrow
   file, while the tab controls rendered as inert boxes.

   Everything here is scoped to .rich so it can never reach the rest of
   the site, and it styles the markup as it exists rather than asking
   anyone to re-enter seven pages of content. ─────────────────────── */
.rich .row{
  display:flex;flex-wrap:wrap;gap:var(--s4);
  align-items:flex-start;                 /* ragged card heights must not
                                             stretch their neighbours */
  margin:var(--s4) 0;padding:0;list-style:none;
}
/* No flex-grow. With it, a lone card in its own row stretched to the full
   642px column while its siblings elsewhere sat at 198, so the same
   component came out three different sizes down one page. */
.rich [class*="col-lg-3"]{flex:0 1 190px;min-width:0}
/* col-*-4 is a third of the row. At a fixed 210px three of them needed
   678px in a 643px column, so the third logo dropped to a line of its own
   and the set read as 2 + 1. Sized to an actual third instead. */
.rich [class*="col-lg-4"]{flex:0 1 calc((100% - 2 * var(--s4)) / 3);min-width:0}
.rich [class*="col-lg-"]:not([class*="col-lg-3"]):not([class*="col-lg-4"]){flex:0 1 240px;min-width:0}
/* The learning sessions use col-xl-* rather than col-lg-*, so they fell
   through the rules above and rendered as 0-width blocks. */
.rich [class*="col-xl-4"],
.rich [class*="col-md-4"]{flex:0 1 calc((100% - 2 * var(--s4)) / 3);min-width:0}
.rich [class*="col-xl-"]:not([class*="col-xl-4"]){flex:0 1 240px;min-width:0}
/* Bootstrap leaves empty grid cells behind; with a flex gap they become
   phantom columns. :empty does not match them because they hold whitespace,
   so this tests for the absence of any element child instead. */
.rich .row > [class*="col-"]:not(:has(*)){display:none}
/* The markup asks for this and Bootstrap is not here to honour it. */
.rich .row.justify-content-center{justify-content:center}

/* Speaker cards */
.rich .speaker_box{text-align:center}
.rich .speaker_img{
  position:relative;                     /* the crop box the image fills */
  aspect-ratio:1;overflow:hidden;
  border-radius:50%;                     /* the site's people shape: the Circle
                                            faces and the community avatars are
                                            already round, so speakers match */
  width:150px;margin:0 auto 12px;        /* narrower than the card, centred, so
                                            the round crop reads as a portrait
                                            rather than as a filled square */
  background:var(--ground,var(--paper));
}
.rich .speaker_img > p{margin:0}
/* WordPress's autop wraps each image in a <p>, so height:100% had no
   resolved height to measure against and fell back to the file's own
   proportions: two of the ten came out 190x232 and 190x188 in a 190x190
   box. Absolute positioning takes the wrapper out of the question. */
.rich .speaker_img img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;display:block;
}
.rich .speaker_box h6{
  font-family:var(--fb);font-weight:500;font-size:13px;line-height:1.35;
  margin:0;color:var(--ink);
}

/* Partner logos sit on white: they are supplied as trimmed marks. */
/* Logos come in at every proportion, so the plate is fixed and the mark is
   contained inside it. Left to size themselves the three plates came out
   147, 102 and 153 tall and nothing lined up. */
/* Plates carried the old theme's padding: 26px, 0 and 65px on the three,
   so the tallest broke its own aspect ratio and came out 149 against 140.
   Padding is set here, and the mark is bounded by the plate rather than
   the other way round. */
.rich .event_org_img{
  display:grid;place-items:center;aspect-ratio:3/2;
  padding:18px!important;overflow:hidden;
  background:#fff;border:1px solid var(--line);
}
/* Some events wrap a partner logo in .event_org_img and some just drop a
   bare image into a column, so the same content came out as a plated mark
   on one page and a raw navy rectangle on another. Any column that is not
   a speaker and not already plated gets the same plate. */
.rich .row > [class*="col-"]:not(:has(.speaker_box)):not(:has(.event_org_img)):has(img){
  display:grid;place-items:center;aspect-ratio:3/2;padding:18px;
  background:#fff;border:1px solid var(--line);overflow:hidden;
}
.rich .row > [class*="col-"]:not(:has(.speaker_box)):not(:has(.event_org_img)):has(img) img{
  max-width:100%;max-height:100%;width:auto!important;height:auto!important;
  object-fit:contain;display:block;
}
.rich .row > [class*="col-"]:has(img) p{margin:0}

.rich .event_org_img p{margin:0}
.rich .event_org_img a{display:block;line-height:0}
.rich .event_org_img img{
  max-width:100%;max-height:100%;
  width:auto!important;height:auto!important;object-fit:contain;display:block;
}

/* The build-mode marker puts a red dot after links that still need a
   destination. It is meant for our own nav, not for a partner's logo
   sitting inside imported content. */
body.lw-build .rich a::after{content:none!important}

/* The tab strip is driven by Bootstrap's JS, which is not loaded, so the
   buttons did nothing and both panels showed anyway. The dead control row
   goes, both panels stay, and each gets the heading the button used to
   carry. */
.rich .nav-tabs{display:none}
/* The parent theme's stylesheet still loads and puts 48px of side padding
   on .tab-pane, which ate 96px of a 642px column and forced the speaker
   grid down to two across. */
.rich .tab-pane{display:block;opacity:1;padding:0}
.rich .container,.rich .event_tab_content_block{padding:0;margin:0;max-width:none}
.rich .tab-pane::before{
  display:block;margin:var(--s5) 0 var(--s3);
  font-family:var(--fm);font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--brass-deep);
}
.rich #event_speaker::before{content:"Speakers"}
.rich #event_organiser::before{content:"Event partners"}

/* Legacy embeds carry width="560" height="315" attributes. */
.rich iframe{width:100%;height:auto;aspect-ratio:16/9;display:block;margin:var(--s4) 0;border:0}

@media(max-width:620px){
  .rich [class*="col-lg-3"],
  .rich [class*="col-lg-4"]{flex:1 1 40%}
}

/* ── The report a session launched ─────────────────────────────────
   Sits at the foot of the event body, above the subjects. Ink ground so
   it reads as the one thing to take away from the page rather than as
   another link in the prose. */
.evreport{
  display:grid;grid-template-columns:1fr auto;align-items:center;
  gap:var(--s3) var(--s5);
  margin:var(--s6) 0 0;padding:var(--s5);
  background:var(--ink);text-decoration:none;
  transition:background-color .25s ease;
}
.evreport:hover{background:var(--ink-deep,#101216)}
.evreport .kick{grid-column:1;color:var(--brass);display:block}
.evreport h3{
  grid-column:1;margin:6px 0 0;
  font-family:var(--fd);font-weight:400;font-size:clamp(19px,2vw,24px);
  line-height:1.25;color:#fff;
}
.evreport .meta{
  grid-column:1;margin-top:8px;
  font-family:var(--fm);font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:rgba(255,255,255,.55);
}
.evreport .go{
  grid-column:2;grid-row:1/4;align-self:center;white-space:nowrap;
  font-family:var(--fb);font-weight:500;font-size:14px;color:var(--brass);
}
.evreport:hover .ar{transform:translateX(4px)}
@media(max-width:620px){
  .evreport{grid-template-columns:1fr}
  .evreport .go{grid-column:1;grid-row:auto;margin-top:var(--s3)}
}

/* ── Reports ───────────────────────────────────────────────────────
   The card is the report's own cover. WordPress renders the first page
   of a PDF on upload, so three of the four already had one and the
   fourth generated cleanly; nothing here is drawn or stood in for. A
   document with its cover on a light card reads as a library, which is
   what this page is, rather than as another navigational door. */
.repcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
.repcard{
  display:grid;grid-template-columns:168px minmax(0,1fr);
  gap:var(--s4);align-items:start;
  padding:var(--s4);background:var(--paper);
  border:1px solid var(--line);text-decoration:none;
  transition:border-color .25s ease, background-color .25s ease;
}
.repcard:hover{border-color:var(--brass);background:color-mix(in srgb,var(--brass) 4%,var(--paper))}

.repcard .cover{
  display:block;aspect-ratio:1/1.414;      /* the page these files are */
  overflow:hidden;background:var(--ground,var(--paper));
  box-shadow:var(--shadow-soft,0 1px 2px rgba(26,29,35,.10),0 8px 24px rgba(26,29,35,.08));
}
/* contain, not cover. Three of the four are A4 portrait and fill the frame
   exactly; the 2025 edition is a landscape spread and a portrait crop cut
   its title to "nsider". A cover is the one image you must never crop. */
.repcard .cover img{
  width:100%;height:100%;object-fit:contain;display:block;
  transition:transform .45s cubic-bezier(.2,.6,.2,1);
}
.repcard:hover .cover img,
.repcard:focus-visible .cover img{transform:scale(1.05)}
@media (prefers-reduced-motion:reduce){
  .repcard .cover img{transition:none}
  .repcard:hover .cover img{transform:none}
}

.repcard .bd{display:flex;flex-direction:column;min-width:0}
.repcard .n{
  font-family:var(--fm);font-size:12px;letter-spacing:.16em;
  color:var(--brass-deep);
}
.repcard h3{
  font-family:var(--fd);font-weight:400;font-size:clamp(19px,1.9vw,23px);
  line-height:1.24;letter-spacing:-.006em;color:var(--ink);
  margin:var(--s3) 0 0;
}
.repcard .cnt{
  font-family:var(--fm);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--soft);margin-top:auto;padding-top:var(--s4);
}
.repcard .go{
  font-family:var(--fb);font-weight:500;font-size:14px;color:var(--brass-deep);
  margin-top:var(--s2);padding-top:var(--s3);border-top:1px solid var(--line);
}
.repcard:hover .ar{transform:translateX(4px)}

@media(max-width:980px){ .repcards{grid-template-columns:1fr} }
@media(max-width:520px){
  .repcard{grid-template-columns:120px minmax(0,1fr);gap:var(--s3)}
}

/* ── The room ──────────────────────────────────────────────────────
   266 photographs across seven events were stored and shown nowhere.
   A contact strip uses every one of them: fixed height, natural
   widths, scrolled sideways, so a 67-frame evening costs one band of
   page rather than seventeen rows of grid. Mixed orientations are the
   point of a contact sheet, so nothing is cropped to a common shape. */
.evgal{margin:var(--s6) 0 0}
.evgal-h{margin-bottom:var(--s4)}
.evgal-h .standfirst{margin:var(--s2) 0 0}

.evstrip{
  display:flex;gap:10px;list-style:none;margin:0;padding:0 0 var(--s3);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;
}
.evstrip::-webkit-scrollbar{height:6px}
.evstrip::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ink) 22%,transparent)}
.evstrip li{
  flex:0 0 auto;height:210px;scroll-snap-align:start;
  background:var(--ground,var(--paper));overflow:hidden;
}
.evstrip img{
  height:100%;width:auto;display:block;
  transition:transform .45s cubic-bezier(.2,.6,.2,1);
}
.evstrip li:hover img{transform:scale(1.04)}
.evstrip:focus-visible{outline:2px solid var(--brass);outline-offset:4px}

@media(max-width:720px){ .evstrip li{height:150px} }
@media (prefers-reduced-motion:reduce){
  .evstrip img{transition:none}
  .evstrip li:hover img{transform:none}
}

/* ── Long record titles ────────────────────────────────────────────
   The measure was set for a title of a few words. This session is
   called "LawWiser Learning Session - Examining Grey Areas: PMLA &
   CrPC Jurisdictional Overlap and Enforcement Strategies", which ran
   to seven lines in 655px and left 641px of the band empty beside it.
   A wider cap takes it to five and puts the mass back under the eye,
   while staying far short of the full 1252 where a display face
   becomes unreadable. */
.rechead .recwrap h1{max-width:min(100%,17ch)}
@media(min-width:1100px){
  .rechead .recwrap h1{max-width:min(100%,880px)}
}

/* ── Subjects inside the rail ──────────────────────────────────────
   .recsubj was written to stand alone under the body, where a 48px
   margin, 32px of padding and its own top rule are right. Moved into
   the rail it stacked all three on top of a block that already ends
   with a rule: 130px of gap between two hairlines, which reads as an
   empty block rather than as a division. */
.railin > .recsubj{margin-top:0;padding-top:0;border-top:0}

/* ── Contributor ───────────────────────────────────────────────────
   These records carry a name, a designation and a photograph, and
   nothing else, so the page leads with the person and then lists
   everything they are in. The face is round, matching the speakers,
   the Circle members and the community avatars. */
.cbhead{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap}
.cbface{
  flex:0 0 132px;width:132px;aspect-ratio:1;border-radius:50%;
  overflow:hidden;background:rgba(255,255,255,.07);display:block;
}
.cbface img{width:100%;height:100%;object-fit:cover;display:block}
.cbid{min-width:0;flex:1 1 320px}
.cbid h1{margin:var(--s2) 0 0}
.cbid .standfirst{margin:var(--s3) 0 0;max-width:46ch}
@media(max-width:620px){
  .cbface{flex-basis:96px;width:96px}
  .cbhead{gap:var(--s4)}
}

/* A contributor with nothing filed against them is not a link, so it must
   not look like one or behave like one. */
.ppl.nolink{cursor:default}
.ppl.nolink:hover b{color:inherit}

/* ══ CONTACT ══════════════════════════════════════════════════════════
   Four faults, measured on the page rather than guessed:

   1. The dark band ended flush against the standfirst. `.ixhead.s-dark`
      carries padding-bottom:0 because it expects a filter bar under it,
      and `.nofacets` is the switch that gives the padding back. The
      template never set it. Fixed in page-contact-us.php.

   2. Contact Form 7 emits the fields inside Bootstrap markup: a .row of
      .form-group.col-md-6 pairs, meant to sit two to a line. Bootstrap
      is not loaded here, so all five stacked full width and the form ran
      to 752px. Laid out as the markup intends: name beside email, phone
      beside subject, message and submit across both.

   3. CF7 also writes a literal <br> between every label and its input.
      With the label's own margin under it that is ~28px of air inside
      each field, 96px of paragraph for a 47px input.

   4. The inputs were transparent on paper, so they read as faint
      outlines rather than as somewhere to type. White fill gives them a
      floor without adding a border weight the palette does not use.
   ─────────────────────────────────────────────────────────────────── */
.ctform .row{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:var(--s4);
}
.ctform .form-group{min-width:0}
/* message and submit carry no col- class: they take the full width */
.ctform .form-group:not([class*="col-md-6"]){grid-column:1 / -1}

.ctform br{display:none}
.ctform .wpcf7-form-control-wrap{display:block}
.ctform p{margin:0 0 var(--s4)}
.ctform label{margin-bottom:8px}

.ctform input[type=text],.ctform input[type=email],.ctform input[type=tel],
.ctform input[type=url],.ctform textarea,.ctform select{background:#fff}
.ctform textarea{min-height:150px}

/* The terms line reads as a caption to the button, not as body copy. */
.ctform .large-center-btn p,
.ctform .text-center p{margin-bottom:var(--s3)}
.ctform .form-group.text-center{margin-top:var(--s2)}

/* The two columns start on the same line. The kicker's top margin used to
   collapse out through .ctintro; making the column sticky contained it and
   dropped the whole column 52px below the first field. Sticky bought little
   once the form came down to 542px against the intro's 331, so it went and
   the margin is zeroed at the source instead. */
.ctintro > :first-child{margin-top:0}

@media(max-width:640px){
  .ctform .row{grid-template-columns:1fr}
  .ctform .form-group{grid-column:1 / -1}
}

/* ── Contact: the three desks ──────────────────────────────────────
   The first card carried padding-left:0 so its content sat flush with
   the section edge, while the other two were inset 32px from their
   dividers. The "01" landed in the corner where the rule meets the
   edge and the set read as unaligned. Equal inset on all three. */
.ctgrid .ctcol:first-child{padding-left:var(--s5)}

/* Two of the three are no longer anchors, so the hover that lived on
   a.ctcol has to hang off the card itself. */
.ctgrid .ctcol{transition:background-color .25s ease}
.ctgrid .ctcol:hover{background:color-mix(in srgb,var(--brass) 4%,transparent)}

.ctacts{display:flex;align-items:center;gap:var(--s4);margin-top:var(--s4);flex-wrap:wrap}
.ctacts .go{margin-top:0}
.ctcopy{
  font-family:var(--fb);font-weight:500;font-size:13px;
  color:var(--soft);background:none;border:0;padding:0;cursor:pointer;
  border-bottom:1px solid var(--line);
  transition:color .2s ease,border-color .2s ease;
}
.ctcopy:hover{color:var(--ink);border-bottom-color:var(--brass)}
.ctcopy:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.ctcopy.done{color:var(--brass-deep);border-bottom-color:transparent}

/* ══ CONTACT: giving the page a face ══════════════════════════════════
   It was correct but characterless: five white rectangles floating on
   beige with nothing holding them. Nothing new is invented here. The
   form takes the plate the report covers and the partner logos already
   use, and the three promises take the numbered form of the three desks
   at the foot of the same page, so the two halves rhyme. */

/* 1. The form is an object on the ground, not fields loose on it. */
.ctmain .ctform{
  background:#fff;
  /* lab.css caps .ctform at 34em, which was right for loose fields on the
     ground and wrong for a plate: it left 127px of the column bare to the
     right of the panel. The measure now lives on the fields inside it. */
  max-width:none;
  border:1px solid var(--line);
  padding:var(--s5);
  box-shadow:0 1px 2px rgba(26,29,35,.05), 0 14px 34px rgba(26,29,35,.05);
}
/* the inputs sit on that plate, so they take the tint rather than white
   on white, which is what made them read as outlines in the first place */
.ctmain .ctform input[type=text],.ctmain .ctform input[type=email],
.ctmain .ctform input[type=tel],.ctmain .ctform input[type=url],
.ctmain .ctform textarea,.ctmain .ctform select{
  background:var(--paper);border-color:var(--line);
}
.ctmain .ctform input:focus,.ctmain .ctform textarea:focus{
  background:#fff;border-color:var(--brass);
}

/* 2. The promises, numbered like the desks below them. */
.ctwhat{list-style:none;margin:var(--s5) 0 0;padding:0;border-top:1px solid var(--line)}
.ctwhat li{
  display:grid;grid-template-columns:34px 1fr;align-items:baseline;gap:var(--s3);
  padding:13px 0;border-bottom:1px solid var(--line);position:relative;
  font-size:14px;line-height:1.45;color:var(--text);
}
.ctwhat li::before{content:none}
.ctwhat li b{
  font-family:var(--fm);font-weight:400;font-size:11px;letter-spacing:.14em;
  color:var(--brass);
}

/* 3. The kicker gets the brass rule the head band already uses, so the
      section opens the way the page opened. */
.ctintro .kick{position:relative;padding-bottom:10px}
.ctintro .kick::after{
  content:"";position:absolute;left:0;bottom:0;width:38px;height:1px;
  background:var(--brass);
}

@media(max-width:640px){
  .ctmain .ctform{padding:var(--s4)}
}

/* ── India Unbound: the corridor cards ─────────────────────────────
   Two faults, both measured:

   1. The cards are display:block, so each "Get more insights" sat
      wherever its own copy ended. India and Oman has a one-line
      description against two lines on the other three, so its link
      floated 21px above the rest and the row read as unaligned. The
      card is a column now and the link is pushed to the foot, so all
      four sit on one line whatever the copy does.

   2. The corridor label sat directly on the artwork with no backing.
      Across four different motifs, rules, grid, columns and diagonals,
      the same brass text landed on four different densities: legible on
      OMAN's dark band, almost lost in UK's horizontal rules. A solid
      chip makes it read identically on all four, and is the same
      treatment the video cards already give their duration label. */
.iucard{display:flex;flex-direction:column}
.iucard p{margin-bottom:var(--s4)}
.iucard .go{margin-top:auto}

.iuart .cc{
  left:10px;bottom:10px;
  padding:4px 8px;
  background:color-mix(in srgb,var(--ink-deep) 82%,transparent);
  color:var(--brass);
  line-height:1;
}

/* ══ SUBJECTS ═════════════════════════════════════════════════════════
   318 subjects over 23 letter groups in one 7,081px band. Six things
   were missing against the rest of the site, all measured:

   1. 244px of dead space between a subject and its count on a 400px
      row, with nothing bridging it. The eye cannot track from "Abuse of
      Dominance" to its "2". A dotted leader is the oldest fix in
      typesetting and the right one for an index.
   2. The A-Z bar was static, so after the first screen there was no
      navigation for seven thousand pixels. It sticks now.
   3. The letter headings were centred over left-aligned lists, so each
      letter floated free of the rows it belongs to.
   4. No geometry on any band, on a site that alternates clean and
      geometric everywhere else. The list band takes rules.
   5. No row wash on hover, where the deals ledger has one.
   6. The counts were 11px and doing real work.
   ─────────────────────────────────────────────────────────────────── */

/* 1. the leader */
.subjlist a{
  display:flex;align-items:baseline;gap:10px;
  padding:9px 0;
}
.subjlist .nm{order:1;flex:0 1 auto}
.subjlist a::after{
  content:"";order:2;flex:1 1 auto;
  border-bottom:1px dotted color-mix(in srgb,var(--ink) 26%,transparent);
  transform:translateY(-4px);
}
.subjlist .ct{
  order:3;flex:0 0 auto;
  font-family:var(--fm);font-size:12px;font-variant-numeric:tabular-nums;
  color:var(--brass-deep);
}

/* 5. the row answers the cursor */
.subjlist a{
  margin-inline:-10px;padding-inline:10px;
  transition:background-color .2s ease;
}
.subjlist a:hover{background:color-mix(in srgb,var(--brass) 7%,transparent)}
.subjlist a:hover::after{border-bottom-color:color-mix(in srgb,var(--brass) 55%,transparent)}

/* 3. the letter leads its own list. The group is .azgroup, not .subjgroup. */
.azgroup > h2{
  text-align:left;
  font-family:var(--fd);font-weight:400;
  color:var(--brass);
  border-bottom:1px solid var(--line);
  padding-bottom:var(--s3);
}

/* 2. the index travels with the reader */
.azbar{
  position:sticky;top:calc(var(--mast-h,70px));
  z-index:5;background:var(--paper);
  padding:var(--s3) 0;
  border-bottom:1px solid var(--line);
}
/* Any clipping ancestor kills position:sticky in every descendant, and
   `.ixbody` sets overflow:hidden to contain a motif that is a ::before
   pinned to inset:0 and therefore cannot overflow anyway. Released on
   every index body, not just the geo ones: scoping it to .geo meant the
   sticky A-Z broke again the moment the glossary lost its geo class. */
.ixbody,
section.ixbody.geo{overflow:visible}

/* ══ GLOSSARY ═════════════════════════════════════════════════════════
   114 terms in three 400px columns, each holding one short word, over
   4,923px. Four faults plus one I caused on the previous page.

   1. **My own regression.** Making .azbar sticky for /subjects/ put it
      over the first letter heading here: the bar's foot sat at y579 and
      the "A" started at y563, so the letter was under the bar on load
      and again on every in-page jump. The groups clear it now, and the
      letters carry scroll-margin so an anchor lands below it too.
   2. 102px of dead ground between the head band and the index bar.
   3. Three 400px columns for words like "Abandon" wasted most of the
      width and made the page twice as long as it needs to be. Four
      columns on desktop, stepping down with the viewport.
   4. No geometry, where every comparable band has some. Glossary takes
      the grid, subjects took the rules, so the two indexes differ.
   5. The terms were bare links with no row, so there was nothing to aim
      at. Hairline rows and a wash on hover, matching the subjects list.
   ─────────────────────────────────────────────────────────────────── */
.azbar{margin-bottom:0}
.ixbody .azgroup{padding-top:var(--s5)}
/* The anchor target is the group div (id="LM"), not its heading, so the
   scroll margin has to live there or every in-page jump parks the letter
   under the sticky bar. */
.azgroup{scroll-margin-top:calc(var(--mast-h,70px) + 104px)}

.azlist{grid-template-columns:repeat(4,minmax(0,1fr))}
.azlist a{
  display:block;padding:9px 0;
  margin-inline:-10px;padding-inline:10px;
  border-bottom:1px solid var(--line);
  transition:background-color .2s ease,color .2s ease;
}
.azlist a:hover{
  background:color-mix(in srgb,var(--brass) 7%,transparent);
  color:var(--brass-deep);
}
@media(max-width:1100px){ .azlist{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media(max-width:820px){  .azlist{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:520px){  .azlist{grid-template-columns:1fr} }

/* ══ GLOSSARY, second pass ════════════════════════════════════════════
   The grid was the wrong component for this data and my four-column
   change made it worse. Measured: 114 terms, median name 9 characters,
   and 12 of the 25 letter groups hold three terms or fewer. Those 12
   were taking 1,956px to show 19 words, because every letter got a full
   heading block and a four-column row it could not fill. K has one term
   and occupied 163px.

   Short names want chips, which the site already uses for "Subjects in
   this piece". The letter moves into a narrow gutter and the terms flow
   beside it, so a one-term letter costs one line instead of a screen.
   Scoped to .azchips so /subjects/, which carries counts and leaders in
   a grid that suits it, is untouched.
   ─────────────────────────────────────────────────────────────────── */
.azchips .azgroup{
  display:grid;grid-template-columns:48px minmax(0,1fr);
  gap:var(--s4);align-items:start;
  padding:var(--s4) 0;border-top:1px solid var(--line);
}
.azchips .azgroup:first-of-type{border-top:none}
.azchips .azgroup > h2{
  margin:0;padding:0;border:0;line-height:1;
  font-family:var(--fd);font-weight:400;font-size:26px;color:var(--brass);
}
.azchips .azlist{
  display:flex;flex-wrap:wrap;gap:8px;
  grid-template-columns:none;
}
.azchips .azlist a{
  display:inline-block;margin:0;padding:7px 13px;
  border:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--paper);
  font-size:14px;line-height:1.3;color:var(--ink);
  transition:border-color .2s ease,background-color .2s ease,color .2s ease;
}
.azchips .azlist a:hover{
  border-color:var(--brass);
  background:color-mix(in srgb,var(--brass) 7%,var(--paper));
  color:var(--brass-deep);
}
@media(max-width:520px){
  .azchips .azgroup{grid-template-columns:1fr;gap:var(--s3)}
}

/* ── The Great Legal Minds: three figures, three columns ───────────
   `.iufigs` is repeat(4,1fr) here, written for India Unbound, which
   has four. lab.css already overrides `.glmfigs` to three, but this
   file loads after it and both selectors carry the same specificity,
   so the four-column rule won and the show's three figures sat in
   columns 1 to 3 of 4: the row stopped at x1033 against a wrap ending
   at x1346, and read as shoved left under a centred heading.

   Stated as a count-agnostic rule so a fourth figure, or a second,
   still fills the row rather than leaving a hole. */
.glmfigs{
  grid-template-columns:none;
  grid-auto-flow:column;
  grid-auto-columns:minmax(0,1fr);
}
@media(max-width:760px){
  .glmfigs{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:1fr}
}

/* The figures sat left in 417px cells under a centred kicker, title and
   standfirst, so three small numbers were flung to 130, 548 and 1043 with
   240px of nothing beside each. The band is centred; the figures join it.
   Content-sized columns grouped in the middle, rather than three cells
   stretched to the container. */
.ixhead .glmfigs{
  grid-auto-columns:max-content;
  justify-content:center;
}
.ixhead .glmfigs .iufig{
  text-align:center;
  padding-left:var(--s6);padding-right:var(--s6);
}
.ixhead .glmfigs .iufig:first-child{padding-left:var(--s6)}
@media(max-width:900px){
  .ixhead .glmfigs .iufig{padding-left:var(--s4);padding-right:var(--s4)}
  .ixhead .glmfigs .iufig:first-child{padding-left:var(--s4)}
}

/* The glossary keeps the same ground as every other index body. The noise
   was the `geo g-grid` I added ON TOP of `.ixbody::before`: two line systems
   at chip density. One is the site's ground and belongs here; suppressing
   both left the page barer than any page it sits beside.

   What the ground must not do is run between the chips, where the gaps are
   a few pixels and the motif reads as interference. The chip cluster takes
   the paper so the rules show in the letter gutter and the margin, and stop
   at the chips. Same rule as everywhere else: never behind the content. */
.azchips .azlist{background:var(--paper)}
.azchips .azgroup > h2{background:var(--paper)}

/* ── Terms in this piece ───────────────────────────────────────────
   Glossary entries the article actually names, read from the body and
   linked to their definitions. Same chip as the glossary index, so a
   reader meets one shape for a defined term across the whole site. */
.termchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s3)}
.termchips a{
  display:inline-block;padding:6px 10px;
  border:1px solid var(--line);background:var(--paper);
  font-size:13px;line-height:1.3;color:var(--ink);
  transition:border-color .2s ease,background-color .2s ease,color .2s ease;
}
.termchips a:hover{
  border-color:var(--brass);
  background:color-mix(in srgb,var(--brass) 7%,var(--paper));
  color:var(--brass-deep);
}

/* ── The record headline scales to its own length ──────────────────
   Measured across the site: articles median 68 characters over 1,993
   words, deals median 83 over 165 words with 32 of 243 past 120 and the
   longest at 291. One display size served the first and buried the
   second: 383px of type over a 377 word note. Two steps, so a short
   title is untouched and a long one stops competing with its story. */
.rechead h1.t-long{font-size:clamp(28px,3.4vw,42px);line-height:1.14}
.rechead h1.t-xlong{font-size:clamp(24px,2.7vw,34px);line-height:1.18;max-width:min(100%,30ch)}
@media(max-width:760px){
  .rechead h1.t-long{font-size:clamp(24px,6vw,32px)}
  .rechead h1.t-xlong{font-size:clamp(22px,5.4vw,28px)}
}

/* ── The event gallery shows twelve, then the rest on request ───────
   The template used to slice at twelve and offer no route to the others,
   so 55 of the Hall of Fame's 67 photographs were unreachable. They are
   all in the DOM now, hidden until asked for, so nothing is fetched
   until a revealed row scrolls into view. */
.evgal .evshot.is-more{display:none}
.evgal.all .evshot.is-more{display:block}

.evmore{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:var(--s4);padding:11px 20px;cursor:pointer;
  background:none;border:1px solid var(--line);
  font-family:var(--fb);font-weight:500;font-size:13.5px;color:var(--ink);
  transition:border-color .2s ease,background-color .2s ease,color .2s ease;
}
.evmore:hover{
  border-color:var(--brass);
  background:color-mix(in srgb,var(--brass) 6%,transparent);
  color:var(--brass-deep);
}
.evmore:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.evmore .ar{transition:transform .22s ease}
.evmore:hover .ar{transform:translateX(3px)}

/* ── The event hero facts ──────────────────────────────────────────
   Same collision as the Great Legal Minds figures. lab.css sets
   `.evfacts{repeat(3,1fr)}`, but `.iufigs{repeat(4,1fr)}` lives in this
   file, loads later and carries identical specificity, so four columns
   won and three facts sat in columns 1 to 3: the row stopped at x1033
   against content ending at x1346 and read as shoved left under a
   centred title.

   The labels were out too. "Report Launch & GC Recognition" wraps to two
   lines, so its label dropped 27px below the other two and the baseline
   broke. The value takes the free space and the label is pushed to the
   foot of the cell, so the three labels line up whatever the values do. */
.rechead .evfacts{
  grid-template-columns:none;
  grid-auto-flow:column;
  grid-auto-columns:max-content;
  justify-content:center;
  align-items:stretch;
}
.rechead .evfacts .iufig{
  display:flex;flex-direction:column;
  text-align:center;
  padding-left:var(--s6);padding-right:var(--s6);
}
.rechead .evfacts .iufig:first-child{padding-left:var(--s6)}
.rechead .evfacts .iufig .t{margin-top:auto}

@media(max-width:900px){
  .rechead .evfacts{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:1fr}
  .rechead .evfacts .iufig{padding-left:0;padding-right:0}
  .rechead .evfacts .iufig .t{margin-top:var(--s2)}
}

/* ══ EVENT PHOTOGRAPHS ════════════════════════════════════════════════
   The grid ran at gap:0 with hairline borders, so 67 award photographs of
   near-identical composition fused into one purple slab. Given room they
   read as a set of frames. And each one linked to the raw JPG in a new
   tab, which is a file listing, not a way to look at photographs.
   ─────────────────────────────────────────────────────────────────── */
/* A band, not a grid. See the note in single-events.php: 67 frames of the
   same composition spent three rows before expanding to seventeen, and a
   grid of near-identical photographs is repetition measured in page height.
   Fixed height, natural widths, one scroll. */
.evstrip{
  display:flex;gap:10px;list-style:none;margin:var(--s5) 0 0;padding:0 0 var(--s3);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scrollbar-width:thin;
}
.evstrip::-webkit-scrollbar{height:6px}
.evstrip::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ink) 22%,transparent)}
.evstrip li{flex:0 0 auto;height:190px;scroll-snap-align:start;background:var(--ground,var(--paper));overflow:hidden}
.evstrip .evshot{display:block;height:100%;aspect-ratio:auto}
.evstrip img{
  height:100%;width:auto;display:block;
  transition:transform .5s cubic-bezier(.2,.6,.2,1);
}
.evstrip li:hover img{transform:scale(1.04)}
.evstrip:focus-visible{outline:2px solid var(--brass);outline-offset:4px}
.evshot:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

@media(max-width:720px){ .evstrip li{height:140px} }
@media (prefers-reduced-motion:reduce){
  .evstrip img{transition:none}
  .evstrip li:hover img{transform:none}
}

/* ── The viewer ────────────────────────────────────────────────────
   Built here rather than pulled in: no third-party script, nothing from
   another origin, and it inherits the palette. */
.lbx{
  /* Above everything the site pins: the masthead sits at 90, the nav at 80,
     the drawer at 70. A flat rgba rather than a color-mix so the value is
     the value, and the page behind is genuinely gone rather than faintly
     legible through it. */
  position:fixed;inset:0;z-index:9000;display:none;
  /* Solid, not 97%. Three percent of a bright purple stage photograph over
     near-black still reads as a ghost of the grid behind, and the point of
     opening one photograph is to be left with one photograph. */
  background:#0C0E11;
}
.lbx.on{display:grid;grid-template-rows:auto 1fr auto}
.lbx-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--s4) var(--s5);
}
.lbx-count{
  font-family:var(--fm);font-size:11.5px;letter-spacing:.14em;
  color:rgba(255,255,255,.62);
}
.lbx-stage{display:grid;place-items:center;padding:0 var(--s5);min-height:0}
.lbx-stage img{
  max-width:100%;max-height:100%;
  width:auto;height:auto;object-fit:contain;display:block;
}
.lbx-foot{display:flex;align-items:center;justify-content:center;gap:var(--s4);padding:var(--s4)}
.lbx button{
  background:none;border:1px solid rgba(255,255,255,.22);cursor:pointer;
  color:#fff;font-family:var(--fb);font-weight:500;font-size:13px;
  padding:10px 18px;transition:border-color .2s ease,background-color .2s ease,color .2s ease;
}
.lbx button:hover{border-color:var(--brass);color:var(--brass)}
.lbx button:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.lbx button[disabled]{opacity:.3;cursor:default}
.lbx button[disabled]:hover{border-color:rgba(255,255,255,.22);color:#fff}
body.lbx-open{overflow:hidden}

@media(max-width:700px){
  .lbx-stage{padding:0 var(--s3)}
  .lbx-bar{padding:var(--s3)}
}
@media (prefers-reduced-motion:reduce){
  .evshot img{transition:none}
  .evshot:hover img{transform:none}
}

/* --- long documents: policies, terms ------------------------------- */
/* The rail is a list of the document's own headings, so it is set as a
   list and not as the card blocks the article rail carries. The numeral
   is the only ornament: it gives the reader a sense of how long the
   document is before they start. */
.recrail .railtoc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.recrail .railtoc li{counter-increment:toc;border-top:1px solid var(--line)}
.recrail .railtoc li:first-child{border-top:0}
.recrail .railtoc a{
  display:grid;grid-template-columns:2.1em 1fr;align-items:start;
  padding:9px 0;text-decoration:none;color:var(--text);
  font-size:13.5px;line-height:1.35;
  transition:color .18s ease;
}
.recrail .railtoc a::before{
  content:counter(toc,decimal-leading-zero);
  font-family:var(--fm);font-size:10.5px;line-height:1.6;
  color:var(--brass-deep);
}
.recrail .railtoc a:hover{color:var(--brass-deep)}
/* Below 1080 the rail unpins and follows the article. For an article's rail
   that is right: share links and read-next belong after the piece. A table
   of contents does not. Left alone it landed 4,300px down, under the whole
   document it was meant to introduce, where no reader would ever reach it.
   On a document page it goes first instead. */
@media(max-width:1080px){
  .docbody .recrail{order:-1;margin-bottom:var(--s6)}
  .docbody .railtoc{padding-bottom:0;margin-bottom:0;border-bottom:0}
}
/* The anchor target must clear whatever is pinned at the top, or the
   heading lands underneath the navigation and the reader sees the
   paragraph after the one they asked for. */
.docbody .rich h2[id]{scroll-margin-top:calc(var(--mast-h,70px) + var(--s5))}
/* Scoped to document pages. Unscoped this would change how every anchor
   on the site behaves, including the glossary A-Z, as a side effect of a
   fix to one template. */
@media(prefers-reduced-motion:no-preference){
  html:has(.docbody){scroll-behavior:smooth}
}

/* --- a photograph behind a head band -------------------------------- */
/* The home hero does this with a layer and a scrim, and its scrim is
   weighted to the left because its headline is left-aligned. This band
   centres its type, so the ground is pooled in the middle instead: a
   left-weighted scrim here would have left the right half of the title
   sitting on the bright part of the picture. */
.ixhead.has-photo{position:relative;isolation:isolate;overflow:hidden;background:var(--ink-deep)}
.ixhead.has-photo > .wrap{position:relative;z-index:3}
.ixhead.has-photo .layer{position:absolute;inset:0;z-index:1;overflow:hidden}
.ixhead.has-photo .layer img{
  width:100%;height:100%;object-fit:cover;display:block;
  /* The band takes a thin slice of a tall frame, so which slice matters.
     The light in this picture peaks 41% down, at the crest of the wave;
     centring the crop there is what puts the subject in the band instead
     of the dead black above it. */
  object-position:50% 41%;
  /* The other hero photographs are pulled most of the way to grey so they
     sit inside the palette. This one is held back: it was chosen for its
     colour, and greying it out would leave a picture of nothing. It is
     also already a dark frame, so it is barely dimmed. */
  filter:contrast(1.04) brightness(.94);
}
.ixhead.has-photo .scrim{
  position:absolute;inset:0;z-index:2;
  background:
    /* the pool the type reads against */
    /* Measured, not judged by eye: at 74% the standfirst sat at 4.0:1
       against the crest of the wave, under the 4.5:1 small text wants. */
    radial-gradient(56% 118% at 50% 52%,
      color-mix(in srgb,var(--ink-deep) 85%,transparent) 0%,
      color-mix(in srgb,var(--ink-deep) 64%,transparent) 50%,
      transparent 100%),
    /* the brass corner every dark band on the site carries */
    radial-gradient(74% 118% at 88% 2%,
      color-mix(in srgb,var(--brass-dark) 20%,transparent) 0%, transparent 62%),
    /* seat the band top and bottom so it meets the nav and the body cleanly */
    linear-gradient(180deg,
      color-mix(in srgb,var(--ink-deep) 46%,transparent) 0%,
      transparent 40%,
      color-mix(in srgb,var(--ink-deep) 44%,transparent) 100%);
}
/* Narrow: the words cross the whole frame, so the ground carries all the
   way through rather than pooling.

   The crop also has to change. On a wide band, cover throws away most of
   the frame's height and keeps the middle. On a phone the band's shape is
   almost the same as the picture's, so cover crops next to nothing and the
   dead black sky at the top of this frame filled the upper third. Scaling
   the layer gives cover something to cut, and the origin puts the cut over
   the lit part of the wave. */
@media(max-width:900px){
  .ixhead.has-photo .layer img{transform:scale(1.5);transform-origin:50% 62%}
  .ixhead.has-photo .scrim{
    background:
      linear-gradient(180deg,
        color-mix(in srgb,var(--ink-deep) 78%,transparent) 0%,
        color-mix(in srgb,var(--ink-deep) 62%,transparent) 50%,
        color-mix(in srgb,var(--ink-deep) 78%,transparent) 100%);
  }
}