/* ============================================================
   RightToLaw — Editorial design system
   Rubik throughout, white ground, claret accent.
   Structure comes from rules and rhythm, not boxes and shadows.
   ============================================================ */

/* ---------- Rubik (UI / body) ---------- */
@font-face{
  font-family:'Rubik';
  src:url('../rubik/Rubik-VariableFont_wght.ttf') format('truetype-variations'),
      url('../rubik/Rubik-VariableFont_wght.ttf') format('truetype');
  font-weight:300 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Rubik';
  src:url('../rubik/Rubik-Italic-VariableFont_wght.ttf') format('truetype-variations'),
      url('../rubik/Rubik-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight:300 900;font-style:italic;font-display:swap;
}
/* Rubik is the only typeface on the site. --serif is kept as a token name so
   every existing rule keeps working; it now resolves to Rubik as well. */

:root{
  /* ---- Ink ---- */
  --ink:#12100e;
  --ink-2:#3a3632;
  --ink-3:#57514b;
  --muted:#7a736c;
  --faint:#a49d95;

  /* ---- Ground ---- */
  --paper:#ffffff;
  --paper-2:#faf9f7;    /* warm off-white band */
  --paper-3:#f3f1ed;    /* hover / well */

  /* ---- Rules ---- */
  --rule:#e3dfd8;
  --rule-2:#efece6;
  --rule-strong:#12100e;

  /* ---- Accent ---- */
  --accent:#8B1D31;
  --accent-dark:#6d1626;
  --accent-tint:#f9f0f1;
  --accent-line:#eddadd;
  /* Raw channels so focus rings can be built with rgba() per theme. */
  --accent-rgb:139,29,49;

  /* ---- Derived / on-colour ---- */
  --on-accent:#ffffff;      /* text on accent or ink fills */
  --control-line:#cfc9c1;   /* unchecked checkbox + radio borders */
  --scroll-thumb:#e3dfd8;
  --scroll-thumb-hover:#cdc6bd;

  /* ---- Semantic ---- */
  --ok:#2f6b45;      --ok-bg:#f0f6f2;   --ok-line:#cfe0d5;   --ok-dark:#245235;
  --warn:#8a6212;    --warn-bg:#faf5ea;  --warn-line:#e8dcc0;
  --bad:#9c2b23;     --bad-bg:#fbf1f0;   --bad-line:#eccfcc;  --bad-dark:#7f221c;

  /* ---- Type ---- */
  --sans:"Rubik",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  /* Display role — same family, kept as its own token so display type can be
     tuned (weight/tracking) independently of body copy. */
  --serif:"Rubik",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  /* ---- Metrics (themes may override) ---- */
  --radius:3px;
  --radius-lg:4px;
  --gut:clamp(1rem,3vw,2.5rem);
  --measure:68ch;
  /* Full-bleed: content spans the viewport, held off the edges by --gut.
     A theme can set a max width here to go back to a centred column. */
  --wrap-max:1350px;
  --shadow-1:0 1px 2px rgba(18,16,14,.05);
  --shadow-2:0 12px 40px rgba(18,16,14,.10);

  /* ---- Legacy aliases (admin views + any unconverted markup) ---- */
  --rtl-navy:var(--ink);      --rtl-navy-2:var(--ink-2);   --rtl-navy-3:var(--ink-3);
  --rtl-gold:var(--accent);   --rtl-gold-2:var(--accent-dark);
  --rtl-ink:var(--ink);       --rtl-muted:var(--muted);
  --rtl-line:var(--rule);     --rtl-bg:var(--paper);
  --rtl-green:var(--ok);      --rtl-green-bg:var(--ok-bg);
  --rtl-amber:var(--warn);    --rtl-amber-bg:var(--warn-bg);
  --rtl-red:var(--bad);       --rtl-red-bg:var(--bad-bg);
  --rtl-radius:var(--radius); --rtl-font:var(--sans); --rtl-head:var(--serif);
  --line:var(--rule);         --line-2:var(--rule-2);
  --surface:var(--paper);     --surface-2:var(--paper-2); --surface-3:var(--paper-3);
  --shadow:var(--shadow-1);
  --shadow-lg:var(--shadow-2);
  --rtl-shadow:var(--shadow); --rtl-shadow-lg:var(--shadow-lg);
  --radius-sm:var(--radius);
  --font:var(--sans);
}

*{box-sizing:border-box;}

body{
  background:var(--paper);
  color:var(--ink-3);
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ============================================================
   TYPOGRAPHY — one family (Rubik), separated by weight and tracking
   ============================================================ */
h1,h2,h3,h4,.display,.serif{
  font-family:var(--serif);
  color:var(--ink);
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1.15;
  margin:0 0 .5rem;
}
h5,h6{font-family:var(--sans);color:var(--ink);font-weight:600;line-height:1.3;}

.display{
  font-size:clamp(2.2rem,5.6vw,4.1rem);
  font-weight:700;
  line-height:1.04;
  letter-spacing:-.035em;
}
.display em{font-style:italic;color:var(--accent);}

h1,.h1{font-size:clamp(1.8rem,3.9vw,2.7rem);font-weight:600;letter-spacing:-.028em;}
h2,.h2{font-size:clamp(1.4rem,2.6vw,1.95rem);font-weight:600;letter-spacing:-.022em;}
h3,.h3{font-size:1.3rem;font-weight:600;}
h4,.h4{font-size:1.1rem;font-weight:600;}

p{margin:0 0 1rem;}
a{color:var(--ink);text-decoration:none;}
a:hover{color:var(--accent);}

/* Editorial furniture */
.kicker{
  display:block;font-family:var(--sans);font-size:.68rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.2em;color:var(--accent);margin-bottom:.9rem;
}
.kicker--muted{color:var(--faint);}
.lede{
  font-family:var(--sans);font-size:clamp(1rem,1.4vw,1.18rem);
  line-height:1.6;color:var(--ink-2);font-weight:300;max-width:60ch;
}
.meta{
  font-family:var(--sans);font-size:.78rem;color:var(--muted);
  letter-spacing:.02em;
}
.meta-caps{
  font-family:var(--sans);font-size:.68rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.16em;color:var(--faint);
}
.num{font-family:var(--serif);font-variant-numeric:tabular-nums;}

/* Rules */
.rule{border:0;border-top:1px solid var(--rule);margin:0;opacity:1;}
.rule--strong{border-top:1.5px solid var(--rule-strong);}
hr{border:0;border-top:1px solid var(--rule);opacity:1;}

/* Section heading: title + rule. The leading "01 / 02 / FAQ" counter is gone —
   it numbered sections that were never a sequence to follow. */
.section-head{
  display:flex;align-items:baseline;gap:1rem;
  border-top:1.5px solid var(--rule-strong);
  padding-top:.9rem;margin-bottom:1.75rem;
}
.section-head__t{font-size:clamp(1.3rem,2.4vw,1.75rem);margin:0;flex:1;}
.section-head__more{
  font-family:var(--sans);font-size:.8rem;font-weight:500;color:var(--muted);
  flex:none;white-space:nowrap;border-bottom:1px solid var(--rule);padding-bottom:1px;
}
.section-head__more:hover{color:var(--accent);border-color:var(--accent);}

/* Layout helpers */
.wrap{width:100%;max-width:1350px;margin:0 auto;padding-left:var(--gut);padding-right:var(--gut);}
.wrap--narrow{max-width:760px;}
.band{padding:clamp(3rem,7vw,5.5rem) 0;}
.band--tight{padding:clamp(2rem,4vw,3rem) 0;}
.band--tint{background:var(--paper-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);}

/* ============================================================
   MASTHEAD
   ============================================================ */
.masthead{background:var(--paper);border-bottom:1px solid var(--rule);position:relative;z-index:1030;}
.masthead__strip{
  border-bottom:1px solid var(--rule-2);font-size:.74rem;color:var(--muted);
  letter-spacing:.02em;
}
.masthead__strip a{color:var(--muted);}
.masthead__strip a:hover{color:var(--accent);}
.masthead__bar{display:flex;align-items:center;gap:1.5rem;padding:1.1rem 0;}
.masthead__brand{
  font-family:var(--serif);font-size:1.5rem;font-weight:600;color:var(--ink);
  letter-spacing:-.02em;line-height:1;flex:none;
}
.masthead__brand span{color:var(--accent);}
.masthead__brand small{
  display:block;font-family:var(--sans);font-size:.56rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--faint);margin-top:5px;
}
.masthead__nav{display:flex;align-items:center;gap:.25rem;margin-left:auto;}
.masthead__nav a{
  font-family:var(--sans);font-size:.88rem;font-weight:500;color:var(--ink-2);
  padding:.4rem .7rem;position:relative;
}
.masthead__nav a:hover{color:var(--accent);}
.masthead__nav a.is-active{color:var(--ink);}
.masthead__nav a.is-active::after{
  content:"";position:absolute;left:.7rem;right:.7rem;bottom:-.15rem;height:2px;background:var(--accent);
}
.masthead__cta{
  font-family:var(--sans);font-size:.82rem;font-weight:600;
  border:1.5px solid var(--ink);color:var(--ink);padding:.5rem 1.1rem;border-radius:var(--radius);
  transition:background .15s,color .15s,border-color .15s;
}
.masthead__cta:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}

/* Account control. One element for both layouts — it sits in the bar on
   desktop and inside the burger panel on mobile, because <nav> is what the
   toggle opens.

   Scoped through .masthead__nav so it outranks `.masthead__nav a`, which every
   theme restyles (colour, radius, mobile dividers) and which would otherwise
   flatten this back into a plain menu link. */
.masthead__nav .masthead__acct{
  display:inline-flex;align-items:center;gap:.45rem;flex:none;
  font-family:var(--sans);font-size:.82rem;font-weight:600;color:var(--ink-2);
  padding:.4rem .8rem;border:1px solid var(--rule);border-radius:100px;
  transition:border-color .15s,color .15s,background .15s;
}
.masthead__nav .masthead__acct:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-tint);}
.masthead__nav .masthead__acct > i{font-size:1.05em;}
/* The signed-in state carries the member's initial rather than a generic icon. */
.masthead__acctav{
  display:grid;place-items:center;width:1.5rem;height:1.5rem;flex:none;
  border-radius:50%;background:var(--accent);color:var(--on-accent);
  font-size:.7rem;font-weight:700;line-height:1;
}
/* A long name must not push the nav around. */
.masthead__acctname{max-width:8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.masthead__burger{
  display:none;background:none;border:1px solid var(--rule);border-radius:var(--radius);
  padding:.4rem .6rem;color:var(--ink);font-size:1rem;margin-left:auto;
}

/* dropdown */
.mh-drop{position:relative;}
.mh-drop__panel{
  position:absolute;top:calc(100% + .55rem);left:0;
  /* Never wider than the viewport: the panel is anchored to its trigger, and
     an item near the right of the nav used to push a fixed-width panel off
     the edge of the page. */
  max-width:calc(100vw - 2rem);
  background:var(--paper);border:1px solid var(--rule);box-shadow:var(--shadow-lg);
  padding:.75rem;display:none;z-index:40;
}
/* Dropdown: one narrow column. */
.mh-drop__panel--single{columns:1;min-width:230px;}
/* Mega: several columns, but only as wide as there is room for. */
.mh-drop__panel--mega{min-width:min(520px,calc(100vw - 2rem));columns:2;column-gap:.5rem;}
@media(min-width:1200px){
  .mh-drop__panel--mega{min-width:min(640px,calc(100vw - 2rem));columns:3;}
}
/* Flipped by the nav script when the panel would overrun the right edge. */
.mh-drop__panel.is-right{left:auto;right:0;}
.mh-drop.open .mh-drop__panel{display:block;}
.mh-drop__panel a{
  display:block;break-inside:avoid;font-size:.86rem;color:var(--ink-3);
  padding:.4rem .55rem;border-radius:var(--radius);
}
.mh-drop__panel a:hover{background:var(--paper-3);color:var(--accent);}
.mh-drop__panel .is-all{border-top:1px solid var(--rule);margin-top:.4rem;padding-top:.6rem;font-weight:600;color:var(--accent);}
/* A practice area is always a city's page, so the destination city rides
   along with the name rather than surprising the reader on arrival. */
.mh-drop__city{
  display:block;font-size:.72rem;color:var(--faint);font-weight:500;
  margin-top:.05rem;letter-spacing:.02em;
}
.mh-drop__panel a:hover .mh-drop__city{color:inherit;opacity:.8;}

@media(max-width:991.98px){
  .masthead__burger{display:block;}
  .masthead__nav{
    display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);
    border-bottom:1px solid var(--rule);flex-direction:column;align-items:stretch;
    gap:0;padding:.5rem var(--gut) 1.25rem;box-shadow:var(--shadow-lg);
  }
  .masthead__nav.open{display:flex;}
  .masthead__nav a{padding:.7rem 0;border-bottom:1px solid var(--rule-2);}
  .masthead__nav a.is-active::after{display:none;}
  .mh-drop__panel{position:static;display:block;border:0;box-shadow:none;padding:.2rem 0 .5rem .8rem;columns:1;min-width:0;}
  .masthead__cta{margin-top:.9rem;text-align:center;}
  /* In the panel it becomes a full-width row like the rest of the menu, but
     keeps its pill shape so it still reads as the account control. */
  .masthead__nav .masthead__acct{
    display:flex;justify-content:center;margin-top:.9rem;
    padding:.65rem 1rem;border:1px solid var(--rule);
  }
  .masthead__acctname{max-width:none;}
}

/* ============================================================
   HERO (editorial opener)
   ============================================================ */
.opener{padding:clamp(2rem,3vw,6rem) 0 clamp(2rem,4vw,3.5rem);}
.opener__grid{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3.5rem);}
@media(min-width:900px){.opener__grid{grid-template-columns:1.35fr .65fr;}}
.opener__lede{margin:1.5rem 0 2rem;}
.opener__side{border-top:1.5px solid var(--rule-strong);padding-top:1rem;}
/* When the side column holds the lead form, that panel supplies its own rule. */
.opener__side--form{border-top:0;padding-top:0;}
.opener__side--form .leadform{margin-top:0;}

/* ============================================================
   HERO SUPPORT — fills the column beside the tall callback form
   ============================================================ */
.promises{
  list-style:none;margin:2rem 0 0;padding:0;
  display:grid;gap:.9rem;max-width:44rem;
}
.promises li{display:flex;gap:.85rem;align-items:flex-start;}
.promises i{
  flex:none;width:2rem;height:2rem;border-radius:50%;
  display:grid;place-items:center;font-size:.82rem;
  background:var(--accent-tint);color:var(--accent);margin-top:.1rem;
}
.promises span{font-size:.88rem;color:var(--muted);line-height:1.5;}
.promises b{
  display:block;font-weight:600;color:var(--ink);font-size:.95rem;margin-bottom:.05rem;
}

.opener__cities{
  display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;
  margin-top:1.75rem;padding-top:1.35rem;border-top:1px solid var(--rule);
}
.opener__cities .meta-caps{width:100%;margin-bottom:.15rem;}
.opener__cities a{
  display:inline-flex;align-items:center;gap:.4rem;font-size:.85rem;
  color:var(--ink-2);border:1px solid var(--rule);border-radius:999px;
  padding:.3rem .5rem .3rem .85rem;transition:.15s;
}
.opener__cities a:hover{border-color:var(--accent);color:var(--accent);}
.opener__cities a b{
  font-size:.72rem;font-weight:600;color:var(--muted);
  background:var(--paper-2);border-radius:999px;padding:.05rem .45rem;
}
.opener__cities a:hover b{background:var(--accent-tint);color:var(--accent);}

/* Wide screens: the promises sit two-up so the column keeps pace with
   the form's height instead of running past it. */
@media(min-width:1400px){
  .promises{grid-template-columns:1fr 1fr;gap:1.1rem 1.75rem;max-width:none;}
}

/* ============================================================
   SEARCH BOX — its own panel, lifted out of the hero
   ============================================================ */
.searchbox{padding:0 0 clamp(1.5rem,3vw,2.5rem);}
.searchbox__panel{
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  padding:clamp(1.25rem,3vw,2rem);
  box-shadow:var(--shadow-1);
}
.searchbox__head{margin-bottom:1rem;}
.searchbox__title{
  font-size:clamp(1.15rem,2vw,1.4rem);font-weight:600;
  letter-spacing:-.02em;margin:0 0 .2rem;
}
.searchbox__sub{font-size:.88rem;color:var(--muted);margin:0;}
.searchbox__tags{
  display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-top:1rem;
}
.searchbox__tags a{
  font-size:.8rem;color:var(--ink-3);border:1px solid var(--rule);
  padding:.22rem .7rem;border-radius:999px;transition:.15s;
}
.searchbox__tags a:hover{border-color:var(--accent);color:var(--accent);}

/* ============================================================
   PROFILE CARDS — compact grid for the latest advocates
   ============================================================ */
.profiles{display:grid;grid-template-columns:1fr;gap:.7rem;}
@media(min-width:600px){.profiles{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1000px){.profiles{grid-template-columns:repeat(3,1fr);}}
@media(min-width:1500px){.profiles{grid-template-columns:repeat(5,1fr);}}

.profile-card{
  display:flex;align-items:flex-start;gap:.75rem;
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);
  padding:.9rem;min-width:0;
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.profile-card:hover{
  border-color:var(--accent-line);box-shadow:var(--shadow-1);transform:translateY(-2px);
}
.profile-card__av{
  width:44px;height:44px;flex:none;object-fit:cover;border-radius:var(--radius-sm);
  background:var(--paper-3);border:1px solid var(--rule);
}
.profile-card__body{flex:1;min-width:0;display:block;}
.profile-card__name{
  display:block;font-weight:600;color:var(--ink);font-size:.93rem;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.profile-card:hover .profile-card__name{color:var(--accent);}
.profile-card__where{
  display:block;font-size:.76rem;color:var(--muted);margin-top:.1rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.profile-card__tags{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.45rem;}
.profile-card__tags span{
  font-size:.66rem;color:var(--muted);background:var(--paper-2);
  border:1px solid var(--rule);border-radius:999px;padding:.08rem .45rem;
  max-width:9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.profile-card__meta{
  flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:.25rem;text-align:right;
}
.profile-card__rate{
  font-size:.82rem;font-weight:600;color:var(--ink);white-space:nowrap;
}
.profile-card__rate i{color:var(--accent);font-size:.7em;vertical-align:.08em;}
.profile-card__exp{font-size:.68rem;color:var(--faint);white-space:nowrap;}

/* ============================================================
   LONG-FORM + RAIL
   Prose stays at a readable measure; the width a full-bleed layout
   frees up goes to shortcuts rather than empty margin.
   ============================================================ */
.longform{display:grid;grid-template-columns:1fr;gap:clamp(1.5rem,3vw,2.5rem);}
/* The body column is sized to the text's readable measure, not to 1fr — the
   rail then absorbs ALL the remaining width instead of leaving a gap inside
   the body column on a wide, full-bleed viewport. */
@media(min-width:1000px){.longform{grid-template-columns:minmax(0,68ch) minmax(280px,1fr);}}
.longform__body{min-width:0;}
/* Rail cards spread across whatever width they are given. */
.longform__rail{display:grid;gap:.75rem;align-content:start;}
@media(min-width:1000px){
  .longform__rail{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));align-items:start;}
}

.railcard{
  background:var(--paper);border:1px solid var(--rule);
  border-radius:var(--radius);padding:1.1rem 1.15rem;
}
.railcard__k{
  display:block;font-size:.66rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);margin-bottom:.75rem;
}
.railcard__list{list-style:none;margin:0;padding:0;}
.railcard__list li + li{border-top:1px solid var(--rule-2);}
.railcard__list a{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.5rem 0;font-size:.88rem;color:var(--ink-2);
}
.railcard__list a:hover{color:var(--accent);}
.railcard__list b{font-size:.72rem;font-weight:600;color:var(--faint);}
.railcard__list a:hover b{color:var(--accent);}
.railcard__chips{display:flex;flex-wrap:wrap;gap:.35rem;}
.railcard__chips a{
  font-size:.8rem;color:var(--ink-3);border:1px solid var(--rule);
  border-radius:999px;padding:.2rem .65rem;
}
.railcard__chips a:hover{border-color:var(--accent);color:var(--accent);}
.railcard--cta{background:var(--accent-tint);border-color:var(--accent-line);}
.railcard--cta p{font-size:.86rem;color:var(--ink-2);line-height:1.55;margin:0 0 .9rem;}

/* ============================================================
   CLOSING CTA — a panel with the three steps beside it, rather
   than a heading and two buttons floated apart.
   ============================================================ */
.endcta{
  display:grid;grid-template-columns:1fr;gap:clamp(1.5rem,3vw,3rem);
  background:var(--paper-2);border:1px solid var(--rule);
  border-radius:var(--radius-lg);padding:clamp(1.5rem,3.5vw,2.5rem);
}
@media(min-width:900px){.endcta{grid-template-columns:1.05fr .95fr;align-items:center;}}
.endcta__h{
  font-size:clamp(1.6rem,3.2vw,2.3rem);font-weight:700;
  letter-spacing:-.03em;margin:0 0 .6rem;
}
.endcta__p{color:var(--muted);font-size:.95rem;max-width:46ch;margin:0 0 1.35rem;}
.endcta__acts{display:flex;flex-wrap:wrap;gap:.6rem;}

.endcta__steps{
  list-style:none;margin:0;padding:0;display:grid;gap:.85rem;
  border-left:0;
}
@media(min-width:900px){
  .endcta__steps{border-left:1px solid var(--rule);padding-left:clamp(1.5rem,3vw,2.5rem);}
}
.endcta__steps li{display:flex;gap:.85rem;align-items:flex-start;}
.endcta__n{
  flex:none;width:1.6rem;height:1.6rem;border-radius:50%;
  display:grid;place-items:center;font-size:.75rem;font-weight:700;
  background:var(--accent);color:var(--on-accent);margin-top:.1rem;
}
.endcta__steps span span,.endcta__steps li > span:last-child{
  font-size:.86rem;color:var(--muted);line-height:1.5;
}
.endcta__steps b{display:block;color:var(--ink);font-weight:600;font-size:.93rem;margin-bottom:.05rem;}
.endcta__foot{
  text-align:center;font-size:.86rem;color:var(--muted);margin:1.25rem 0 0;
}
.endcta__foot a{color:var(--accent);font-weight:600;border-bottom:1px solid var(--accent-line);}
.endcta__foot a:hover{border-color:var(--accent);}

/* Figures strip under the opener */
.figures{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--paper-2);}
.figures__grid{display:grid;grid-template-columns:repeat(2,1fr);}
@media(min-width:760px){.figures__grid{grid-template-columns:repeat(4,1fr);}}
.figures__item{padding:1.35rem 1rem 1.35rem 0;border-right:1px solid var(--rule);}
.figures__item:last-child{border-right:0;}
@media(max-width:759.98px){
  .figures__item:nth-child(2n){border-right:0;}
  .figures__item:nth-child(-n+2){border-bottom:1px solid var(--rule);}
}
.figures__item b{
  display:block;font-family:var(--serif);font-size:1.75rem;font-weight:600;
  color:var(--ink);line-height:1;letter-spacing:-.02em;
}
.figures__item span{display:block;font-size:.76rem;color:var(--muted);margin-top:.35rem;}
.opener__stat{padding:.9rem 0;border-bottom:1px solid var(--rule-2);}
.opener__stat:last-child{border-bottom:0;}
.opener__stat b{
  display:block;font-family:var(--serif);font-size:1.9rem;font-weight:600;
  color:var(--ink);line-height:1;letter-spacing:-.02em;
}
.opener__stat span{display:block;font-size:.76rem;color:var(--muted);margin-top:.3rem;}

/* Search */
.searchbar{display:flex;flex-wrap:wrap;gap:0;border:1.5px solid var(--ink);background:var(--paper);}
.searchbar input{
  flex:1 1 200px;min-width:0;border:0;padding:.85rem 1rem;font-size:.95rem;
  font-family:var(--sans);color:var(--ink);background:transparent;
}
.searchbar input::placeholder{color:var(--faint);}
.searchbar input:focus{outline:none;background:var(--paper-2);}
.searchbar input + input{border-left:1px solid var(--rule);}
.searchbar button{
  flex:none;border:0;background:var(--ink);color:var(--on-accent);font-family:var(--sans);
  font-size:.85rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:.85rem 1.6rem;cursor:pointer;transition:background .15s;
}
.searchbar button:hover{background:var(--accent);}
@media(max-width:575.98px){
  .searchbar{flex-direction:column;}
  .searchbar input + input{border-left:0;border-top:1px solid var(--rule);}
}

.taglist{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin-top:1rem;}
.taglist a{
  font-size:.8rem;color:var(--ink-3);border:1px solid var(--rule);
  padding:.25rem .7rem;border-radius:999px;transition:.15s;
}
.taglist a:hover{border-color:var(--accent);color:var(--accent);}

/* ============================================================
   INDEX ROWS — the editorial replacement for card grids
   ============================================================ */
.index{border-top:1px solid var(--rule);}
.index__row{
  display:flex;align-items:baseline;gap:1rem;
  padding:.95rem .25rem;border-bottom:1px solid var(--rule-2);
  transition:background .12s,padding-left .12s;
}
.index__row:hover{background:var(--paper-2);padding-left:.6rem;}
.index__name{
  font-family:var(--serif);font-size:1.05rem;font-weight:600;color:var(--ink);
  flex:1;min-width:0;line-height:1.3;
}
.index__row:hover .index__name{color:var(--accent);}
.index__count{font-size:.78rem;color:var(--faint);flex:none;font-variant-numeric:tabular-nums;}
.index--2col{columns:2;column-gap:clamp(1.5rem,4vw,3.5rem);}
.index--2col .index__row{break-inside:avoid;}
@media(max-width:700px){.index--2col{columns:1;}}

/* Compact tile grid — for short labels like practice areas, where a
   full-width row per item wastes the whole line. Steps up to five across
   rather than using auto-fill, so tiles stay a readable size on a
   full-bleed layout instead of multiplying indefinitely. */
.index--grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;}
@media(min-width:620px){.index--grid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:980px){.index--grid{grid-template-columns:repeat(4,1fr);}}
@media(min-width:1360px){.index--grid{grid-template-columns:repeat(5,1fr);}}
.index--grid .index__row{
  margin-bottom:0;padding:.62rem .8rem;gap:.5rem;align-items:center;
}
.index--grid .index__row:hover{padding-left:.8rem;}
.index--grid .index__name{
  font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.index--grid .index__count{font-size:.72rem;}
/* Second line under an area name: the city its page belongs to. Own ellipsis,
   since the parent's applies to the box as a whole. */
.index__city{
  display:block;font-family:var(--sans);font-size:.72rem;font-weight:500;
  color:var(--faint);margin-top:.15rem;letter-spacing:.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.index__row:hover .index__city{color:var(--ink-3);}

/* ---------- Directory rows (lawyers) ---------- */
.dir{border-top:1.5px solid var(--rule-strong);}
/* stretch, not start: the photo column is sized by the row, so it can run the
   row's full height instead of sitting as a small square at the top. */
.dir__row{
  display:grid;grid-template-columns:auto 1fr auto;gap:1.1rem;align-items:stretch;
  padding:1.35rem .25rem;border-bottom:1px solid var(--rule-2);transition:background .12s;
}
.dir__row:hover{background:var(--paper-2);}
/* Two classes deep on purpose: the graphite theme pins .dir__avatar to a 42px
   square and loads after this file, so a single-class rule would lose to it. */
.dir .dir__avatar{
  width:96px;height:140px;align-self:stretch;
  /* A portrait crop from the top — faces sit in the upper half of a photo. */
  object-fit:fill;object-position:center;border-radius:6px;
  background:var(--paper-3);border:1px solid var(--rule);
  /* No grid-row:span 2 — the row holds its three items in a single track, so
     spanning two opened an empty second row whose row-gap showed as a band of
     dead space along the bottom of every card. */
}
/* The stand-in is a logo, not a portrait: .is-fallback already switches to
   contain, this just keeps it off the edges of the taller box. */
.dir .dir__avatar.is-fallback{padding:14px;}
.dir__main{min-width:0;}
.dir__name{
  font-family:var(--serif);font-size:1.2rem;font-weight:600;color:var(--ink);
  line-height:1.25;display:inline-block;
}
.dir__name:hover{color:var(--accent);}
.dir__meta{font-size:.82rem;color:var(--muted);margin-top:.2rem;}
.dir__meta i{color:var(--faint);}
.dir__sep{color:var(--rule);margin:0 .45rem;}
.dir__areas{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.6rem;}
.dir__area{
  font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;font-weight:600;
  color:var(--muted);border:1px solid var(--rule);padding:.15rem .5rem;border-radius:2px;
}
/* The headline specialisation, leading the same row as the practice areas.
   Inherits the chip's shape from the theme; only the colour marks it out.
   Two classes deep because the themes restyle .dir__area and load last. */
.dir .dir__area--lead{
  color:var(--accent);background:var(--accent-tint);
  border-color:var(--accent-line);font-weight:700;
}
/* Fee, courts, Bar Council — laid across the row rather than stacked, so the
   width beside the practice-area chips carries information instead of gap. */
/* Courts and Bar Council — laid across the row rather than stacked, so the
   width beside the practice-area chips carries information instead of gap.
   margin-top:auto pins it to the bottom, keeping the row's height honest now
   that the photo defines it. */
.dir__facts{
  display:flex;flex-wrap:wrap;gap:.4rem 1.75rem;margin:.75rem 0 0;
  padding-top:.65rem;border-top:1px solid var(--rule-2);
}
.dir__main{display:flex;flex-direction:column;}
.dir__main .dir__facts{margin-top:auto;}
.dir__facts dt{
  font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);margin:0;
}
.dir__facts dt i{color:var(--accent);margin-right:.2rem;font-size:.7rem;}
.dir__facts dd{font-size:.84rem;color:var(--ink-2);margin:.1rem 0 0;line-height:1.35;}

/* Rating at the top, buttons at the bottom — the column now has a full-height
   photo opposite it, so hugging the top would leave it looking unfinished. */
.dir__aside{
  text-align:right;flex:none;display:flex;flex-direction:column;
  align-items:flex-end;justify-content:space-between;gap:.5rem;
}
.dir__rating{font-family:var(--serif);font-size:1.15rem;font-weight:600;color:var(--ink);line-height:1;}
.dir__rating i{font-size:.72rem;color:var(--accent);vertical-align:.08em;}
.dir__verify{font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ok);}
.dir__actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.4rem;}
.dir__actions form{display:inline;}
/* "Remove" on the account page's saved list. Quieter than Profile — the
   destructive action should not be the one the eye lands on first. */
.dir__unsave{color:var(--muted);border-color:var(--rule);}
.dir__unsave:hover{color:var(--bad-dark);border-color:var(--bad-line);background:var(--bad-bg);}
.dir__unsave i{font-size:.85em;}
@media(max-width:640px){
  /* Two columns with the actions wrapping underneath, so a full-height photo
     would tower over a one-line name. Back to a square thumbnail here. */
  .dir__row{grid-template-columns:auto 1fr;align-items:start;}
  .dir .dir__avatar,
  .dir--compact .dir__avatar{
    width:52px;height:52px;align-self:start;grid-row:span 1;
    object-position:center;
  }
  .dir .dir__avatar.is-fallback,
  .dir--compact .dir__avatar.is-fallback{padding:7px;}
  .dir__aside{grid-column:1 / -1;flex-direction:row;align-items:center;justify-content:space-between;text-align:left;}
}

/* Two-up variant — for highlight blocks (e.g. the home page's top-rated
   list) where a full-width row per advocate leaves most of the line empty.
   The listing pages keep the single-column form, which suits scanning many
   results with all their detail on one line. */
.dir--2col{display:grid;grid-template-columns:1fr;gap:.75rem;border-top:0;}
@media(min-width:900px){.dir--2col{grid-template-columns:repeat(2,1fr);}}
.dir--2col .dir__row{
  border:1px solid var(--rule);border-radius:var(--radius);
  border-bottom:1px solid var(--rule);
  padding:1.05rem 1.15rem;
}
/* In half the width the meta line needs to wrap rather than overflow. */
.dir--2col .dir__meta{white-space:normal;}
.dir--2col .dir__name{font-size:1.1rem;}

/* ============================================================
   FEATURE / ARTICLE TEASERS
   ============================================================ */
.teasers{display:grid;grid-template-columns:1fr;gap:0;}
@media(min-width:760px){.teasers{grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.5rem);}}
.teaser{border-top:1px solid var(--rule);padding-top:1rem;padding-bottom:1.25rem;}
@media(max-width:759.98px){.teaser{border-bottom:0;}}
.teaser__k{font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);}
.teaser__t{font-family:var(--serif);font-size:1.15rem;font-weight:600;color:var(--ink);margin:.5rem 0 .4rem;line-height:1.3;}
.teaser:hover .teaser__t{color:var(--accent);}
.teaser__x{font-size:.88rem;color:var(--muted);line-height:1.6;margin:0;}
.teaser__m{font-size:.72rem;color:var(--faint);margin-top:.6rem;display:block;}

/* ============================================================
   PAGE HEAD (interior pages)
   ============================================================ */
.pagehead{padding:clamp(2.25rem,5vw,3.75rem) 0 clamp(1.5rem,3vw,2.25rem);border-bottom:1px solid var(--rule);}
.pagehead__crumbs{font-size:.75rem;color:var(--faint);margin-bottom:1rem;letter-spacing:.02em;}
.pagehead__crumbs a{color:var(--muted);}
.pagehead__crumbs a:hover{color:var(--accent);}
.pagehead__crumbs span{margin:0 .45rem;color:var(--rule);}
.pagehead h1{margin-bottom:.6rem;}
.pagehead__sub{color:var(--muted);font-size:.95rem;margin:0;max-width:60ch;}

/* ============================================================
   PROSE
   ============================================================ */
.prose,.rtl-prose,.legal-prose,.about-prose{
  font-family:var(--sans);font-size:1.02rem;line-height:1.75;color:var(--ink-2);
  max-width:var(--measure);
}
.prose > :first-child{margin-top:0;}
.prose h2{font-size:1.55rem;font-weight:600;margin:2.4rem 0 .7rem;letter-spacing:-.015em;}
.prose h3{font-size:1.24rem;font-weight:600;margin:1.9rem 0 .5rem;}
.prose h4{font-size:1.08rem;font-weight:600;margin:1.5rem 0 .4rem;}
.prose p{margin:0 0 1.2rem;}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;}
.prose a:hover{text-decoration-thickness:2px;}
.prose strong,.prose b{font-weight:700;color:var(--ink);}
.prose ul,.prose ol{margin:0 0 1.2rem;padding-left:1.3rem;}
.prose li{margin-bottom:.5rem;}
.prose li::marker{color:var(--accent);}
.prose img{max-width:100%;height:auto;border:1px solid var(--rule);}
.prose blockquote{
  border:0;border-left:2px solid var(--accent);margin:1.8rem 0;padding:.2rem 0 .2rem 1.3rem;
  font-style:italic;font-size:1.2rem;color:var(--ink);line-height:1.5;
}
.prose table{width:100%;border-collapse:collapse;margin:1.6rem 0;font-family:var(--sans);font-size:.9rem;}
.prose th,.prose td{border:0;border-bottom:1px solid var(--rule-2);padding:.65rem .5rem;text-align:left;}
.prose thead th{
  border-bottom:1.5px solid var(--rule-strong);font-size:.68rem;text-transform:uppercase;
  letter-spacing:.14em;color:var(--muted);font-weight:600;
}
.prose code{
  font-size:.88em;background:var(--paper-3);border:1px solid var(--rule);
  padding:.08rem .32rem;border-radius:2px;color:var(--ink);
}
.prose hr{margin:2.2rem 0;}

/* Rich text inside a label/value row (an advocate's specialisation or courts):
   same typography, without the article-sized spacing around it. */
.prose--tight{font-size:inherit;}
.prose--tight > :last-child{margin-bottom:0;}
.prose--tight p{margin:0 0 .6rem;}
.prose--tight ul,.prose--tight ol{margin:0 0 .6rem;padding-left:1.15rem;}
.prose--tight li{margin-bottom:.25rem;}
.prose--tight h2,.prose--tight h3,.prose--tight h4{font-size:1.02rem;margin:.9rem 0 .35rem;}

/* Drop-cap opener for long articles */
.prose--lead > p:first-of-type::first-letter{
  float:left;font-size:3.2em;line-height:.9;font-weight:700;
  padding:.02em .09em 0 0;color:var(--accent);
}

/* ============================================================
   ARTICLE PAGE
   ============================================================ */
.article__head{padding:clamp(2.25rem,5vw,3.5rem) 0 1.5rem;border-bottom:1px solid var(--rule);}
.article__title{font-size:clamp(1.75rem,4vw,2.8rem);font-weight:700;letter-spacing:-.032em;line-height:1.1;}
.article__byline{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;
  font-size:.8rem;color:var(--muted);margin-top:1.1rem;
}
.article__byline img{width:30px;height:30px;border-radius:50%;object-fit:cover;border:1px solid var(--rule);}
.article__byline strong{color:var(--ink);font-weight:600;}
.article__byline .sep{color:var(--rule);}
.article__body{padding:clamp(2rem,4vw,3rem) 0;}
.article__layout{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3rem);}
@media(min-width:1000px){.article__layout{grid-template-columns:minmax(0,1fr) 340px;}}
/* Not sticky: the rail now carries a form and three lists, so it is usually
   taller than the viewport and sticking it would clip the lower blocks. */
.article__rail{align-self:start;min-width:0;}

/* Article pages read as one column set. Without this the site's full-bleed
   wrap leaves the prose capped at --measure on the left while the hero image
   and the sidebar drift to the far right edge. */

/* ---- Split article hero: copy left, featured image right ---- */
.prose#articleBody{max-width:100% !important;}

.article__head--split{padding-bottom:clamp(1.5rem,3vw,2.5rem);}
.ahero{display:grid;grid-template-columns:1fr;gap:clamp(1.5rem,3vw,3rem);align-items:center;}
@media(min-width:900px){.ahero{grid-template-columns:minmax(0,1fr) minmax(0,380px);}}
.ahero__text{min-width:0;}
.ahero__sub{font-size:clamp(.95rem,1.4vw,1.05rem);color:var(--muted);line-height:1.65;margin:1rem 0 0;max-width:56ch;}
.ahero__art{min-width:0;}
.ahero__art img{
  width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block;
  border:1px solid var(--rule);border-radius:var(--radius);background:var(--paper-2);
}

/* ---- Article sidebar ---- */
.srail{display:flex;flex-direction:column;gap:1rem;margin-top:1.5rem;}
.srail__form .leadform,.srail__form .rtl-card{margin:0;}
.srail__box{
  border:1px solid var(--rule);border-radius:var(--radius);background:var(--paper);
  padding:1.15rem 1.15rem 1rem;
}
/* Header sits on a hairline so each block reads as a titled panel. */
.srail__h{
  font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);margin:0 0 .35rem;display:flex;align-items:center;gap:.5rem;
  padding-bottom:.7rem;border-bottom:1px solid var(--rule);
}
.srail__h i{color:var(--accent);font-size:1em;}

.srail__list,.srail__rank{list-style:none;margin:0;padding:0;}
.srail__list li + li,.srail__rank li + li{border-top:1px solid var(--rule-2);}
/* Negative inline padding lets the hover tint bleed to the card edge. */
.srail__list a,.srail__rank a{
  display:flex;align-items:center;gap:.7rem;min-width:0;
  padding:.7rem .5rem;margin:0 -.5rem;border-radius:calc(var(--radius) - 2px);
  transition:background .15s;
}
.srail__list a:hover,.srail__rank a:hover{background:var(--paper-2);}

.srail__ava,.srail__thumb{
  flex:none;width:42px;height:42px;overflow:hidden;
  border:1px solid var(--rule);background:var(--paper-2);
}
.srail__ava{border-radius:50%;object-fit:cover;}
.srail__thumb{
  border-radius:calc(var(--radius) - 2px);
  display:flex;align-items:center;justify-content:center;
}
.srail__thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.srail__thumb--none{color:var(--rule-strong);font-size:.9rem;}
.srail__list a:hover .srail__thumb--none{color:var(--accent);}

.srail__meta{display:flex;flex-direction:column;gap:.2rem;min-width:0;}
.srail__meta b{
  font-size:.85rem;font-weight:600;color:var(--ink);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.srail__meta small{
  font-size:.72rem;color:var(--faint);display:flex;align-items:center;gap:.35rem;
}
.srail__meta small i{color:var(--accent);font-size:.9em;}
.srail__list a:hover b,.srail__rank a:hover b{color:var(--accent);}

/* Ranked list — the numeral is the visual anchor, so give it real presence. */
.srail__rank a{align-items:flex-start;}
.srail__n{
  flex:none;width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  font-size:.74rem;font-weight:700;line-height:1;border-radius:50%;
  background:var(--paper-2);color:var(--muted);
  font-variant-numeric:tabular-nums;margin-top:.1rem;
}
.srail__rank li:nth-child(1) .srail__n{background:var(--accent);color:var(--on-accent);}
.srail__rank li:nth-child(2) .srail__n,
.srail__rank li:nth-child(3) .srail__n{
  background:rgba(var(--accent-rgb),.14);color:var(--accent);
}

.srail__more{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:.9rem;padding-top:.8rem;
  border-top:1px solid var(--rule);width:100%;
  font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
}
.srail__more:hover{color:var(--accent);}
.srail__more i{transition:transform .15s;}
.srail__more:hover i{transform:translateX(3px);}

/* Table of contents rail */
.toc{border-top:1.5px solid var(--rule-strong);padding-top:.9rem;}
.toc__t{font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:.6rem;}
.toc ol{list-style:none;counter-reset:t;margin:0;padding:0;}
.toc li{counter-increment:t;}
.toc a{
  display:block;font-size:.85rem;color:var(--ink-3);padding:.4rem 0 .4rem 1.5rem;
  position:relative;border-bottom:1px solid var(--rule-2);line-height:1.35;
}
.toc li:last-child a{border-bottom:0;}
.toc a::before{content:counter(t,decimal-leading-zero);position:absolute;left:0;top:.42rem;font-size:.66rem;color:var(--faint);}
.toc a:hover{color:var(--accent);}
.toc a:hover::before{color:var(--accent);}

/* Author box */
.authorbox{border-top:1.5px solid var(--rule-strong);margin-top:2.5rem;padding-top:1.25rem;display:flex;gap:1.1rem;align-items:flex-start;}
.authorbox img{width:64px;height:64px;border-radius:50%;object-fit:cover;border:1px solid var(--rule);flex:none;}
.authorbox h3{font-size:1.1rem;margin:.15rem 0 .2rem;}

/* ============================================================
   COMPARISON (IPC vs BNS)
   ============================================================ */
.compare{display:grid;grid-template-columns:1fr;gap:0;border-top:1.5px solid var(--rule-strong);}
@media(min-width:800px){.compare{grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3rem);}}
.compare__col{padding:1.5rem 0;}
@media(min-width:800px){.compare__col + .compare__col{border-left:1px solid var(--rule);padding-left:clamp(2rem,4vw,3rem);}}
@media(max-width:799.98px){.compare__col + .compare__col{border-top:1px solid var(--rule);}}
.compare__k{font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:.5rem;}
.compare__col--old .compare__k{color:var(--faint);}

.lawtable{width:100%;border-collapse:collapse;font-size:.9rem;}
.lawtable thead th{
  border-bottom:1.5px solid var(--rule-strong);padding:.7rem .6rem;text-align:left;
  font-family:var(--sans);font-size:.66rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;color:var(--muted);white-space:nowrap;
}
.lawtable tbody td{padding:.85rem .6rem;border-bottom:1px solid var(--rule-2);vertical-align:middle;}
.lawtable tbody tr{cursor:pointer;transition:background .12s;}
.lawtable tbody tr:hover{background:var(--paper-2);}
.lawtable tbody tr:hover .lawtable__t{color:var(--accent);}
.lawtable__t{font-family:var(--serif);font-size:1rem;color:var(--ink);}
a.lawtable__t{color:var(--ink);}
.lawtable tbody tr:hover a.lawtable__t{color:var(--accent);}

/* ---- Section-number chips ----
   The old and new codes are the whole point of this table, so give them
   weight: the repealed IPC code reads as neutral, the live BNS code as
   current. Tabular figures keep the columns aligned. */
.sec,.lawtable__s{
  display:inline-block;min-width:3.2rem;text-align:center;
  font-variant-numeric:tabular-nums;font-weight:600;font-size:.82rem;
  letter-spacing:.01em;padding:.15rem .45rem;border-radius:var(--radius-sm);
  border:1px solid transparent;
}
.sec--old,.lawtable__s{background:var(--paper-3);color:var(--ink-3);}
.sec--new{background:var(--accent-tint);color:var(--accent);border-color:var(--accent-line);}

/* The mapping reads left-to-right as one unit, not two columns. */
.lawmap{display:inline-flex;align-items:center;gap:.55rem;white-space:nowrap;}
.lawmap i{font-size:.68rem;color:var(--faint);}
.lawtable tbody tr:hover .lawmap i{color:var(--accent);}

/* Rows are clickable — say so on hover, without reserving extra width. */
.lawtable__end{white-space:nowrap;}
.lawtable__go{
  font-size:.68rem;color:var(--faint);margin-left:.6rem;
  opacity:0;transition:opacity .12s ease;
}
.lawtable tbody tr:hover .lawtable__go{opacity:1;}
.lawtable--map tbody td{padding-top:.7rem;padding-bottom:.7rem;}

.tagstate{
  display:inline-block;font-family:var(--sans);font-size:.66rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;padding:.2rem .5rem;border:1px solid;border-radius:2px;
}
.tagstate--retained{color:var(--ok);border-color:var(--ok-line);background:var(--ok-bg);}
.tagstate--modified{color:var(--warn);border-color:var(--warn-line);background:var(--warn-bg);}
.tagstate--omitted{color:var(--bad);border-color:var(--bad-line);background:var(--bad-bg);}
.tagstate--all{color:var(--ink-3);border-color:var(--rule);background:var(--paper);}
a.tagstate{transition:.15s;}
a.tagstate:hover{border-color:var(--ink);color:var(--ink);}
a.tagstate.is-active{background:var(--ink);border-color:var(--ink);color:var(--on-accent);}

/* ============================================================
   FILTER RAIL
   ============================================================ */
.rail{border-top:1.5px solid var(--rule-strong);padding-top:1rem;}
.rail__head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:.35rem;}
.rail__head h2{font-family:var(--sans);font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin:0;}
.rail__clear{font-size:.75rem;color:var(--muted);border-bottom:1px solid var(--rule);}
.rail__clear:hover{color:var(--accent);border-color:var(--accent);}
.rail__group{padding:1rem 0;border-bottom:1px solid var(--rule-2);}
.rail__group:last-child{border-bottom:0;}
.rail__group h3{
  font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2);margin:0 0 .6rem;
}
.rail__scroll{max-height:220px;overflow:auto;}
.rail__scroll::-webkit-scrollbar{width:5px;}
.rail__scroll::-webkit-scrollbar-thumb{background:var(--rule);}

/* ============================================================
   DIRECTORY FILTERS
   Console strip for the primary search, rail for refinements.
   ============================================================ */
.fconsole{
  background:var(--paper-2);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  padding:1.1rem 0;
  position:sticky;top:0;z-index:25;
}
.fconsole__grid{display:grid;grid-template-columns:1fr;gap:.6rem;}
@media(min-width:820px){
  .fconsole__grid{grid-template-columns:2fr 1.1fr 1.3fr auto;align-items:end;}
}
.ffield{display:flex;flex-direction:column;gap:.3rem;min-width:0;}
.ffield__k{
  font-family:var(--sans);font-size:.62rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);
}
.ffield input,.ffield select{
  width:100%;font-family:var(--sans);font-size:.92rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);
  padding:.62rem .75rem;transition:border-color .15s,box-shadow .15s;
}
.ffield input:focus,.ffield select:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.10);
}
.ffield select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:2rem;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%237a736c' stroke-width='1.6' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .7rem center;background-size:11px;
}
.fconsole__go{
  border:0;background:var(--ink);color:var(--on-accent);cursor:pointer;
  font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;padding:.72rem 1.6rem;border-radius:var(--radius);
  transition:background .15s;white-space:nowrap;
}
.fconsole__go:hover{background:var(--accent);}
.fconsole__go:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--accent-rgb),.25);}

/* Toolbar above the results */
.fbar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.75rem;padding-bottom:.9rem;border-bottom:1px solid var(--rule-2);margin-bottom:1rem;
}
.fbar__count{font-size:.86rem;color:var(--muted);}
.fbar__count .num{color:var(--ink);font-size:1.05rem;font-weight:600;}
.fbar__right{display:flex;align-items:center;gap:.75rem;}
.fbar__dot{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--accent);margin-left:.35rem;vertical-align:middle;
}
.fsort{display:inline-flex;align-items:center;gap:.45rem;}
.fsort span{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:600;}
.fsort select{
  font-family:var(--sans);font-size:.85rem;color:var(--ink);cursor:pointer;
  background:transparent;border:0;border-bottom:1px solid var(--rule);
  padding:.2rem 1.2rem .2rem .1rem;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%237a736c' stroke-width='1.6' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .1rem center;background-size:10px;
}
.fsort select:focus{outline:none;border-bottom-color:var(--accent);}

/* Checkbox / radio rows in the rail */
.fcheck{
  display:flex;align-items:flex-start;gap:.55rem;cursor:pointer;
  padding:.3rem 0;font-size:.87rem;color:var(--ink-3);line-height:1.4;
}
.fcheck input{position:absolute;opacity:0;width:0;height:0;}
.fcheck__box{
  flex:none;width:15px;height:15px;margin-top:.16rem;
  border:1.5px solid var(--control-line);border-radius:3px;background:var(--paper);
  transition:background .12s,border-color .12s;position:relative;
}
.fcheck input[type="radio"] + .fcheck__box{border-radius:50%;}
.fcheck:hover .fcheck__box{border-color:var(--accent);}
.fcheck input:checked + .fcheck__box{background:var(--accent);border-color:var(--accent);}
.fcheck input:checked + .fcheck__box::after{
  content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;
  border:solid var(--on-accent);border-width:0 1.6px 1.6px 0;transform:rotate(45deg);
}
.fcheck input[type="radio"]:checked + .fcheck__box::after{
  left:4px;top:4px;width:5px;height:5px;border:0;border-radius:50%;
  background:var(--on-accent);transform:none;
}
.fcheck input:focus-visible + .fcheck__box{box-shadow:0 0 0 3px rgba(var(--accent-rgb),.20);}
.fcheck input:checked ~ .fcheck__t{color:var(--ink);font-weight:500;}

/* Experience pills */
.fpills{display:flex;flex-wrap:wrap;gap:.35rem;}
.fpill{cursor:pointer;}
.fpill input{position:absolute;opacity:0;width:0;height:0;}
.fpill span{
  display:inline-block;font-size:.8rem;color:var(--ink-3);
  border:1px solid var(--rule);border-radius:999px;padding:.24rem .7rem;
  transition:.12s;background:var(--paper);
}
.fpill:hover span{border-color:var(--accent);color:var(--accent);}
.fpill input:checked + span{background:var(--ink);border-color:var(--ink);color:var(--on-accent);}
.fpill input:focus-visible + span{box-shadow:0 0 0 3px rgba(var(--accent-rgb),.20);}

/* Verified switch */
.fswitch{display:flex;align-items:flex-start;gap:.65rem;cursor:pointer;}
.fswitch input{position:absolute;opacity:0;width:0;height:0;}
.fswitch__track{
  flex:none;width:34px;height:19px;border-radius:999px;background:var(--control-line);
  position:relative;transition:background .15s;margin-top:.1rem;
}
.fswitch__dot{
  position:absolute;top:2.5px;left:2.5px;width:14px;height:14px;border-radius:50%;
  background:var(--on-accent);transition:transform .15s;
}
.fswitch input:checked + .fswitch__track{background:var(--accent);}
.fswitch input:checked + .fswitch__track .fswitch__dot{transform:translateX(15px);}
.fswitch input:focus-visible + .fswitch__track{box-shadow:0 0 0 3px rgba(var(--accent-rgb),.20);}
.fswitch__label{font-size:.87rem;color:var(--ink-2);font-weight:500;line-height:1.35;}
.fswitch__label small{display:block;font-size:.74rem;color:var(--faint);font-weight:400;margin-top:.1rem;}

@media(max-width:991.98px){
  .fconsole{position:static;}
}

.chips{display:flex;flex-wrap:wrap;gap:.4rem;}
.chipx{
  display:inline-flex;align-items:center;gap:.45rem;font-size:.76rem;
  background:var(--ink);color:var(--on-accent);padding:.22rem .5rem .22rem .65rem;border-radius:2px;
}
.chipx a{color:var(--on-accent);opacity:.65;font-size:.7rem;}
.chipx a:hover{opacity:1;}

@media(max-width:991.98px){
  .rail{
    position:fixed;inset:0 0 0 auto;width:min(330px,88vw);z-index:1050;background:var(--paper);
    transform:translateX(100%);transition:transform .25s ease;overflow:auto;
    padding:1.25rem;box-shadow:var(--shadow-lg);border-top:0;
  }
  .rail.open{transform:translateX(0);}
  .rail-backdrop{position:fixed;inset:0;background:rgba(18,16,14,.4);z-index:1040;display:none;}
  .rail-backdrop.open{display:block;}
}

/* ============================================================
   PROFILE (lawyer)

   One header holds the whole profile. Experience, languages and the Bar
   Council number used to be printed here AND again in a "Details" card in the
   rail; the rail now carries the callback form and nothing else.
   ============================================================ */
.pro{
  padding:clamp(1.75rem,4vw,2.75rem) 0 clamp(1.5rem,3vw,2rem);
  background:var(--paper-2);border-bottom:1px solid var(--rule);
}
.pro__top{display:flex;flex-wrap:wrap;gap:1.25rem 1.75rem;align-items:flex-start;}
.pro__photo{
  width:128px;height:128px;object-fit:cover;flex:none;
  border:1px solid var(--rule);background:var(--paper);
  border-radius:var(--radius);box-shadow:var(--shadow-1,0 1px 2px rgba(18,16,14,.05));
}
.pro__id{flex:1 1 20rem;min-width:0;}
/* Two classes so a theme's own .kicker spacing does not reopen the gap. */
.pro__id .kicker{margin-bottom:.55rem;}
.pro__name{
  font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:600;
  letter-spacing:-.028em;margin:0 0 .4rem;
}
.pro__where{font-size:.92rem;color:var(--muted);margin:0 0 .7rem;}
.pro__where i{font-size:.8em;color:var(--faint);margin-right:.3rem;}
.pro__badges{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.1rem;}
.dir__rcount{font-size:.8rem;font-weight:500;color:var(--muted);text-decoration:none;margin-left:.15rem;}
.dir__rcount:hover{color:var(--accent);text-decoration:underline;}
/* Pinned right on a wide screen, dropped under the name on a narrow one. */
.pro__acts{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-left:auto;}
.pro__acts form{display:inline;}

/* Published facts and gated ones, in one grid.
   auto-fill, not auto-fit: an advocate with two facts gets two normal-width
   cells rather than two stretched across the whole page. */
.pro__facts{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(12.5rem,1fr));
  gap:1px;margin:clamp(1.25rem,3vw,1.75rem) 0 0;
  background:var(--rule-2);border:1px solid var(--rule-2);border-radius:var(--radius);
  overflow:hidden;
}
.pro__fact{background:var(--paper);padding:.8rem 1rem;min-width:0;}
.pro__fact dt{
  font-size:.64rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--faint);margin:0 0 .3rem;
}
.pro__fact dd{
  font-size:.9rem;line-height:1.45;color:var(--ink-2);margin:0;
  overflow-wrap:anywhere;
}
/* A button is not a value — the tinted cell says so before it is read. */
.pro__fact--locked{background:var(--accent-tint);}
.pro__fact--locked dt{color:var(--accent);opacity:.75;}

/* Practice areas, specialisation and courts — the "what and where", in the
   body. Deliberately unboxed and untitled: each row is labelled, so a card
   border and a heading above it were both restating what the labels say.
   Hairline rules between rows are all the structure it needs. */
.prolist{margin:0 0 2.25rem;}
.prolist__row{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.75rem;
  padding:.9rem 0;border-bottom:1px solid var(--rule-2);
}
.prolist__row:first-child{padding-top:0;}
.prolist__row:last-child{border-bottom:0;padding-bottom:0;}
.prolist__k{
  flex:1 1 100%;
  margin:0;
  font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.prolist__v{min-width:0;margin:0;font-size:14px;line-height:1.6;color:var(--ink-2);}
.prolist__v .dir__areas{margin-top:0;gap:.4rem;}
/* Two classes so the active theme's own .dir__area sizing does not shrink
   these back — the chips here are body content, not card metadata. */
.prolist__v .dir__area{font-size:.85rem;padding:.3rem .7rem;}

@media (max-width:575.98px){
  .prolist__row{gap:.45rem;}
  .prolist__k{flex:1 1 100%;}
  .prolist__v{font-size:1rem;}
}

/* The rail is a single sticky card now, so it can travel with the reader. */
.pro__rail{position:sticky;top:1.5rem;}

@media (max-width:991.98px){
  .pro__rail{position:static;}
}
@media (max-width:575.98px){
  .pro__top{gap:1rem;}
  .pro__photo{width:88px;height:88px;}
  .pro__acts{margin-left:0;width:100%;}
  .pro__acts .btn{flex:1 1 auto;justify-content:center;}
  .pro__facts{grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));}
}

/* ============================================================
   BUTTONS  (shared with the admin console)
   ============================================================ */
.btn{
  font-family:var(--sans);font-weight:600;font-size:.85rem;
  border-radius:var(--radius);padding:.55rem 1.15rem;letter-spacing:.01em;
  transition:background .15s,color .15s,border-color .15s;
}
.btn:focus,.btn:focus-visible{box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18);outline:none;}
.btn-lg{padding:.75rem 1.7rem;font-size:.9rem;}
.btn-sm{padding:.32rem .75rem;font-size:.78rem;}

.btn-ink,.btn-gold,.btn-navy,.btn-primary,.btn-dark{
  background:var(--ink);border:1.5px solid var(--ink);color:var(--on-accent);
}
.btn-ink:hover,.btn-gold:hover,.btn-navy:hover,.btn-primary:hover,.btn-dark:hover,
.btn-ink:focus,.btn-gold:focus,.btn-navy:focus,.btn-primary:focus,.btn-dark:focus{
  background:var(--accent);border-color:var(--accent);color:var(--on-accent);
}
.btn-accent{background:var(--accent);border:1.5px solid var(--accent);color:var(--on-accent);}
.btn-accent:hover,.btn-accent:focus{background:var(--accent-dark);border-color:var(--accent-dark);color:var(--on-accent);}

.btn-line,.btn-outline-navy,.btn-outline-dark,.btn-outline-primary,.btn-outline-secondary,.btn-outline-light{
  background:transparent;border:1.5px solid var(--rule);color:var(--ink);
}
.btn-line:hover,.btn-outline-navy:hover,.btn-outline-dark:hover,.btn-outline-primary:hover,
.btn-outline-secondary:hover,.btn-outline-light:hover,
.btn-line:focus,.btn-outline-navy:focus,.btn-outline-dark:focus{
  border-color:var(--ink);background:var(--ink);color:var(--on-accent);
}
.btn-light{background:var(--paper-2);border:1.5px solid var(--rule);color:var(--ink);}
.btn-light:hover{background:var(--paper-3);color:var(--ink);}
.btn-link{color:var(--accent);font-weight:600;text-decoration:none;}
.btn-link:hover{text-decoration:underline;color:var(--accent-dark);}
.btn-danger{background:var(--bad);border:1.5px solid var(--bad);color:var(--on-accent);}
.btn-danger:hover{background:var(--bad-dark);border-color:var(--bad-dark);color:var(--on-accent);}
.btn-success{background:var(--ok);border:1.5px solid var(--ok);color:var(--on-accent);}
.btn-success:hover{background:var(--ok-dark);border-color:var(--ok-dark);color:var(--on-accent);}
.btn-outline-danger{background:transparent;border:1.5px solid var(--rule);color:var(--bad);}
.btn-outline-danger:hover{background:var(--bad);border-color:var(--bad);color:var(--on-accent);}

/* Text link with a rule under it */
.ulink{color:var(--ink);border-bottom:1px solid var(--rule);padding-bottom:1px;font-weight:500;}
.ulink:hover{color:var(--accent);border-color:var(--accent);}

/* ============================================================
   FORMS
   ============================================================ */
.form-control,.form-select{
  font-family:var(--sans);border:1px solid var(--rule);border-radius:var(--radius);
  padding:.55rem .75rem;color:var(--ink);background:var(--paper);box-shadow:none;font-size:.92rem;
}
.form-control::placeholder{color:var(--faint);}
.form-control:focus,.form-select:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.10);color:var(--ink);
}
.form-label{font-family:var(--sans);font-weight:600;color:var(--ink-2);font-size:.82rem;margin-bottom:.3rem;}
.form-check-input{border-color:var(--control-line);}
.form-check-input:checked{background-color:var(--accent);border-color:var(--accent);}
.form-check-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.10);}
.form-check-label{font-size:.87rem;color:var(--ink-3);}
.input-group-text{background:var(--paper-2);border-color:var(--rule);color:var(--muted);}

.alert{border-radius:var(--radius);border:1px solid var(--rule);border-left-width:3px;padding:.8rem 1rem;font-size:.9rem;}
.alert-success{background:var(--ok-bg);border-color:var(--ok-line);border-left-color:var(--ok);color:var(--ok);}
.alert-danger{background:var(--bad-bg);border-color:var(--bad-line);border-left-color:var(--bad);color:var(--bad);}
.alert-warning{background:var(--warn-bg);border-color:var(--warn-line);border-left-color:var(--warn);color:var(--warn);}
.alert-info{background:var(--paper-2);border-left-color:var(--ink);color:var(--ink-2);}

.badge{font-family:var(--sans);font-weight:600;font-size:.68rem;border-radius:2px;padding:.28em .55em;letter-spacing:.04em;}
.badge.bg-danger{background:var(--accent)!important;}
.badge.bg-success{background:var(--ok)!important;}
.badge.bg-secondary,.badge.bg-light{background:var(--paper-3)!important;color:var(--ink-2)!important;}

/* ============================================================
   PAGINATION / LOAD MORE
   ============================================================ */
.rtl-pagination{gap:.3rem;flex-wrap:wrap;}
.rtl-pagination .page-link{
  font-family:var(--sans);border:1px solid var(--rule);color:var(--ink-3);border-radius:var(--radius);
  min-width:36px;text-align:center;font-size:.85rem;padding:.4rem .7rem;background:var(--paper);box-shadow:none;
}
.rtl-pagination .page-link:hover{border-color:var(--ink);color:var(--ink);background:var(--paper-2);}
.rtl-pagination .page-item.active .page-link{background:var(--ink);border-color:var(--ink);color:var(--on-accent);}
.rtl-pagination .page-item.disabled .page-link{color:var(--faint);pointer-events:none;}

.btn-loadmore{
  display:inline-flex;align-items:center;gap:.5rem;background:transparent;
  border:1.5px solid var(--ink);color:var(--ink);font-family:var(--sans);font-weight:600;
  font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;
  padding:.7rem 2rem;border-radius:var(--radius);transition:.15s;
}
.btn-loadmore:hover{background:var(--ink);color:var(--on-accent);}
.btn-loadmore.loading{opacity:.5;pointer-events:none;}

/* ---------- FAQ ---------- */
.faq{border-top:1.5px solid var(--rule-strong);}
.faq .accordion-item{border:0;border-bottom:1px solid var(--rule-2);border-radius:0!important;background:transparent;}
.faq .accordion-button{
  font-family:var(--sans);font-size:1rem;font-weight:600;color:var(--ink);
  background:transparent;padding:1.05rem .25rem;box-shadow:none;
}
.faq .accordion-button:not(.collapsed){background:transparent;color:var(--accent);}
.faq .accordion-button:focus{box-shadow:none;}
.faq .accordion-button::after{filter:grayscale(1) opacity(.45);}
.faq .accordion-body{font-family:var(--sans);color:var(--ink-2);line-height:1.75;padding:0 .25rem 1.15rem;font-size:.96rem;}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{border-top:1.5px solid var(--rule-strong);padding:clamp(2.5rem,5vw,4rem) 0 1.5rem;background:var(--paper);}
/* Brand block left, every link column inside one nested grid on the right.
   auto-fit means 2, 3, 4 or 5 admin-defined columns all share that one row
   rather than a fifth child wrapping under the logo. */
.foot__grid{display:grid;grid-template-columns:1fr;gap:2.25rem;}
@media(min-width:860px){
  .foot__grid{grid-template-columns:minmax(230px,1fr) minmax(0,2.6fr);gap:clamp(2rem,5vw,4.5rem);}
}
.foot__brandcol{min-width:0;}
.foot__menus{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:1.75rem 2rem;align-items:start;
}
.foot__col{min-width:0;}
.foot__addr{font-size:.86rem;color:var(--muted);}
.foot__brand{font-family:var(--serif);font-size:1.35rem;font-weight:600;color:var(--ink);letter-spacing:-.02em;}
.foot__brand span{color:var(--accent);}
.foot__about{font-size:.85rem;color:var(--muted);line-height:1.65;margin:.75rem 0 1rem;max-width:38ch;}
.foot h6{
  font-family:var(--sans);font-size:.66rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);margin-bottom:.9rem;
}
.foot ul{list-style:none;margin:0;padding:0;}
.foot li{margin-bottom:.55rem;}
.foot a{font-size:.86rem;color:var(--ink-3);}
.foot a:hover{color:var(--accent);}
/* Footer links measured 16px tall on a phone — under every touch-target
   guideline. inline-block plus vertical padding gives them a real hit area
   without changing how the column looks. */
.foot__col li a{display:inline-block;padding:.3rem 0;line-height:1.35;}
.foot__col li{margin-bottom:.15rem;}
.foot__social{display:flex;gap:.4rem;}
.foot__social a{
  width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--rule);color:var(--muted);border-radius:2px;font-size:.8rem;
}
.foot__social a:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}
.foot__bottom{
  border-top:1px solid var(--rule);margin-top:clamp(2rem,4vw,3rem);padding-top:1.15rem;
  font-size:.78rem;color:var(--faint);display:flex;flex-wrap:wrap;gap:.75rem;justify-content:space-between;
}

/* ============================================================
   FLOATING WIDGETS
   ============================================================ */
.wa-float{
  position:fixed;right:18px;bottom:18px;z-index:1030;width:46px;height:46px;
  border-radius:50%;background:var(--ink);color:var(--on-accent);display:flex;align-items:center;
  justify-content:center;box-shadow:var(--shadow-lg);transition:.15s;
}
.wa-float:hover{background:var(--accent);color:var(--on-accent);}
.wa-float svg{width:22px;height:22px;}
.scroll-top{
  position:fixed;right:18px;bottom:46px;z-index:1030;width:40px;height:40px;
  border:1px solid var(--rule);border-radius:50%;background:var(--paper);color:var(--ink);
  font-size:.85rem;line-height:1;box-shadow:var(--shadow);cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s,transform .2s,visibility .2s,background .15s,color .15s;
}
.scroll-top.show{opacity:1;visibility:visible;transform:none;}
.scroll-top:hover{background:var(--ink);color:var(--on-accent);border-color:var(--ink);}
.scroll-top.has-wa{bottom:76px;}

/* Collapsible SEO block */
.readmore.is-collapsed{max-height:420px;overflow:hidden;position:relative;}
.readmore.is-collapsed::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:130px;
  background:linear-gradient(rgba(255,255,255,0),var(--paper));pointer-events:none;
}
.band--tint .readmore.is-collapsed::after{background:linear-gradient(rgba(250,249,247,0),var(--paper-2));}

/* ============================================================
   DIRECTORY FOOT — SEO copy beside the FAQ / browse rail.
   Stacked, the prose is capped at --measure and leaves the whole
   right-hand side of a full-width page empty, so it runs two-up.
   ============================================================ */
.dirinfo{display:grid;grid-template-columns:1fr;gap:2.5rem;}
@media(min-width:1000px){
  .dirinfo{grid-template-columns:minmax(0,1fr) minmax(320px,1fr);gap:clamp(2rem,4vw,4rem);align-items:start;}
}
.dirinfo__main,.dirinfo__side{min-width:0;}
.dirinfo__side .section-head{margin-top:0;}

.dirrail{display:flex;flex-direction:column;gap:1.6rem;}
.dirrail__stats{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;
  border:1px solid var(--rule);border-radius:var(--radius);background:var(--paper);
  padding:1.1rem .75rem;text-align:center;
}
.dirrail__stats div{display:flex;flex-direction:column;gap:.15rem;}
.dirrail__stats strong{
  font-size:clamp(1.25rem,2.2vw,1.7rem);font-weight:600;color:var(--ink);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1;
}
.dirrail__stats span{font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);}
.dirrail__head{
  font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin:0 0 .8rem;display:flex;align-items:center;gap:.5rem;
}
.dirrail__chips{display:flex;flex-wrap:wrap;gap:.4rem;}
.dirrail__chips a{
  display:inline-flex;align-items:center;gap:.45rem;font-size:.83rem;color:var(--ink-3);
  background:var(--paper);border:1px solid var(--rule);padding:.32rem .8rem;
  border-radius:999px;transition:.15s;
}
.dirrail__chips a:hover{border-color:var(--accent);color:var(--accent);}
/* Count pill — chips without a count (courts) keep the plain padding above. */
.dirrail__chips a span{
  font-size:.7rem;color:var(--faint);background:var(--paper-2);border-radius:999px;
  padding:.05rem .4rem;font-variant-numeric:tabular-nums;margin-right:-.28rem;
}
.dirrail__chips a:hover span{background:var(--accent);color:var(--on-accent);}

/* ============================================================
   GUIDES ARCHIVE — article cards
   auto-fill (not auto-fit) so a single guide keeps card width
   instead of stretching across the full-bleed page.
   ============================================================ */
.guides__count{
  display:inline-flex;align-items:center;gap:.5rem;margin:.9rem 0 0;
  font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);
}
.guides__count i{color:var(--accent);font-size:.9em;}

.guides__cta{
  border:1px solid var(--rule);border-radius:var(--radius);
  background:var(--paper);padding:1.25rem;
}
.guides__cta-t{font-size:1rem;font-weight:600;color:var(--ink);margin:0 0 .4rem;letter-spacing:-.01em;}
.guides__cta-x{font-size:.84rem;color:var(--muted);line-height:1.6;margin:0 0 1rem;}
.guides__cta .btn{display:inline-flex;align-items:center;gap:.5rem;}

.gcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem;}
.gcard{
  display:flex;flex-direction:column;min-width:0;
  border:1px solid var(--rule);border-radius:var(--radius);background:var(--paper);
  overflow:hidden;transition:border-color .15s,transform .15s,box-shadow .15s;
}
.gcard:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-1);}
.gcard__img{display:block;aspect-ratio:16/9;background:var(--paper-2);overflow:hidden;}
.gcard__img img{width:100%;height:100%;object-fit:cover;display:block;}
.gcard__img--none{
  display:flex;align-items:center;justify-content:center;
  color:var(--rule-strong);font-size:1.6rem;
}
.gcard:hover .gcard__img--none{color:var(--accent);}
.gcard__body{display:flex;flex-direction:column;flex:1;padding:1.15rem;}
.gcard__k{
  font-size:.64rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);
}
.gcard__t{
  font-family:var(--serif);font-size:1.1rem;font-weight:600;line-height:1.35;
  color:var(--ink);margin:.5rem 0 .45rem;letter-spacing:-.01em;
}
.gcard:hover .gcard__t{color:var(--accent);}
.gcard__x{font-size:.86rem;color:var(--muted);line-height:1.6;flex:1;}
.gcard__m{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  font-size:.72rem;color:var(--faint);margin-top:.9rem;
}
.gcard__m b{color:var(--ink-3);font-weight:600;}
.gcard__m > * + *::before{content:"·";margin-right:.5rem;color:var(--rule-strong);}
.gcard__go{
  font-size:.73rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);display:inline-flex;align-items:center;gap:.4rem;
  margin-top:.85rem;padding-top:.85rem;border-top:1px solid var(--rule);
}
.gcard:hover .gcard__go{color:var(--accent);}
.gcard__go i{transition:transform .15s;}
.gcard:hover .gcard__go i{transform:translateX(3px);}

/* Empty state */
.empty{border-top:1.5px solid var(--rule-strong);padding:clamp(2.5rem,6vw,4rem) 0;text-align:center;}
.empty h3{font-size:1.35rem;margin-bottom:.5rem;}
.empty p{color:var(--muted);max-width:44ch;margin:0 auto 1.25rem;}

/* ============================================================
   LEAD CAPTURE — "request a callback"
   Editorial treatment: a ruled panel, not a rounded card.
   ============================================================ */
.leadform{
  border-top:2px solid var(--ink);
  background:var(--paper-2);
  padding:1.5rem 1.4rem 1.4rem;
  position:relative;
}
.leadform__head{margin-bottom:1.1rem;}
.leadform__title{
  font-family:var(--serif);font-size:1.4rem;font-weight:600;
  color:var(--ink);letter-spacing:-.02em;margin:0 0 .35rem;line-height:1.15;
}
.leadform__sub{font-size:.86rem;color:var(--muted);margin:0;line-height:1.5;}

.leadform__row{margin-bottom:.85rem;}
.leadform__label{
  display:block;font-family:var(--sans);font-size:.66rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:.35rem;
}
.leadform__input{
  width:100%;font-family:var(--sans);font-size:.95rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);
  padding:.6rem .75rem;transition:border-color .15s,box-shadow .15s;
}
.leadform__input::placeholder{color:var(--faint);}
.leadform__input:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.10);
}
.leadform__input.is-bad{border-color:var(--bad);background:var(--bad-bg);}
select.leadform__input{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%237a736c' stroke-width='1.6' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .75rem center;background-size:11px;
  padding-right:2rem;
}
.leadform__err{display:block;font-size:.76rem;color:var(--bad);margin-top:.25rem;}
.leadform__err:empty{display:none;}

.leadform__btn{
  width:100%;border:0;background:var(--ink);color:var(--on-accent);cursor:pointer;
  font-family:var(--sans);font-size:.82rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;padding:.85rem 1rem;border-radius:var(--radius);
  transition:background .15s;margin-top:.35rem;
}
.leadform__btn:hover{background:var(--accent);}
.leadform__btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--accent-rgb),.25);}
.leadform__btn[disabled]{opacity:.6;cursor:default;}
.leadform__note{font-size:.72rem;color:var(--faint);margin:.7rem 0 0;text-align:center;line-height:1.45;}

/* Off-screen honeypot — present to bots, invisible to people */
.leadform__hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}

.leadform__alert{
  font-size:.85rem;padding:.7rem .85rem;border-radius:var(--radius);margin-bottom:1rem;
  border:1px solid;border-left-width:3px;
}
.leadform__alert--ok{background:var(--ok-bg);border-color:var(--ok-line);border-left-color:var(--ok);color:var(--ok);}

/* Success state swaps in after an AJAX submit */
.leadform__done{text-align:center;padding:1.5rem .5rem;}
.leadform__done i{font-size:1.75rem;color:var(--ok);display:block;margin-bottom:.6rem;}
.leadform__done p{font-family:var(--serif);font-size:1.05rem;color:var(--ink);line-height:1.5;}
.leadform.is-done .leadform__head,
.leadform.is-done .leadform__form{display:none;}

.opener__side .leadform{margin-top:1.5rem;}

/* Star rating */
.rtl-stars{display:inline-flex;align-items:center;gap:.08rem;color:var(--accent);font-size:.8rem;}
.rtl-stars .is-empty{color:var(--rule);}

/* ============================================================
   PHOTO FALLBACK
   With no photo of their own, an advocate shows the site favicon. A favicon
   is a logo, not a portrait — cropping it with object-fit:cover would blow
   up the centre of the mark, so contain and inset it instead.
   ============================================================ */
/* The inset MUST be a fixed length. A percentage padding resolves against the
   containing block's width — not the image's own size — so on a wide parent it
   collapsed the content box to zero (blank tile) and inflated the element. */
.is-fallback{
  object-fit:contain!important;
  padding:7px;
  background:var(--paper-2);
}
/* Larger avatars carry a proportionally larger inset. The profile photo also
   keeps a white ground — the header band is already paper-2, and a fallback
   mark on the same tone reads as a hole. */
.pro__photo.is-fallback{padding:18px;background:var(--paper);}
.lawyer-avatar-lg.is-fallback{padding:16px;}
.logo-preview.is-fallback{padding:13px;}
.admin-thumb.is-fallback{padding:6px;}

/* Icons never swallow clicks meant for their button */
.btn i,.btn svg,button i,button svg,a.btn i{pointer-events:none;}
i.fa-solid,i.fa-regular,i.fa-brands{vertical-align:-.05em;line-height:1;}

/* ============================================================
   LEGACY ALIASES — admin console + any markup not yet converted
   ============================================================ */
.rtl-card{background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);}
.chip{display:inline-block;background:var(--paper-2);border:1px solid var(--rule);color:var(--ink-3);
  border-radius:2px;padding:.14rem .55rem;font-size:.76rem;margin:.1rem;}
a.chip:hover{border-color:var(--accent);color:var(--accent);}
.chip-gold{background:var(--accent-tint);border-color:var(--accent-line);color:var(--accent);}
.section-title,.section-title-c{font-family:var(--serif);font-weight:600;color:var(--ink);letter-spacing:-.015em;}
.text-gold{color:var(--accent)!important;}
.text-muted{color:var(--muted)!important;}
.text-dark{color:var(--ink)!important;}
.text-secondary{color:var(--muted)!important;}
.bg-light{background:var(--paper-2)!important;}
.bg-white{background:var(--paper)!important;}
.bg-navy{background:var(--paper-2)!important;color:var(--ink)!important;}
.border{border-color:var(--rule)!important;}
.shadow,.shadow-sm{box-shadow:var(--shadow)!important;}
.shadow-lg{box-shadow:var(--shadow-lg)!important;}
.card{border:1px solid var(--rule);border-radius:var(--radius);}
.badge-soft-green{background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok-line);}
.badge-soft-amber{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-line);}
.lawyer-avatar{width:60px;height:60px;border-radius:50%;object-fit:cover;background:var(--paper-3);border:1px solid var(--rule);}
.lawyer-avatar-lg{width:104px;height:104px;object-fit:cover;background:var(--paper-3);border:1px solid var(--rule);border-radius:2px;}

/* ============================================================
   Utility pages — About, Contact, Privacy, Terms, Author.
   A deliberately different register from the article template:
   no breadcrumb, no rail, no related posts. A centred document
   measure, hairline section rules, and one module per page.
   ============================================================ */
.wrap--doc{max-width:920px;}

.upage__head{
  padding:clamp(2.5rem,6vw,4.25rem) 0 clamp(1.5rem,3vw,2.25rem);
  background:var(--paper-2);border-bottom:1px solid var(--rule);
}
.upage__eyebrow{
  display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent);
  /* The rule under the eyebrow is the page's only ornament. */
  padding-bottom:.5rem;border-bottom:2px solid var(--accent);margin-bottom:1rem;
}
.upage__title{
  font-family:var(--serif);font-size:clamp(2rem,5.5vw,3.15rem);font-weight:700;
  line-height:1.08;letter-spacing:-.025em;color:var(--ink);margin:0;
}
.upage__lead{
  font-size:clamp(1.02rem,1.9vw,1.18rem);line-height:1.65;color:var(--ink-3);
  max-width:56ch;margin:1rem 0 0;font-weight:300;
}
.upage__stamp{
  display:inline-flex;align-items:center;gap:.45rem;margin:1.25rem 0 0;
  font-size:.82rem;color:var(--muted);
  background:var(--paper);border:1px solid var(--rule);border-radius:100px;padding:.35rem .8rem;
}
.upage__stamp i{color:var(--accent);}

.upage__body{padding:clamp(2rem,5vw,3.25rem) 0 0;}
.upage__prose{font-size:1.03rem;line-height:1.85;}
.upage__empty{
  color:var(--muted);font-size:1rem;line-height:1.7;margin:0;
  padding:1.25rem 1.4rem;background:var(--paper-2);
  border-left:3px solid var(--rule-strong);border-radius:0 var(--radius) var(--radius) 0;
}
.upage__note{font-size:.86rem;color:var(--muted);line-height:1.65;margin:1.25rem 0 0;}
.upage__h2{
  font-family:var(--serif);font-size:clamp(1.2rem,2.6vw,1.5rem);font-weight:700;
  color:var(--ink);letter-spacing:-.015em;margin:0 0 1rem;
}
.upage__faqs{margin-top:clamp(2rem,4vw,3rem);}

/* Every module is separated by a full-measure hairline, not a card. */
.upage__module{padding:clamp(2.25rem,5vw,3.5rem) 0;}
.upage__module + .upage__module{padding-top:0;}
.upage__module > .wrap > *{border-top:1px solid var(--rule);padding-top:clamp(1.75rem,4vw,2.5rem);}
/* A module directly under the masthead needs no rule — the masthead already
   ends in one, and two hairlines a few pixels apart read as a mistake. */
.upage__head + .upage__module > .wrap > *{border-top:0;padding-top:0;}

/* ---------- About: figures ---------- */
.upage__figures{padding:clamp(1.75rem,4vw,2.5rem) 0 0;}
.ufig{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:1.25rem;margin:0;}
.ufig__item{border-top:1.5px solid var(--rule-strong);padding-top:.9rem;}
.ufig__n{
  font-family:var(--serif);font-size:clamp(1.5rem,3.5vw,2.1rem);font-weight:600;
  color:var(--ink);line-height:1.05;letter-spacing:-.02em;margin:0;
}
.ufig__l{font-size:.8rem;color:var(--muted);margin:.35rem 0 0;line-height:1.4;}

/* ---------- Contact ---------- */
.ucontact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(1.75rem,4vw,3rem);}
@media(max-width:820px){.ucontact{grid-template-columns:1fr;}}
.uways{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem;}
/* The row is the li's single child — an <a> when it is clickable, a
   .uways__row when it is not. Named rather than `li > *`, which boxed every
   child and so split the un-linked address into two panels side by side. */
.uways li > a,
.uways__row{
  display:flex;align-items:center;gap:.85rem;padding:.75rem .9rem;
  border:1px solid var(--rule);border-radius:var(--radius);background:var(--paper);
  transition:border-color .14s,background .14s;
}
.uways li > a:hover{border-color:var(--accent);background:var(--accent-tint);}
.uways__ic{
  flex:none;width:2.1rem;height:2.1rem;display:grid;place-items:center;border-radius:50%;
  background:var(--accent-tint);color:var(--accent);font-size:.9rem;
}
.uways b{display:block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);}
.uways small{display:block;font-size:.94rem;color:var(--ink);word-break:break-word;}
/* "Get directions", under the address when a map link is configured. */
.uways__go{font-size:.8rem!important;color:var(--accent)!important;font-weight:600;margin-top:.15rem;}
.uways__go i{font-size:.75em;}

.uform{display:flex;flex-direction:column;gap:1rem;}
.uform__row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
@media(max-width:600px){.uform__row{grid-template-columns:1fr;}}
.uform label{display:block;}
.uform label > span{
  display:block;font-size:.78rem;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:.35rem;
}
.uform label > span b{color:var(--accent);}
.uform input,.uform textarea{
  width:100%;padding:.7rem .85rem;font:inherit;font-size:.95rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);
  transition:border-color .14s,box-shadow .14s;
}
.uform input:focus,.uform textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.12);
}
.uform textarea{resize:vertical;min-height:8rem;line-height:1.6;}
.uform button{align-self:flex-start;}
/* Off-screen rather than display:none — some bots skip hidden fields. */
.uform__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.uflash{
  display:flex;gap:.7rem;align-items:flex-start;padding:.85rem 1rem;margin-bottom:1.25rem;
  border-radius:var(--radius);font-size:.92rem;line-height:1.55;
}
.uflash ul{margin:0;padding-left:1.1rem;}
.uflash--ok{background:var(--ok-bg);border:1px solid var(--ok-line);color:var(--ok-dark);}
.uflash--ok i{color:var(--ok);}
.uflash--bad{background:var(--bad-bg);border:1px solid var(--bad-line);color:var(--bad-dark);}
.uflash--bad i{color:var(--bad);}

/* ---------- Author ---------- */
/* auto-fill, not auto-fit: this grid runs the full page width, and auto-fit
   would collapse the empty tracks and stretch two authors to half a screen
   each. Empty tracks keep every card the same readable size. */
.uauthors{display:grid;grid-template-columns:repeat(auto-fill,minmax(20rem,1fr));gap:1.25rem;}
.ucard{
  display:flex;gap:1.1rem;padding:1.4rem;background:var(--paper);
  border:1px solid var(--rule);border-radius:var(--radius);
  transition:border-color .14s,box-shadow .14s;
}
.ucard:hover{border-color:var(--accent-line);box-shadow:var(--shadow-lg);}
.ucard__ava{flex:none;}
.ucard__ava img{
  width:72px;height:72px;border-radius:50%;object-fit:cover;
  border:1px solid var(--rule);background:var(--paper-3);
}
.ucard__body{min-width:0;flex:1;}
.ucard__name{font-family:var(--serif);font-size:1.12rem;font-weight:700;margin:0;line-height:1.25;}
.ucard__name a{color:var(--ink);}
.ucard__name a:hover{color:var(--accent);}
.ucard__role{
  font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;
  color:var(--accent);margin:.3rem 0 0;
}
.ucard__bio{font-size:.88rem;line-height:1.6;color:var(--ink-3);margin:.6rem 0 0;}
.ucard__stat{font-size:.8rem;color:var(--muted);margin:.7rem 0 0;line-height:1.5;}
.ucard__last{display:block;margin-top:.15rem;}
.ucard__last a{color:var(--ink-3);text-decoration:underline;text-underline-offset:2px;}
.ucard__last a:hover{color:var(--accent);}
.ucard__foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.6rem;margin-top:.9rem;padding-top:.75rem;border-top:1px solid var(--rule-2);
}
.ucard__go{font-size:.82rem;font-weight:600;color:var(--accent);}
.ucard__go i{transition:transform .14s;}
.ucard:hover .ucard__go i{transform:translateX(3px);}
.ucard__social{display:inline-flex;gap:.4rem;}
.ucard__social a{
  width:1.75rem;height:1.75rem;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--rule);color:var(--muted);font-size:.75rem;transition:all .14s;
}
.ucard__social a:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-tint);}

/* ---------- Closing call to action ---------- */
.ucta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem;}
.ucta h2{margin-bottom:.4rem;}
.ucta p{color:var(--muted);margin:0;max-width:48ch;line-height:1.65;}
.ucta__acts{display:flex;flex-wrap:wrap;gap:.6rem;}
.ucta--quiet p{font-size:.94rem;}

/* ============================================================
   Member accounts — sign in, register, verify, reset.
   A single narrow card, deliberately plainer than the content
   pages: nothing here competes with the form.
   ============================================================ */
.acct{padding:clamp(2.5rem,6vw,4.5rem) 0;background:var(--paper-2);}
.acct .wrap{max-width:34rem;}
.acct__box{
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);padding:clamp(1.5rem,4vw,2.25rem);
}
.acct__eyebrow{
  display:block;font-size:.68rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent);margin-bottom:.6rem;
}
.acct__title{
  font-family:var(--serif);font-size:clamp(1.5rem,4vw,2rem);font-weight:700;
  line-height:1.15;letter-spacing:-.02em;color:var(--ink);margin:0 0 .5rem;
}
.acct__intro{font-size:.95rem;line-height:1.6;color:var(--ink-3);margin:0 0 1.5rem;}

.acct__msg{
  display:flex;gap:.65rem;align-items:flex-start;padding:.8rem .95rem;
  border-radius:var(--radius);font-size:.9rem;line-height:1.55;margin-bottom:1.25rem;
}
.acct__msg ul{margin:0;padding-left:1.1rem;}
.acct__msg.is-ok{background:var(--ok-bg);border:1px solid var(--ok-line);color:var(--ok-dark);}
.acct__msg.is-ok i{color:var(--ok);}
.acct__msg.is-bad{background:var(--bad-bg);border:1px solid var(--bad-line);color:var(--bad-dark);}
.acct__msg.is-bad i{color:var(--bad);}

.acct__form{display:flex;flex-direction:column;gap:1rem;}
.acct__f{display:block;}
.acct__f > span{
  display:block;font-size:.76rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:.35rem;
}
.acct__f > span b{color:var(--accent);}
.acct__f input{
  width:100%;padding:.7rem .85rem;font:inherit;font-size:.95rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);
  transition:border-color .14s,box-shadow .14s;
}
.acct__f input:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.12);
}
.acct__f input[readonly]{background:var(--paper-2);color:var(--ink-3);}
.acct__f small{display:block;font-size:.78rem;color:var(--muted);margin-top:.3rem;line-height:1.45;}
/* Wide, spaced digits — a 6-digit code is read back, not skimmed. */
.acct__otp{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:1.35rem!important;letter-spacing:.4em;text-align:center;
}
.acct__pw{position:relative;display:block;}
.acct__pw input{padding-right:2.9rem;}
.acct__eye{
  position:absolute;top:50%;right:.35rem;transform:translateY(-50%);
  width:2.2rem;height:2.2rem;display:grid;place-items:center;
  border:0;background:transparent;color:var(--muted);cursor:pointer;border-radius:var(--radius);
}
.acct__eye:hover{color:var(--ink);background:var(--paper-3);}
/* Off-screen rather than display:none — some bots skip hidden fields. */
.acct__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.acct__aside{margin:1rem 0 0;text-align:center;font-size:.9rem;}
.acct__link{
  border:0;background:transparent;padding:0;font:inherit;cursor:pointer;
  color:var(--accent);font-weight:600;
}
.acct__link:hover{text-decoration:underline;}
.acct__foot{margin:1.25rem 0 0;text-align:center;font-size:.92rem;color:var(--ink-3);}

/* Signed-in landing page */
/* ---------- Header ---------- */
.acctpg__hero{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;}
.acctpg__avatar{
  flex:none;width:4.5rem;height:4.5rem;display:grid;place-items:center;
  border-radius:50%;background:var(--accent);color:var(--on-accent);
  font-size:1.9rem;font-weight:700;line-height:1;user-select:none;
}
.acctpg__id{flex:1 1 18rem;min-width:0;}
.acctpg__id .lawx__title{margin-bottom:.25rem;}
.acctpg__signout{margin-left:auto;flex:none;}

/* ---------- Tab system (no JavaScript) ----------
   Radios lead the container so `:checked ~` can light a label and reveal its
   panel. Arrow keys move between them for free, which a scripted tab strip
   would have to reimplement.
   NOTE: `.acct` is the sign-in wrapper — this deliberately does not reuse it. */
.atabs{display:block;}
.atabs__radio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}

.atabs__nav{
  display:flex;gap:.35rem;overflow-x:auto;overflow-y:hidden;
  border-bottom:1px solid var(--rule);margin-bottom:1.75rem;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch;
}
.atabs__tab{
  display:inline-flex;align-items:center;gap:.5rem;flex:none;cursor:pointer;
  padding:.75rem 1.1rem;margin-bottom:-1px;border-bottom:2px solid transparent;
  font-size:.9rem;font-weight:600;color:var(--muted);white-space:nowrap;
  transition:color .14s,border-color .14s,background .14s;
  border-radius:var(--radius) var(--radius) 0 0;
}
.atabs__tab:hover{color:var(--ink);background:var(--paper-2);}
.atabs__tab i{font-size:.9em;}
/* The count reads as a quiet badge, not another word in the label. */
.atabs__tab b{
  font-size:.72rem;font-weight:700;line-height:1;padding:.2rem .45rem;
  border-radius:100px;background:var(--paper-3);color:var(--muted);
}

.atabs__panel{display:none;}
.atabs__h{
  font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin:0 0 1.1rem;
}

/* One pair per tab: light the label, show the panel. */
#at-account:checked  ~ .atabs__nav .atabs__tab[for="at-account"],
#at-reviews:checked  ~ .atabs__nav .atabs__tab[for="at-reviews"],
#at-comments:checked ~ .atabs__nav .atabs__tab[for="at-comments"],
#at-saved:checked    ~ .atabs__nav .atabs__tab[for="at-saved"]{
  color:var(--accent);border-bottom-color:var(--accent);background:transparent;
}
#at-account:checked  ~ .atabs__nav .atabs__tab[for="at-account"] b,
#at-reviews:checked  ~ .atabs__nav .atabs__tab[for="at-reviews"] b,
#at-comments:checked ~ .atabs__nav .atabs__tab[for="at-comments"] b,
#at-saved:checked    ~ .atabs__nav .atabs__tab[for="at-saved"] b{
  background:var(--accent);color:var(--on-accent);
}
#at-account:checked  ~ .atabs__panels #ap-account,
#at-reviews:checked  ~ .atabs__panels #ap-reviews,
#at-comments:checked ~ .atabs__panels #ap-comments,
#at-saved:checked    ~ .atabs__panels #ap-saved{display:block;}

/* Keyboard users need to see which tab they are on before selecting it. */
#at-account:focus-visible  ~ .atabs__nav .atabs__tab[for="at-account"],
#at-reviews:focus-visible  ~ .atabs__nav .atabs__tab[for="at-reviews"],
#at-comments:focus-visible ~ .atabs__nav .atabs__tab[for="at-comments"],
#at-saved:focus-visible    ~ .atabs__nav .atabs__tab[for="at-saved"]{
  outline:2px solid var(--accent);outline-offset:-2px;
}

/* ---------- Account details ---------- */
.atabs__dl{
  margin:0 0 1.5rem;max-width:34rem;
  border-top:1px solid var(--rule-2);
}
.atabs__dl > div{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.35rem 1.5rem;
  padding:.75rem 0;border-bottom:1px solid var(--rule-2);
}
.atabs__dl dt{font-size:.88rem;color:var(--muted);margin:0;font-weight:500;}
/* A long address has nowhere to go on a phone, so let it break rather than
   run under the edge of the screen. */
.atabs__dl dd{
  font-size:.95rem;color:var(--ink);margin:0;text-align:right;font-weight:500;
  min-width:0;overflow-wrap:anywhere;
}

/* ---------- Empty states ---------- */
.atabs__none{
  text-align:center;padding:3rem 1.5rem;
  background:var(--paper-2);border:1px dashed var(--rule);border-radius:var(--radius);
}
.atabs__none i{font-size:1.75rem;color:var(--faint);}
.atabs__none p{font-size:.95rem;color:var(--ink-3);margin:.9rem auto 1.25rem;max-width:34ch;line-height:1.6;}

@media (max-width:575.98px){
  .acctpg__avatar{width:3.5rem;height:3.5rem;font-size:1.5rem;}
  .acctpg__signout{margin-left:0;}
  /* Labels stay — the nav scrolls sideways rather than turning into
     four unlabelled icons. */
  .atabs__tab{padding:.7rem .75rem;font-size:.85rem;gap:.4rem;}
  .atabs__nav{gap:.15rem;}
  .atabs__none{padding:2.25rem 1rem;}
}

/* What the member has written, inside the Reviews and Comments tabs. */
.acctlist{list-style:none;margin:0;padding:0;}
.acctlist > li{
  padding:1.15rem 1.25rem;margin-bottom:.75rem;
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);
}
.acctlist > li:last-child{margin-bottom:0;}
.acctlist__top{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-bottom:.45rem;}
.acctlist__top a{font-weight:600;font-size:1rem;color:var(--ink);text-decoration:none;}
.acctlist__top a:hover{color:var(--accent);text-decoration:underline;}
.acctlist__top time{font-size:.78rem;color:var(--faint);margin-left:auto;}
.acctlist__body{font-size:.94rem;line-height:1.6;color:var(--ink-3);margin:0;}
.acctlist__flag{
  display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--bad-dark);background:var(--bad-bg);
  border:1px solid var(--bad-line);border-radius:100px;padding:.15rem .5rem;margin-bottom:.5rem;
}
.acctlist__acts{
  display:flex;align-items:center;gap:1rem;margin-top:.8rem;
  padding-top:.7rem;border-top:1px solid var(--rule-2);
}
.acctlist__edit{font-size:.82rem;font-weight:600;color:var(--accent);text-decoration:none;}
.acctlist__edit:hover{text-decoration:underline;}
.acctlist__acts form{display:inline;}

/* ============================================================
   Reviews and comments — one component, two places.
   ============================================================ */
.cmts{margin:2.5rem 0 0;padding-top:1.75rem;border-top:1px solid var(--rule);scroll-margin-top:6rem;}
.cmts__head{display:flex;align-items:baseline;gap:.75rem;margin:0 0 1.1rem;}
.cmts__h{font-family:var(--font-head,inherit);font-size:1.35rem;font-weight:700;color:var(--ink);margin:0;}
.cmts__n{font-size:.8rem;color:var(--muted);}
.cmts__empty{font-size:.92rem;color:var(--ink-3);margin:1.25rem 0 0;}

/* Guests: why they cannot post, and the two ways to fix that. */
.cmts__gate{
  background:var(--wash,#f7f7f5);border:1px solid var(--rule);border-radius:var(--radius);
  padding:1.1rem 1.25rem;
}
.cmts__gate p{font-size:.9rem;line-height:1.6;color:var(--ink-3);margin:0 0 .75rem;}
.cmts__gate p:last-child{margin-bottom:0;}
.cmts__gateacts{display:flex;flex-wrap:wrap;gap:.5rem;}

/* Rating summary — the score on the left, the star spread on the right.
   Drawn only from real member reviews; with none there is no honest spread. */
.rsum{
  display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem 2.5rem;
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);
  padding:1.4rem 1.6rem;margin:0 0 1.5rem;
}
.rsum__score{flex:0 0 12rem;text-align:center;}
.rsum__k{
  display:block;font-size:.72rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
}
.rsum__v{
  display:flex;align-items:baseline;justify-content:center;gap:.35rem;
  font-size:2.4rem;font-weight:700;line-height:1.1;color:var(--ink);margin:.5rem 0;
}
.rsum__v i{font-size:.5em;color:#f0a500;}
.rsum__v small{font-size:.42em;font-weight:500;color:var(--muted);}
.rsum__n{display:block;font-size:.82rem;color:var(--muted);}

.rsum__bars{flex:1 1 18rem;min-width:0;display:grid;gap:.45rem;}
.rsum__row{display:flex;align-items:center;gap:.6rem;}
.rsum__lab{
  flex:none;display:inline-flex;align-items:center;gap:.25rem;
  font-size:.85rem;font-weight:600;color:var(--ink-2);
}
.rsum__lab i{font-size:.75em;color:#f0a500;}
.rsum__track{
  flex:1;height:.7rem;border-radius:100px;background:var(--rule);overflow:hidden;min-width:0;
}
.rsum__fill{display:block;height:100%;border-radius:100px;background:#f0a500;}
.rsum__pct{flex:none;width:3.5rem;text-align:right;font-size:.8rem;color:var(--muted);}

@media (max-width:575.98px){
  .rsum{padding:1.15rem;gap:1rem;}
  .rsum__score{flex:1 1 100%;}
  .rsum__pct{width:3rem;}
}

.cmtform{
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);padding:1.25rem;
}
.cmtform__h{
  font-size:1rem;font-weight:600;color:var(--ink);margin:0 0 1rem;
  padding-bottom:.7rem;border-bottom:1px solid var(--rule-2);
}
/* Off-screen rather than display:none — hidden fields are ignored by some bots. */
.cmtform__hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}
.cmtform__k{
  display:block;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .4rem;
}
.cmtform__k b{color:var(--bad,#c0392b);font-weight:700;}
.cmtform__rate{margin:0 0 1rem;}
.cmtform__f{display:block;margin:0 0 1rem;}
.cmtform__f textarea{
  width:100%;border:1px solid var(--rule);border-radius:calc(var(--radius) / 1.6);
  padding:.7rem .85rem;font:inherit;font-size:.92rem;line-height:1.55;color:var(--ink);
  background:var(--paper);resize:vertical;
}
.cmtform__f textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash,rgba(0,0,0,.06));}
.cmtform__f small{display:block;font-size:.75rem;color:var(--faint);margin-top:.35rem;}

/* Star picker. Radios in reverse DOM order so ~ can light the ones "before". */
.starpick{display:inline-flex;flex-direction:row-reverse;gap:.15rem;}
.starpick input{position:absolute;opacity:0;width:0;height:0;}
.starpick label{
  cursor:pointer;font-size:1.5rem;line-height:1;color:var(--rule);
  transition:color .12s ease;margin:0;
}
.starpick label:hover,
.starpick label:hover ~ label,
.starpick input:checked ~ label{color:#f0a500;}
.starpick input:focus-visible + label{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px;}

.cmtlist{list-style:none;margin:1.5rem 0 0;padding:0;}
.cmt{padding:1.1rem 0;border-bottom:1px solid var(--rule-2);}
.cmt:last-child{border-bottom:0;padding-bottom:0;}
.cmt__top{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:0 0 .45rem;}
.cmt__who{font-weight:600;font-size:.92rem;color:var(--ink);}
.cmt__stars{color:#f0a500;font-size:.8rem;letter-spacing:.05em;}
.cmt__when{font-size:.75rem;color:var(--faint);margin-left:auto;}
.cmt__edited{font-size:.7rem;color:var(--faint);font-style:italic;}
.cmt__body{font-size:.94rem;line-height:1.65;color:var(--ink-2,var(--ink-3));margin:0;}
.cmt__own{margin:.4rem 0 0;}
.cmt__del{
  border:0;background:transparent;padding:0;font:inherit;font-size:.78rem;
  color:var(--faint);cursor:pointer;
}
.cmt__del:hover{color:var(--bad,#c0392b);text-decoration:underline;}

/* Saved/unsaved reads at a glance without a second trip to the account page. */
.btn.is-saved{border-color:var(--accent);color:var(--accent);}

@media (max-width:640px){
  .cmtform{padding:1rem;}
  .cmt__when{margin-left:0;width:100%;}
}

/* ============================================================
   Advocate profile — gated contact details.
   ============================================================ */
/* "Click here to see" — a value that has to be asked for. */
.revealbtn{
  display:inline-flex;align-items:center;gap:.4rem;padding:.25rem .6rem;
  font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;
  color:var(--accent);background:var(--accent-tint);
  border:1px dashed var(--accent-line);border-radius:100px;transition:all .14s;
}
.revealbtn:hover{background:var(--accent);color:var(--on-accent);border-style:solid;}
.revealbtn i{font-size:.72em;}

.revealwrap{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:1rem;}
.revealwrap__bd{position:absolute;inset:0;background:rgba(18,16,14,.55);}
.revealbox{
  position:relative;width:min(26rem,100%);max-height:90vh;overflow:auto;
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);padding:1.6rem 1.5rem 1.5rem;
}
.revealbox__x{
  position:absolute;top:.6rem;right:.6rem;width:2rem;height:2rem;display:grid;place-items:center;
  border:0;background:transparent;color:var(--muted);cursor:pointer;border-radius:50%;font-size:1rem;
}
.revealbox__x:hover{background:var(--paper-3);color:var(--ink);}
.revealbox__t{
  font-family:var(--serif);font-size:1.3rem;font-weight:700;color:var(--ink);
  margin:0 0 .4rem;letter-spacing:-.015em;
}
.revealbox__p{font-size:.9rem;color:var(--ink-3);line-height:1.55;margin:0 0 1.15rem;}
.revealbox__f{display:block;margin-bottom:.85rem;}
.revealbox__f > span{
  display:block;font-size:.75rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:.3rem;
}
.revealbox__f > span b{color:var(--accent);}
.revealbox__f input{
  width:100%;padding:.65rem .8rem;font:inherit;font-size:.95rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);
  transition:border-color .14s,box-shadow .14s;
}
.revealbox__f input:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.12);
}
.revealbox__f small{display:block;font-size:.76rem;color:var(--muted);margin-top:.3rem;line-height:1.45;}
/* Off-screen, not display:none — some bots skip hidden fields. */
.revealbox__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.revealbox__msg{
  padding:.75rem .9rem;border-radius:var(--radius);font-size:.9rem;line-height:1.55;margin-bottom:1rem;
}
.revealbox__msg.is-ok{background:var(--ok-bg);border:1px solid var(--ok-line);color:var(--ok-dark);}
.revealbox__msg.is-bad{background:var(--bad-bg);border:1px solid var(--bad-line);color:var(--bad-dark);}

/* ============================================================
   IPC ↔ BNS — the index and one comparison.
   Same masthead / hairline-block language as the city and author
   pages, with the section numbers treated as the headline data.
   ============================================================ */
.lawx__head{
  background:var(--paper-2);border-bottom:1px solid var(--rule);
  padding:clamp(1.25rem,3vw,2rem) 0 clamp(2rem,4vw,2.75rem);
}
.lawx__crumbs{font-size:.84rem;color:var(--muted);margin-bottom:clamp(1.25rem,3vw,2rem);}
.lawx__crumbs a{color:var(--ink-3);}
.lawx__crumbs a:hover{color:var(--accent);}
.lawx__crumbs span{margin:0 .5rem;color:var(--faint);}
.lawx__crumbs span[aria-current]{margin:0;color:var(--muted);}
.lawx__eyebrow{
  display:inline-flex;align-items:center;gap:.4rem;font-size:.68rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--accent);
  padding-bottom:.45rem;border-bottom:2px solid var(--accent);margin-bottom:.9rem;
}
.lawx__title{
  font-family:var(--serif);font-size:clamp(1.9rem,5vw,3rem);font-weight:700;
  line-height:1.08;letter-spacing:-.025em;color:var(--ink);margin:0;
}
.lawx__lead{
  font-size:clamp(1rem,1.8vw,1.12rem);line-height:1.6;color:var(--ink-3);
  margin:.9rem 0 0;max-width:60ch;font-weight:300;
}
.lawx__search{display:flex;gap:.5rem;margin-top:1.5rem;max-width:38rem;}
.lawx__search input{
  flex:1;min-width:0;padding:.72rem .95rem;font:inherit;font-size:.95rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);
  transition:border-color .14s,box-shadow .14s;
}
.lawx__search input:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.12);
}
.lawx__search button{
  flex:none;display:inline-flex;align-items:center;gap:.45rem;padding:.72rem 1.15rem;
  font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;
  background:var(--ink);color:var(--on-accent);border:1px solid var(--ink);
  border-radius:var(--radius);transition:background .14s,border-color .14s;
}
.lawx__search button:hover{background:var(--accent);border-color:var(--accent);}

/* Figures that double as the status filter */
.lawx__figures{padding:clamp(1.75rem,4vw,2.5rem) 0 0;}
.lawfig{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:1rem;}
.lawfig__item{
  display:block;border-top:1.5px solid var(--rule);padding:.9rem .9rem .9rem 0;
  transition:border-color .14s,color .14s;
}
.lawfig__item b{
  display:block;font-family:var(--serif);font-size:clamp(1.5rem,3.5vw,2.1rem);
  font-weight:600;color:var(--ink);line-height:1.05;letter-spacing:-.02em;
}
.lawfig__item span{display:block;font-size:.82rem;color:var(--ink-3);margin-top:.3rem;font-weight:600;}
.lawfig__item small{display:block;font-size:.74rem;color:var(--muted);margin-top:.15rem;line-height:1.4;}
.lawfig__item:hover{border-top-color:var(--ink);}
.lawfig__item.is-on{border-top-color:var(--accent);border-top-width:2.5px;}
.lawfig__item.is-on b{color:var(--accent);}
.lawfig__item--retained.is-on b{color:var(--ok);}
.lawfig__item--modified.is-on b{color:var(--warn);}
.lawfig__item--omitted.is-on b{color:var(--bad);}

.lawx__list{padding:clamp(2rem,4vw,3rem) 0;}
.lawx__list--tint{background:var(--paper-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);}
.lawx__listhead{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:.75rem;padding-bottom:1rem;margin-bottom:clamp(1rem,2.5vw,1.5rem);
  border-bottom:1.5px solid var(--rule-strong);
}
.lawx__h2{
  font-family:var(--serif);font-size:clamp(1.2rem,2.8vw,1.55rem);font-weight:700;
  color:var(--ink);letter-spacing:-.015em;margin:0;
}
.lawx__reset{font-size:.84rem;font-weight:600;color:var(--accent);white-space:nowrap;}
.lawx__reset i{transition:transform .14s;}
.lawx__reset:hover i{transform:translateX(3px);}
.lawx__empty{
  padding:1.5rem 1.6rem;background:var(--paper-2);
  border-left:3px solid var(--rule-strong);border-radius:0 var(--radius) var(--radius) 0;
  color:var(--ink-3);line-height:1.7;
}
.lawx__empty p{margin:0;}
.lawx__empty p + p{margin-top:.4rem;font-size:.94rem;color:var(--muted);}
/* Swapping in place: dim the region rather than blanking it, so the page does
   not jump while the new results arrive. */
#lawxLive{transition:opacity .12s;}
#lawxLive.is-loading{opacity:.5;pointer-events:none;}

.lawx__cta{padding:0 0 clamp(2.5rem,5vw,3.5rem);}
.lawx__cta .ucta{border-top:1px solid var(--rule);padding-top:clamp(1.75rem,4vw,2.5rem);}

/* ---------- One section per row ----------
   A real <a>, not a table row with an onclick: the old markup was
   unreachable by keyboard and invisible to crawlers. */
.lawrows{display:flex;flex-direction:column;gap:.5rem;}
.lawrow{
  display:grid;grid-template-columns:5.5rem 5.5rem minmax(0,1fr) 7rem;
  gap:1rem;align-items:center;padding:.85rem 1rem;
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);
  transition:border-color .14s,transform .14s,box-shadow .14s;
}
.lawrow:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:var(--shadow-lg);}
.lawrow--head{
  background:transparent;border:0;padding:0 1rem .5rem;
  font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);
}
.lawrow--head:hover{transform:none;box-shadow:none;}
.lawrow__sec small{
  display:block;font-size:.62rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);
}
.lawrow__sec b{
  display:block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:1.05rem;font-weight:700;color:var(--ink);line-height:1.2;
}
.lawrow__sec--new b{color:var(--ok);}
.lawrow__t{min-width:0;}
.lawrow__t b{
  display:block;font-family:var(--serif);font-size:1rem;font-weight:600;
  color:var(--ink);line-height:1.35;
}
.lawrow:hover .lawrow__t b{color:var(--accent);}
.lawrow__t small{display:block;font-size:.78rem;color:var(--muted);margin-top:.15rem;}
.lawrow__st{text-align:right;}
@media(max-width:760px){
  .lawrow{grid-template-columns:4.5rem 4.5rem 1fr;row-gap:.6rem;}
  .lawrow--head{display:none;}
  .lawrow__t{grid-column:1 / -1;}
  .lawrow__st{grid-column:1 / -1;text-align:left;}
}

/* ---------- One comparison ---------- */
.lawone__map{
  display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem;margin:0;
  font-family:var(--serif);
}
.lawone__side small{
  display:block;font-family:var(--sans);font-size:.66rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.lawone__side b{
  display:block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:clamp(1.9rem,5vw,2.9rem);font-weight:700;line-height:1.05;
  letter-spacing:-.02em;color:var(--ink);
}
.lawone__side--new b{color:var(--ok);}
.lawone__arrow{color:var(--faint);font-size:1.15rem;align-self:flex-end;margin-bottom:.6rem;}
.lawone__tag{align-self:flex-end;margin-bottom:.7rem;}

.lawcmp{display:grid;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));gap:1.25rem;}
.lawcmp__col{
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);
  padding:1.35rem 1.5rem;
}
/* A coloured top edge, so old and new are told apart at a glance. */
.lawcmp__col--old{border-top:3px solid var(--rule-strong);}
.lawcmp__col--new{border-top:3px solid var(--ok);}
.lawcmp__head{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:.5rem;padding-bottom:.7rem;margin-bottom:.85rem;border-bottom:1px solid var(--rule-2);
}
.lawcmp__k{
  font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.lawcmp__n{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.9rem;font-weight:700;color:var(--ink);
}
.lawcmp__col--new .lawcmp__n{color:var(--ok);}
.lawcmp__t{font-family:var(--serif);font-size:1.2rem;font-weight:700;color:var(--ink);margin:0 0 .75rem;line-height:1.3;}
.lawcmp__body{font-size:.98rem;line-height:1.75;}

.lawnote{
  margin-top:clamp(1.75rem,4vw,2.5rem);padding:1.15rem 1.4rem;
  background:var(--paper-2);border-left:3px solid var(--accent);
  border-radius:0 var(--radius) var(--radius) 0;max-width:72ch;
}
.lawnote--retained{border-left-color:var(--ok);}
.lawnote--modified{border-left-color:var(--warn);}
.lawnote--omitted{border-left-color:var(--bad);}
.lawnote__k{
  display:block;font-size:.68rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.4rem;
}
.lawnote p{margin:0;font-family:var(--serif);font-size:1.04rem;line-height:1.65;color:var(--ink-2);}

.lawstep{display:grid;grid-template-columns:1fr 1fr;gap:.85rem;margin-top:clamp(1.75rem,4vw,2.5rem);}
@media(max-width:640px){.lawstep{grid-template-columns:1fr;}}
.lawstep__a{
  display:block;padding:.9rem 1.1rem;background:var(--paper);
  border:1px solid var(--rule);border-radius:var(--radius);transition:all .14s;
}
.lawstep__a:hover{border-color:var(--accent);background:var(--accent-tint);}
.lawstep__a--next{text-align:right;}
.lawstep__a small{
  display:block;font-size:.68rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.25rem;
}
.lawstep__a b{
  display:block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:1rem;color:var(--ink);
}
.lawstep__a:hover b{color:var(--accent);}
.lawstep__a span{display:block;font-size:.82rem;color:var(--ink-3);margin-top:.1rem;line-height:1.4;}

/* Section pair as a rail thumbnail — same footprint as the avatar/thumb the
   other rail lists use, so the blocks line up. */
.lawmini{
  flex:none;width:42px;display:flex;flex-direction:column;align-items:center;
  gap:.05rem;padding:.3rem .2rem;border:1px solid var(--rule);border-radius:4px;
  background:var(--paper-2);line-height:1.1;
}
.lawmini b{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.72rem;font-weight:700;color:var(--ink);
}
.lawmini b.is-new{color:var(--ok);}
.lawmini i{font-size:.5rem;color:var(--faint);transform:rotate(90deg);margin:.05rem 0;}
/* The comparison rail lists sit at the top of their row, not centred: the
   two-line meta would otherwise push the pair marker off-axis. */
.srail__box .srail__list a{align-items:flex-start;}

/* ============================================================
   City page (/{location}).
   Advocates first, practice areas as sized-up cards.
   ============================================================ */
.city__head{
  background:var(--paper-2);border-bottom:1px solid var(--rule);
  padding:clamp(1.25rem,3vw,2rem) 0 clamp(2rem,4vw,3rem);
}
.city__crumbs{font-size:.84rem;color:var(--muted);margin-bottom:clamp(1.25rem,3vw,2rem);}
.city__crumbs a{color:var(--ink-3);}
.city__crumbs a:hover{color:var(--accent);}
.city__crumbs span{margin:0 .5rem;color:var(--faint);}
.city__crumbs span[aria-current]{margin:0;color:var(--muted);}

.city__intro{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);align-items:center;}
/* No featured image → the text takes the whole measure rather than sitting in
   a half-width column with nothing beside it. */
.city__intro:not(:has(.city__art)){grid-template-columns:1fr;}
@media(max-width:860px){.city__intro{grid-template-columns:1fr;}}

.city__eyebrow{
  display:inline-flex;align-items:center;gap:.4rem;font-size:.68rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--accent);
  padding-bottom:.45rem;border-bottom:2px solid var(--accent);margin-bottom:.9rem;
}
.city__title{
  font-family:var(--serif);font-size:clamp(1.9rem,5vw,3rem);font-weight:700;
  line-height:1.08;letter-spacing:-.025em;color:var(--ink);margin:0;
}
.city__sub{
  font-size:clamp(1rem,1.8vw,1.12rem);line-height:1.6;color:var(--ink-3);
  margin:.9rem 0 0;max-width:52ch;font-weight:300;
}
.city__art img{
  width:100%;height:100%;max-height:280px;object-fit:fill;
  border:1px solid var(--rule);border-radius:var(--radius);display:block;
}

.city__search{display:flex;gap:.5rem;margin-top:1.5rem;max-width:34rem;}
.city__search input{
  flex:1;min-width:0;padding:.72rem .95rem;font:inherit;font-size:.95rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);
  transition:border-color .14s,box-shadow .14s;
}
.city__search input:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.12);
}
.city__search button{
  flex:none;display:inline-flex;align-items:center;gap:.45rem;padding:.72rem 1.15rem;
  font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;
  background:var(--ink);color:var(--on-accent);border:1px solid var(--ink);
  border-radius:var(--radius);transition:background .14s,border-color .14s;
}
.city__search button:hover{background:var(--accent);border-color:var(--accent);}

/* ---------- Editorial copy + FAQs ---------- */
.cread{display:grid;gap:clamp(1.75rem,4vw,3.5rem);}
/* Two columns only when there is something to put in both. */
.cread--split{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start;}
@media(max-width:900px){.cread--split{grid-template-columns:1fr;}}
/* Alone, it centres at a reading measure rather than hugging the left edge
   with the whole right half empty. */
.cread > :only-child{max-width:72ch;margin-inline:auto;}
.cread__copy .prose{font-size:1.01rem;line-height:1.8;}
.cread__faqs .city__h2{margin-bottom:1rem;}
/* The prose column is usually the taller of the two — pinning the FAQs keeps
   them in view while it is read. */
@media(min-width:901px){
  .cread--split .cread__faqs{position:sticky;top:1.5rem;}
}

.city__block{padding:clamp(2rem,4vw,3rem) 0;}
.city__block--tint{background:var(--paper-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);}
.city__block--cities{
  padding-bottom:clamp(2.5rem,5vw,3.5rem);
  border-top:1px solid var(--rule);
}
.city__blockhead{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:.75rem;padding-bottom:1rem;margin-bottom:clamp(1.25rem,3vw,1.75rem);
  border-bottom:1.5px solid var(--rule-strong);
}
.city__h2{
  font-family:var(--serif);font-size:clamp(1.2rem,2.8vw,1.55rem);font-weight:700;
  color:var(--ink);letter-spacing:-.015em;margin:0;
}
.city__count{font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);}
.city__all{font-size:.84rem;font-weight:600;color:var(--accent);white-space:nowrap;}
.city__all i{transition:transform .14s;}
.city__all:hover i{transform:translateX(3px);}
.city__empty{
  padding:1.5rem 1.6rem;background:var(--paper-2);
  border-left:3px solid var(--rule-strong);border-radius:0 var(--radius) var(--radius) 0;
  color:var(--ink-3);line-height:1.7;
}
.city__empty p{margin:0;}
.city__empty p + p{margin-top:.4rem;font-size:.94rem;color:var(--muted);}

/* Practice-area cards. auto-fill so four areas stay card-sized on a wide
   screen instead of stretching to a quarter of the viewport each. */
.acards{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.85rem;}
.acard{
  position:relative;display:flex;flex-direction:column;gap:.3rem;
  padding:1.1rem 2.4rem 1.1rem 1.15rem;background:var(--paper);
  border:1px solid var(--rule);border-radius:var(--radius);
  transition:border-color .14s,transform .14s,box-shadow .14s;
}
.acard:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-lg);}
.acard__name{font-family:var(--serif);font-size:1.02rem;font-weight:600;color:var(--ink);line-height:1.3;}
.acard:hover .acard__name{color:var(--accent);}
.acard__n{font-size:.8rem;color:var(--muted);}
.acard__go{
  position:absolute;right:1rem;top:50%;transform:translateY(-50%);
  color:var(--faint);font-size:.8rem;transition:color .14s,transform .14s;
}
.acard:hover .acard__go{color:var(--accent);transform:translateY(-50%) translateX(3px);}
/* Beyond the first chunk until "Load more" reveals them. Scoped to .acard so
   that with JavaScript off — where the button never appears — every card is
   still visible and crawlable. */
.acards .acard.is-hidden{display:none;}
.city__morewrap{margin-top:1.25rem;text-align:center;}
.city__moreleft{
  display:inline-block;margin-left:.45rem;padding:.05rem .45rem;border-radius:100px;
  background:var(--paper-3);color:var(--muted);font-size:.75rem;font-weight:700;
}

/* ---------- Listing + filter rail ---------- */
.clist{display:grid;grid-template-columns:22rem minmax(0,1fr);gap:clamp(1.25rem,3vw,2rem);align-items:start;}
@media(max-width:900px){.clist{grid-template-columns:1fr;}}

.cfilter{position:sticky;top:1.5rem;}
@media(max-width:900px){.cfilter{position:static;}}
.cfilter form{
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);
  padding:1.1rem;display:flex;flex-direction:column;gap:.85rem;
}
.cfilter__head{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;}
.cfilter__head h3{
  font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  color:var(--muted);margin:0;
}
.cfilter__reset{font-size:.78rem;font-weight:600;color:var(--accent);}
.cfilter__f{display:block;}
.cfilter__f > span{
  display:block;font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--ink-3);margin-bottom:.3rem;
}
.cfilter__f select{
  width:100%;padding:.55rem 2rem .55rem .7rem;font:inherit;font-size:.88rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);
  cursor:pointer;appearance:none;
  /* Inline chevron so the control looks the same in every browser. */
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 1rem) 55%,calc(100% - .68rem) 55%;
  background-size:.32rem .32rem,.32rem .32rem;background-repeat:no-repeat;
  transition:border-color .14s,box-shadow .14s;
}
.cfilter__f select:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.12);
}
/* Once the change handler is wired, the submit button is redundant. */
.cfilter form.is-live .cfilter__go{display:none;}

.clist__main{min-width:0;}

/* Advocate rows beside the filter rail.
   The rail takes 16rem, so these are trimmed from the full-bleed directory's
   proportions — but not so far that the row becomes a name on an empty band.
   Two-class selectors so they win over the theme stylesheets, which restyle
   .dir__row into a roomy card regardless of source order. */
.dir--compact .dir__row{padding:1.05rem 1.15rem;gap:1rem;}
/* Narrower column beside the filter rail, still full height. */
.dir--compact .dir__avatar{width:140px;}
.dir--compact .dir__avatar.is-fallback{padding:11px;}
.dir--compact .dir__name{font-size:1.08rem;}
.dir--compact .dir__meta{font-size:.79rem;margin-top:.18rem;}
.dir--compact .dir__areas{margin-top:.5rem;gap:.3rem;}
.dir--compact .dir__area{font-size:.69rem;padding:.12rem .5rem;}
.dir--compact .dir__facts{gap:.4rem 1.4rem;margin-top:.65rem;padding-top:.6rem;}
.dir--compact .dir__aside{gap:.45rem;}
.dir--compact .dir__rating{font-size:1.05rem;}
.dir--compact .dir__verify{font-size:.65rem;}
.dir--compact .dir__actions .btn{padding:.32rem .7rem;font-size:.79rem;}
/* Below the rail's breakpoint the rows have the full width back, so the photo
   column can widen again — still stretched, so no explicit height here. */
@media(max-width:900px){
  .dir--compact .dir__avatar{width:96px;}
}
/* Restated after the compact rules above, which are later in the file and
   would otherwise win: the phone layout wants a square thumbnail, not a
   full-height column beside a one-line name. */
@media(max-width:640px){
  .dir--compact .dir__avatar{
    width:52px;height:52px;align-self:start;grid-row:span 1;object-position:center;
  }
  .dir--compact .dir__avatar.is-fallback{padding:7px;}
}

/* ---------- Other cities ---------- */
.ccities{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.85rem;}
.ccity{
  position:relative;display:flex;align-items:center;gap:.85rem;
  padding:.9rem 2.3rem .9rem .9rem;background:var(--paper);
  border:1px solid var(--rule);border-radius:var(--radius);
  transition:border-color .14s,transform .14s,box-shadow .14s;
}
.ccity:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-lg);}
.ccity__art{
  flex:none;width:2.75rem;height:2.75rem;border-radius:var(--radius);overflow:hidden;
  display:grid;place-items:center;background:var(--accent-tint);color:var(--accent);
}
.ccity__art img{width:100%;height:100%;object-fit:cover;}
.ccity__body{min-width:0;}
.ccity b{display:block;font-family:var(--serif);font-size:1rem;font-weight:600;color:var(--ink);line-height:1.3;}
.ccity:hover b{color:var(--accent);}
.ccity small{display:block;font-size:.78rem;color:var(--muted);margin-top:.1rem;}
.ccity__go{
  position:absolute;right:.95rem;top:50%;transform:translateY(-50%);
  color:var(--faint);font-size:.78rem;transition:color .14s,transform .14s;
}
.ccity:hover .ccity__go{color:var(--accent);transform:translateY(-50%) translateX(3px);}

/* ============================================================
   Author profile (/author/{slug}).
   Same register as the Author index it hangs off: masthead band,
   hairline rules, cards.
   ============================================================ */
.apro__head{
  background:var(--paper-2);border-bottom:1px solid var(--rule);
  padding:clamp(1.25rem,3vw,2rem) 0 clamp(2rem,4vw,2.75rem);
}
.apro__crumbs{font-size:.84rem;color:var(--muted);margin-bottom:clamp(1.25rem,3vw,2rem);}
.apro__crumbs a{color:var(--ink-3);}
.apro__crumbs a:hover{color:var(--accent);}
.apro__crumbs span{margin:0 .5rem;color:var(--faint);}
.apro__crumbs span[aria-current]{margin:0;color:var(--muted);}

.apro__id{display:flex;gap:clamp(1.25rem,3vw,2rem);align-items:flex-start;}
.apro__photo{
  flex:none;width:clamp(84px,11vw,128px);height:clamp(84px,11vw,128px);
  border-radius:50%;object-fit:cover;background:var(--paper-3);
  border:1px solid var(--rule);
}
.apro__meta{min-width:0;}
.apro__eyebrow{
  display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent);
  padding-bottom:.45rem;border-bottom:2px solid var(--accent);margin-bottom:.85rem;
}
.apro__name{
  font-family:var(--serif);font-size:clamp(1.85rem,5vw,2.9rem);font-weight:700;
  line-height:1.08;letter-spacing:-.025em;color:var(--ink);margin:0;
}
.apro__role{font-size:1rem;color:var(--ink-3);margin:.5rem 0 0;}

/* Facts sit on a rule so they read as data, not as more prose. */
.apro__facts{display:flex;flex-wrap:wrap;gap:2rem;margin:1.35rem 0 0;}
.apro__facts > div{border-top:1.5px solid var(--rule-strong);padding-top:.6rem;min-width:6rem;}
.apro__facts dt{
  font-family:var(--serif);font-size:1.35rem;font-weight:600;color:var(--ink);
  line-height:1.1;letter-spacing:-.02em;
}
.apro__facts dd{font-size:.76rem;color:var(--muted);margin:.2rem 0 0;}

/* Icon-only round buttons — the name of the network is in the title/aria-label,
   not on screen. Sized to a comfortable tap target. */
.apro__social{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.35rem;}
.apro__social a{
  display:inline-grid;place-items:center;width:2.4rem;height:2.4rem;
  border:1px solid var(--rule);border-radius:50%;background:var(--paper);
  font-size:.92rem;color:var(--ink-2);transition:all .14s;
}
.apro__social a:hover{
  border-color:var(--accent);color:var(--accent);
  background:var(--accent-tint);transform:translateY(-1px);
}

@media(max-width:560px){
  .apro__id{flex-direction:column;}
  .apro__facts{gap:1.25rem;}
}

.apro__h2{
  font-family:var(--serif);font-size:clamp(1.2rem,2.8vw,1.55rem);font-weight:700;
  color:var(--ink);letter-spacing:-.015em;margin:0;
}
.apro__bio{padding:clamp(2rem,4vw,2.75rem) 0 0;}
/* The page runs full width for the card grid; the bio must not. */
.apro__bio .prose{max-width:68ch;}
.apro__prose{font-size:1.02rem;line-height:1.8;margin-top:1rem;}

.apro__work{padding:clamp(2rem,4vw,3rem) 0;}
.apro__workhead{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:.75rem;padding-bottom:1rem;margin-bottom:clamp(1.25rem,3vw,1.75rem);
  border-bottom:1.5px solid var(--rule-strong);
}
.apro__count{
  font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--muted);
}
.apro__all{font-size:.84rem;font-weight:600;color:var(--accent);}
.apro__all i{transition:transform .14s;}
.apro__all:hover i{transform:translateX(3px);}
.apro__empty{
  padding:1.5rem 1.6rem;background:var(--paper-2);
  border-left:3px solid var(--rule-strong);border-radius:0 var(--radius) var(--radius) 0;
  color:var(--ink-3);line-height:1.7;
}
.apro__empty p{margin:0;}
.apro__empty p + p{margin-top:.5rem;font-size:.94rem;color:var(--muted);}

.apro__more{padding:0 0 clamp(2.5rem,5vw,3.5rem);}
.apeers{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.75rem;}
.apeer{
  display:flex;align-items:center;gap:.75rem;padding:.7rem .85rem;
  border:1px solid var(--rule);border-radius:var(--radius);background:var(--paper);
  transition:border-color .14s,background .14s;
}
.apeer:hover{border-color:var(--accent);background:var(--accent-tint);}
.apeer img{
  flex:none;width:40px;height:40px;border-radius:50%;object-fit:cover;
  border:1px solid var(--rule);background:var(--paper-3);
}
.apeer b{display:block;font-size:.9rem;color:var(--ink);line-height:1.3;}
.apeer small{display:block;font-size:.76rem;color:var(--muted);margin-top:.1rem;}

/* ============================================================
   404 — the recovery page.
   Built entirely from tokens so the themes in assets/css/themes
   restyle it along with everything else.
   ============================================================ */
.e404{padding:clamp(3rem,8vw,6rem) 0 clamp(2rem,5vw,3.5rem);border-bottom:1px solid var(--rule-2);}
.e404__stage{position:relative;display:flex;justify-content:center;}
/* The numeral is decoration behind the content, never a layout participant. */
.e404__ghost{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-52%);
  font-size:clamp(9rem,32vw,22rem);font-weight:900;line-height:.8;
  color:var(--paper-3);letter-spacing:-.04em;user-select:none;pointer-events:none;z-index:0;
}
.e404__inner{position:relative;z-index:1;max-width:44rem;text-align:center;}
.e404__title{
  font-family:var(--serif);font-size:clamp(1.75rem,4.5vw,2.75rem);font-weight:700;
  line-height:1.15;color:var(--ink);margin:.5rem 0 .75rem;
}
.e404__lede{color:var(--ink-3);font-size:1.02rem;line-height:1.7;margin:0 auto 1.75rem;max-width:36rem;}
.e404__search{margin-bottom:1.25rem;}
.e404__acts{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;}
.e404__debug{
  margin:1.5rem auto 0;max-width:36rem;font-size:.82rem;color:var(--muted);
  background:var(--paper-3);border:1px solid var(--rule);border-radius:var(--radius);
  padding:.55rem .8rem;word-break:break-word;
}

.e404__head{margin-bottom:1.5rem;}
.e404__h2{font-family:var(--serif);font-size:clamp(1.25rem,3vw,1.6rem);font-weight:700;color:var(--ink);margin:.35rem 0 0;}

/* auto-fit, not auto-fill: with the directory switched off there are three
   cards, and empty tracks would push them off-centre. */
.e404__cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem;}
.e404__card{
  display:flex;flex-direction:column;gap:.4rem;padding:1.25rem;
  border:1px solid var(--rule);border-radius:var(--radius);background:var(--paper);
  transition:border-color .14s,transform .14s,box-shadow .14s;
}
.e404__card:hover{border-color:var(--accent-line);transform:translateY(-2px);box-shadow:var(--shadow-lg);}
.e404__ico{
  width:2.25rem;height:2.25rem;display:grid;place-items:center;margin-bottom:.25rem;
  border-radius:50%;background:var(--accent-tint);color:var(--accent);font-size:.95rem;
}
.e404__cname{font-family:var(--serif);font-weight:700;font-size:1.02rem;color:var(--ink);}
.e404__cdesc{font-size:.86rem;color:var(--ink-3);line-height:1.55;flex:1;}
.e404__cgo{font-size:.8rem;font-weight:600;color:var(--accent);margin-top:.35rem;}
.e404__card:hover .e404__cgo i{transform:translateX(3px);}
.e404__cgo i{transition:transform .14s;}

.e404__chipsets{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:2rem;}
.e404__chiphead{
  font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);margin:0 0 .75rem;
}
.e404__chiphead i{color:var(--accent);margin-right:.35rem;}
.e404__chips{display:flex;flex-wrap:wrap;gap:.45rem;}
.e404__chips a{
  display:inline-flex;align-items:baseline;gap:.35rem;
  padding:.4rem .75rem;border:1px solid var(--rule);border-radius:100px;
  font-size:.85rem;color:var(--ink-2);background:var(--paper);transition:all .14s;
}
.e404__chips a:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-tint);}
/* An area chip carries its city, since that is the page it opens. */
.e404__chipcity{font-size:.72rem;color:var(--faint);}
.e404__chips a:hover .e404__chipcity{color:var(--accent);}

/* Scrollbars */
::-webkit-scrollbar{width:9px;height:9px;background:var(--paper-2);}
::-webkit-scrollbar-thumb{background-color:var(--rule);}
::-webkit-scrollbar-thumb:hover{background-color:var(--scroll-thumb-hover);}
::selection{background:var(--accent);color:var(--on-accent);}

/* cache-bust probe */