/* ===================== USLS BLOG — START ===================================
   The blog stylesheet. It is a real file in the theme and is queued the way
   WordPress expects, from inc/usls-blog/bootstrap.php.
   Type scale and labels taken from torchscan.com.
   ========================================================================= */

.usls-blog{
  /* Content width. This value is only the fallback: the template overrides it
     with whatever Avada is configured with (Options > Layout > Site width),
     which is what decides where the logo starts and where "Order Now" ends.
     That way the blog cannot end up wider than the header even if the theme
     setting changes. The black band still bleeds to the edges. */
  --usls-blog-w: 980px;

  --usls-blog-ink:#000;
  --usls-blog-body:#33383d;
  --usls-blog-muted:#6b7580;
  --usls-blog-date:#7c868f;   /* the grey of the dates */
  --usls-blog-faint:#98a2ad;
  --usls-blog-rule:#e3e3e3;
  --usls-blog-rule2:#d2d2d2;
  --usls-blog-wash:#f6f8f9;
  --usls-blog-accent:#007aff;
  --usls-blog-link:#0070c9;

  /* On black */
  --usls-blog-dark:#000;
  --usls-blog-on-dark:#b6bec6;
  --usls-blog-hair:#22262a;

  container-type: inline-size;
  color: var(--usls-blog-body);
  font-family: Roboto, Tahoma, Geneva, sans-serif;
}
/* The small uppercase labels —categories, dates, "About the author"— use the
   same typeface as the rest of the site: Roboto, weight 800 and little
   letter-spacing, which is how the buttons and the guides' table headers are
   set. They used to be monospaced in a face the site does not even load, so
   the system one showed up and it looked wrong. */
.usls-blog *, .usls-blog *::before, .usls-blog *::after{ box-sizing:border-box; }
/* Avada sometimes forces display on generic elements; this makes sure that
   what we mark as hidden stays hidden. */
.usls-blog [hidden]{ display:none !important; }
/* The biographies live here out of sight and the JavaScript copies them in
   when a writer is opened, so the text comes from the same block that sits at
   the foot of their articles. */
.usls-blog-bio{ display:none; }

/* Two fixes on Avada's container, only on the blog and the archives.
   `.single-post` is left alone: articles keep the spacing they always had.
   1. The white strip between the header and the black band is the
      `margin-top:70px` that custoncss.css puts on `#main` on these pages.
   2. The black band bleeds with 100vw; `overflow-x:clip` prevents the
      horizontal scrollbar that otherwise appears from the bar's width. */
body.blog #main,
body.archive #main,
body.page #main:has(.usls-blog--series){
  margin-top: 0 !important;
  padding-top: 0 !important;
  overflow-x: clip;
}

/* The search results page. Avada's search page sidebar option adds
   `has-sidebar` to the body, which narrows #content to about 70% and floats
   it left, although no sidebar is printed here. The black band came out
   off-centre and the grid fitted two cards a row. The results take the full
   width, like the rest of the blog. */
body.search #content:has(> .usls-blog--search){
  width: 100%;
  float: none;
}

/* No side padding, so that the content edge lands exactly where the header's
   does; below 1024px the margins appear. */
.usls-blog-row{ width:min(var(--usls-blog-w), 100% - 44px); margin:0 auto; }
.usls-blog img{ display:block; max-width:100%; height:auto; }
.usls-blog a{ text-decoration:none; }
.usls-blog a:focus-visible,
.usls-blog button:focus-visible,
.usls-blog input:focus-visible{ outline:2px solid var(--usls-blog-accent); outline-offset:2px; }

/* ---------- Labels and metadata ----------
   Small caps in the text colour rather than an accent colour: that is
   torchscan.com's pattern. The size is the header's "Get a quote" button,
   13px, measured on the site. */
.usls-blog-eyebrow,
.usls-blog-kicker{
  font-size:12px; letter-spacing:.075em; text-transform:uppercase; font-weight:800;
}
.usls-blog-kicker{ font-size:11.5px; letter-spacing:.07em; font-weight:800; }

/* The rail: the title at 18px in white, the same as the header menu links
   (span.menu-text: 18px Roboto #fff), measured on the site. */
.usls-blog-rail{
  font-family:Roboto, Tahoma, Geneva, sans-serif;
  font-size:18px; letter-spacing:.02em; text-transform:uppercase;
  font-weight:700; color:#fff;
}
/* The right-hand side takes the size and colour of the dates: it is a
   detail, not a title, so it does not compete with "BLOG". */
.usls-blog-rail > span:last-child{
  font-size:13px; letter-spacing:.012em; font-weight:400;
  font-variant-numeric:tabular-nums; color:var(--usls-blog-date);
}
.usls-blog-kicker{ display:block; color:var(--usls-blog-faint); }
.usls-blog-meta{
  display:block; font-size:11.5px; font-weight:700;
  letter-spacing:.04em; color:var(--usls-blog-faint); font-variant-numeric:tabular-nums;
}
.usls-blog-n{ font-size:11.5px; font-weight:700; opacity:.55; margin-left:5px; }

.usls-blog-ph{
  display:grid; place-items:center; width:100%; aspect-ratio:3/2;
  background:var(--usls-blog-wash); border:1px solid var(--usls-blog-rule);
}
.usls-blog-ph span{
  font-size:10.5px; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; color:var(--usls-blog-faint);
}

/* ---------- Opening band, full bleed ----------
   If it ever stopped reaching the edges on dev, some container has overflow
   hidden: changing the two margin lines to `margin:0` is enough. */
.usls-blog-open{
  background:var(--usls-blog-dark); color:#fff;
  padding:0 0 64px;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
.usls-blog-rail{
  display:flex; justify-content:space-between; align-items:baseline; gap:20px;
  padding:20px 0; margin-bottom:34px;
  border-bottom:1px solid var(--usls-blog-hair);
}
.usls-blog-rail a{ color:#fff; }
.usls-blog-rail a:hover{ color:#fff; }
/* When a box follows the rail (the featured article, the spotlight, the
   article header) the box's own top line is the only one: the rail drops its
   line and its gap, so there are not two parallel lines 34px apart. A rail
   with nothing boxed under it, as on search, keeps its line. */
.usls-blog-rail:has(+ .usls-blog-feat, + .usls-blog-spot__box, + .usls-blog-arthead){
  border-bottom:0; margin-bottom:0;
}
/* The h1 lives here: the blog title does not need a huge headline repeating
   what the line beside it already says. */
.usls-blog .usls-blog-rail h1{
  margin:0; padding:0; border:0;
  font:inherit; line-height:1; color:inherit;
}
.usls-blog-open .usls-blog-eyebrow{ margin:0; color:var(--usls-blog-on-dark); }
/* Only the series page uses it, which does need to explain itself. */

/* The featured article inside the band. */
.usls-blog-feat{
  /* The same box as the spotlight: a line above, a line below and one
     vertical rule between the columns, nothing closed off at the sides. */
  display:grid; grid-template-columns:1.05fr .95fr; gap:0; align-items:stretch;
  margin-top:0;
  border-top:1px solid var(--usls-blog-hair); border-bottom:1px solid var(--usls-blog-hair);
}
/* Whole, uncropped: the same image seen on opening the article. */
.usls-blog-feat__im img{ width:100%; height:auto; }
.usls-blog-feat__im{ display:block; }
.usls-blog-feat a{ color:inherit; display:block; }
.usls-blog-feat .usls-blog-kicker{ color:var(--usls-blog-on-dark); }
.usls-blog .usls-blog-feat h2{
  margin:0; padding:0; border:0;
  font-size:clamp(26px,3.3vw,40px); line-height:1.08;
  letter-spacing:-.022em; font-weight:700; color:#fff;
}
/* The two labels —"Latest post" above the photo and the category with the
   date above the headline— sit at the same height and the rail line's size. */
.usls-blog-feat__label{
  display:block; font-size:11.5px; font-weight:800;
  letter-spacing:.07em; text-transform:uppercase;
  color:var(--usls-blog-date); font-variant-numeric:tabular-nums;
  margin:0 0 16px;
}
.usls-blog-feat__col{ display:block; padding:26px 34px 30px 0; }
.usls-blog-feat__tx{
  display:flex; flex-direction:column; justify-content:flex-start;
  padding:26px 0 30px 34px; border-left:1px solid var(--usls-blog-hair);
}
.usls-blog-feat__dek{ margin:16px 0 0; font-size:16.5px; line-height:1.6; color:var(--usls-blog-on-dark); }
.usls-blog-feat .usls-blog-meta{ color:var(--usls-blog-date); margin-top:18px; }

/* The site's button: solid blue, square corner, uppercase and still. The
   buttons on uslanguageservices.com do not change on hover, so neither does
   this one. */
.usls-blog a.usls-blog-btn{
  display:inline-flex; align-items:center; margin-top:26px;
  height:48px; padding:0 30px; background:var(--usls-blog-accent); color:#fff;
  font-family:Roboto, Tahoma, Geneva, sans-serif;
  font-size:14px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  align-self:flex-start; width:auto;
}
.usls-blog a.usls-blog-btn:hover,
.usls-blog a.usls-blog-btn:focus{ background:var(--usls-blog-accent); color:#fff; }

/* ---------- Topics and search ----------
   The chips sit on a single row at every width. Wrapping put the last one
   alone on a second line inside a category, where the bar holds "All", the
   category and up to topics_count more. On a desktop they are sized to fit
   that row; only when they still do not (a phone, a long category name) does
   the row scroll sideways, with no visible bar and a fade on whichever edge
   has more behind it. The search box is a magnifier that unfolds over them. */
.usls-blog-topics{ border-bottom:1px solid var(--usls-blog-rule); background:#fff; }
.usls-blog-topics .usls-blog-row{
  display:flex; gap:12px; align-items:center;
  padding-top:14px; padding-bottom:14px;
}
.usls-blog-chipwrap{ position:relative; flex:1 1 auto; min-width:0; }
.usls-blog-chips{
  display:flex; gap:6px; align-items:center; min-width:0;
  flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x proximity;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.usls-blog-chips::-webkit-scrollbar{ display:none; }
/* The edge that has more chips behind it fades out, the same signal as the
   series carousels. The JavaScript sets each side only while there is
   something hidden on it, so a row that fits has no fade at all, and a row
   scrolled to the end fades on the left instead of being cut. */
.usls-blog-chips--fade-end{
  -webkit-mask-image:linear-gradient(to right, #000 88%, rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(to right, #000 88%, rgba(0,0,0,0) 100%);
}
.usls-blog-chips--fade-start{
  -webkit-mask-image:linear-gradient(to right, rgba(0,0,0,0) 0, #000 12%);
          mask-image:linear-gradient(to right, rgba(0,0,0,0) 0, #000 12%);
}
.usls-blog-chips--fade-start.usls-blog-chips--fade-end{
  -webkit-mask-image:linear-gradient(to right, rgba(0,0,0,0) 0, #000 12%, #000 88%, rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(to right, rgba(0,0,0,0) 0, #000 12%, #000 88%, rgba(0,0,0,0) 100%);
}
/* The arrows that move the row on a desktop. They sit over the faded edge,
   so they take no room from the chips, and look like the series arrows. Each
   one shows only while chips are hidden on its side, and never on a touch
   screen, where the row is dragged with a finger. */
.usls-blog .usls-blog-chipnav{
  display:none; position:absolute; top:50%; z-index:1; transform:translateY(-50%);
  width:34px; height:34px; padding:0; place-items:center;
  border:1px solid var(--usls-blog-ink); background:#fff; color:var(--usls-blog-ink);
  cursor:pointer; font-size:15px; line-height:1;
}
.usls-blog .usls-blog-chipnav:hover{ background:var(--usls-blog-ink); color:#fff; }
.usls-blog-chipnav--prev{ left:0; }
.usls-blog-chipnav--next{ right:0; }
@media (hover:hover){
  .usls-blog-chips--fade-start ~ .usls-blog-chipnav--prev,
  .usls-blog-chips--fade-end ~ .usls-blog-chipnav--next{ display:grid; }
}
/* 12px of side padding rather than 15: with "All", the category and six
   more, 15 left the row a few pixels short of the 980px layout and that was
   enough to cut it. */
.usls-blog .usls-blog-tp{
  font-size:13px; border:1px solid var(--usls-blog-rule2); color:var(--usls-blog-body);
  padding:7px 12px; white-space:nowrap; background:#fff;
  flex:0 0 auto; scroll-snap-align:start;
}
@media (hover:hover){
  .usls-blog .usls-blog-tp:hover{ border-color:var(--usls-blog-ink); color:var(--usls-blog-ink); }
}
.usls-blog .usls-blog-tp[aria-current=true]{
  background:var(--usls-blog-ink); border-color:var(--usls-blog-ink); color:#fff;
}
.usls-blog .usls-blog-tp[aria-current=true] .usls-blog-n{ color:#fff; opacity:1; }

/* What sits flush right on the bar: the cross that clears the filter and the
   magnifier. They live here and not beside the heading of the section below,
   because what they clear is this bar's filter. */
.usls-blog-actions{ display:flex; align-items:center; gap:10px; flex:0 0 auto; min-width:0; }
.usls-blog--finding .usls-blog-actions{ flex:1 1 auto; }

/* The cross has the same size and the same border as the magnifier, and ITS
   SPACE IS RESERVED AT ALL TIMES: it hides with visibility and not with
   display, so the row measures the same whether there is a filter or not.
   With display:none —which is what the hidden attribute did— the button moved
   in and out of the row, the chips reflowed and the last one dropped to a
   second line every time a topic was picked. */
.usls-blog .usls-blog-clearbtn{
  width:34px; height:34px; padding:0; display:grid; place-items:center;
  border:1px solid var(--usls-blog-rule2); background:#fff;
  color:var(--usls-blog-muted); cursor:pointer;
  visibility:hidden; pointer-events:none;
}
.usls-blog .usls-blog-clearbtn--on{ visibility:visible; pointer-events:auto; }
@media (hover:hover){
  .usls-blog .usls-blog-clearbtn:hover{ border-color:var(--usls-blog-ink); color:var(--usls-blog-ink); }
}
.usls-blog-find{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.usls-blog--finding .usls-blog-chipwrap{ display:none; }
.usls-blog--finding .usls-blog-find{ flex:1 1 auto; }
.usls-blog-find__box{ display:none; flex:1 1 auto; min-width:0; }
.usls-blog--finding .usls-blog-find__box{ display:block; }
.usls-blog .usls-blog-find__btn{
  width:34px; height:34px; padding:0; display:grid; place-items:center;
  border:1px solid var(--usls-blog-rule2); background:#fff;
  color:var(--usls-blog-body); cursor:pointer;
}
@media (hover:hover){
  .usls-blog .usls-blog-find__btn:hover{ border-color:var(--usls-blog-ink); color:var(--usls-blog-ink); }
}
.usls-blog .usls-blog-find__btn[aria-expanded=true]{
  background:var(--usls-blog-ink); border-color:var(--usls-blog-ink); color:#fff;
}
/* The same field as the site's forms: 1px grey and a square corner. */
.usls-blog .usls-blog-find__box input[type=search]{
  width:100%; padding:8px 14px; font-size:14px; font-family:inherit;
  border:1px solid var(--usls-blog-rule2); background:#fff; color:var(--usls-blog-ink);
}
.usls-blog .usls-blog-find__box input[type=search]:focus,
.usls-blog .usls-blog-find__box input[type=search]:focus-visible{
  outline:none; border-color:var(--usls-blog-ink);
}

/* ---------- The big search box on the results page ---------- */
.usls-blog-bigsearch{ display:flex; gap:10px; margin:0 0 26px; max-width:620px; }
.usls-blog .usls-blog-bigsearch input[type=search]{
  flex:1 1 auto; min-width:0; padding:12px 16px; font-size:16px; font-family:inherit;
  border:1px solid var(--usls-blog-hair); background:#111; color:#fff;
}
.usls-blog .usls-blog-bigsearch input[type=search]::placeholder{ color:#6d757d; }
.usls-blog .usls-blog-bigsearch input[type=search]:focus{
  outline:none; border-color:#fff;
}
.usls-blog .usls-blog-bigsearch button{
  flex:0 0 auto; padding:12px 24px; font-size:14px; font-family:inherit; font-weight:400;
  letter-spacing:.06em; text-transform:uppercase;
  border:1px solid #fff; background:#fff; color:#000; cursor:pointer;
}
.usls-blog .usls-blog-bigsearch button:hover{ background:transparent; color:#fff; }
.usls-blog--search .usls-blog-empty a{ color:var(--usls-blog-link); }

/* Nothing rounded and nothing in light blue: the site uses neither. The
   controls follow the site's buttons —square corner, 1px border, and the
   active state in solid black with white text. */

/* No control on the blog has a rounded corner. It is declared as zero rather
   than simply left out: with it left out, whatever Avada or the site CSS
   brings wins, and the chips went back to being round. It carries !important
   because the theme's custom CSS field is printed after this. */
.usls-blog button,
.usls-blog input,
.usls-blog select,
.usls-blog .usls-blog-tp,
.usls-blog .usls-blog-yr,
.usls-blog .usls-blog-pag a,
.usls-blog .usls-blog-pag span{ border-radius:0 !important; }

/* ---------- Sections ---------- */
.usls-blog-sec{ padding:56px 0; }
.usls-blog-sec + .usls-blog-sec{ border-top:1px solid var(--usls-blog-rule); }
.usls-blog-sech{ display:flex; align-items:baseline; gap:14px; margin-bottom:28px; flex-wrap:wrap; }
.usls-blog .usls-blog-sech h2{
  margin:0; padding:0; border:0; font-size:30px;
  letter-spacing:-.022em; font-weight:700; color:var(--usls-blog-ink);
}
.usls-blog-more{ margin-left:auto; font-size:13px; color:var(--usls-blog-muted); }
a.usls-blog-more:hover{ color:var(--usls-blog-ink); }
.usls-blog-empty{ color:var(--usls-blog-muted); font-size:14px; padding:20px 0; }
/* The button that expands the remaining series. */
.usls-blog .usls-blog-toggle{
  margin-left:auto; font-size:13px; font-family:inherit; background:transparent;
  border:1px solid var(--usls-blog-rule2); padding:7px 16px;
  color:var(--usls-blog-body); cursor:pointer;
}
@media (hover:hover){
  .usls-blog .usls-blog-toggle:hover{ border-color:var(--usls-blog-ink); color:var(--usls-blog-ink); }
}
.usls-blog .usls-blog-toggle[aria-expanded=true]{
  background:var(--usls-blog-ink); border-color:var(--usls-blog-ink); color:#fff;
}
.usls-blog-series-rest{ display:block; }

/* The "no results" notice carries a link to the full search. */
.usls-blog-empty a{ color:var(--usls-blog-link); }

/* "Clear" sits beside the heading, which is the filter it clears. It used to
   carry margin-left:auto and, with "Browse the full archive" behind it
   carrying another, ended up loose in the middle of the row. The auto is now
   declared only on the button that closes a writer's panel, which does belong
   at the far end. */
.usls-blog .usls-blog-clear{
  font-size:12.5px; font-family:inherit; background:transparent;
  border:1px solid var(--usls-blog-rule2); padding:6px 13px;
  color:var(--usls-blog-muted); cursor:pointer; align-self:center;
}
.usls-blog .usls-blog-clear--end{ margin-left:auto; }
@media (hover:hover){
  .usls-blog .usls-blog-clear:hover{ border-color:var(--usls-blog-ink); color:var(--usls-blog-ink); }
}

/* ---------- Grid ---------- */
/* Every article in its own box: the border follows the image width, which is
   what sets the column. */
/* 40px between rows, 10px between columns: with 10px both ways the rows ran
   into each other, above all on a phone, where the cards stack. */
.usls-blog-g3{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px 10px; }
.usls-blog .usls-blog-card{ margin:0; padding:0; border:0; background:none; }
/* Every article in its own box: the border follows the image width, which is
   what sets the column. It comes after the rule above on purpose: they have
   the same specificity and the last one wins. */
.usls-blog .usls-blog-card--grid{ border:1px solid var(--usls-blog-rule); background:#fff; }
.usls-blog .usls-blog-card--grid:hover{ border-color:var(--usls-blog-ink); }
.usls-blog-card--grid .usls-blog-card__body{ padding:0 18px 18px; }
.usls-blog-card__link{ display:block; color:inherit; }
.usls-blog-card--grid img{ width:100%; aspect-ratio:3/2; object-fit:cover; background:var(--usls-blog-wash); }
.usls-blog-card__body{ display:block; }
.usls-blog-card--grid .usls-blog-kicker{ margin:13px 0 6px; }
.usls-blog-card__title{
  display:block; font-size:19px; line-height:1.24;
  letter-spacing:-.016em; font-weight:700; color:var(--usls-blog-ink);
}
.usls-blog-card__dek{
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  margin-top:8px; font-size:14px; line-height:1.55; color:var(--usls-blog-body);
}
/* No headline changes colour on hover: on a page that is almost entirely
   links, doing so turns it into a Christmas tree. Blue is reserved for the
   buttons. The underline already says it can be clicked. */

.usls-blog-card--grid .usls-blog-meta{ margin-top:10px; }

/* ---------- List ---------- */
/* A single line between one article and the next: none above the first and
   none below the last. */
.usls-blog-list .usls-blog-card--list + .usls-blog-card--list{ border-top:1px solid var(--usls-blog-rule); }
.usls-blog-card--list .usls-blog-card__link{ display:grid; grid-template-columns:104px 1fr; gap:22px; align-items:center; padding:17px 0; }
.usls-blog-card--list img, .usls-blog-card--list .usls-blog-ph{ width:104px; aspect-ratio:3/2; object-fit:cover; }
.usls-blog-card--list .usls-blog-kicker{ margin-bottom:5px; }
.usls-blog-card--list .usls-blog-card__title{ font-size:18px; }
.usls-blog-card__sub{
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
  margin-top:5px; font-size:13.5px; color:var(--usls-blog-muted);
}
.usls-blog-card--list .usls-blog-meta{ margin-top:6px; }

/* ---------- Series ----------
   No scrollbar: the fourth card peeks out so that it is visible there is
   more, and the buttons advance three at a time. */
.usls-blog-serband{ position:relative; padding:46px 0; border-top:1px solid var(--usls-blog-rule); }
.usls-blog-serband:first-of-type{ border-top:0; padding-top:0; }
.usls-blog-serband__head{ display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:22px; }
.usls-blog .usls-blog-serband__head h3{
  margin:0; padding:0; border:0; flex:1 1 320px; font-size:clamp(26px,3.4vw,38px);
  line-height:1.08; letter-spacing:-.022em; font-weight:700; color:var(--usls-blog-ink);
}
.usls-blog-serband__head .usls-blog-meta{ margin-bottom:6px; }
.usls-blog-navb{ display:flex; gap:6px; margin-bottom:4px; }
.usls-blog .usls-blog-navb button{
  width:34px; height:34px; padding:0; border:1px solid var(--usls-blog-rule2); background:#fff;
  cursor:pointer; color:var(--usls-blog-body); font-size:15px; line-height:1;
}
.usls-blog .usls-blog-navb button:not(:disabled){ border-color:var(--usls-blog-ink); color:var(--usls-blog-ink); }
.usls-blog .usls-blog-navb button:hover:not(:disabled){ background:var(--usls-blog-ink); color:#fff; }
.usls-blog .usls-blog-navb button:disabled{ opacity:.3; cursor:default; }
.usls-blog-trackwrap{ position:relative; }
/* A fade on the right so that it is visible there is more.
   It is done with a mask over the track itself and not a white gradient on
   top: that way the card peeking out genuinely fades, without depending on
   the background being white or on the order things are painted in.
   It is on by default and the JavaScript only removes it at the end, so even
   if the JavaScript does not run the signal is still there. */
.usls-blog-track{
  -webkit-mask-image:linear-gradient(to right, #000 86%, rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(to right, #000 86%, rgba(0,0,0,0) 100%);
}
.usls-blog-serband--end .usls-blog-track{
  -webkit-mask-image:none;
          mask-image:none;
}
.usls-blog-track{
  display:flex; gap:18px; overflow-x:auto; scroll-behavior:smooth;
  scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none;
}
.usls-blog-track::-webkit-scrollbar{ display:none; }
.usls-blog-part{
  /* 28.5% = three whole cards and half of the fourth. */
  flex:0 0 calc(28.5% - 13px); scroll-snap-align:start;
  border-top:3px solid var(--usls-blog-ink); padding-top:12px; color:inherit;
}
.usls-blog-part__no{ display:block; font-size:11.5px; font-weight:800; letter-spacing:.06em; color:var(--usls-blog-faint); }
.usls-blog-part__t{ display:block; margin-top:6px; font-size:16px; line-height:1.25; letter-spacing:-.016em; font-weight:700; color:var(--usls-blog-ink); }
.usls-blog-part .usls-blog-meta{ margin-top:9px; }


/* ---------- Spotlight ----------
   The same box as the opening band —rail, line and the same featured block—
   so that it reads as part of the same system. The headline size and the
   rail label colour change, and that is enough to tell them apart.
   If no article carries the field, this section is not printed. */
.usls-blog-spot{
  background:var(--usls-blog-dark); color:#fff;
  padding:0 0 72px;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  border-top:1px solid var(--usls-blog-hair);
}
.usls-blog-spot .usls-blog-rail{ color:#fff; }
.usls-blog-spot .usls-blog-rail span:last-child{ color:var(--usls-blog-date); }

/* The spotlight uses the same box as the article above, the other way
   round: image on the left and text on the right, split by a line. */
.usls-blog-spot__box{
  display:grid; grid-template-columns:1.05fr .95fr; gap:0; align-items:stretch;
  border-top:1px solid var(--usls-blog-hair); border-bottom:1px solid var(--usls-blog-hair);
}
/* The photo column carries its label on top, just like "Latest post" on the
   blog home article: the two blocks have to read as the same thing. */
.usls-blog-spot__col{ display:block; padding:30px 36px 30px 0; }
.usls-blog-spot__im{ display:block; }
.usls-blog-spot__im img{
  display:block; width:100%; aspect-ratio:16/10; object-fit:cover; background:#111;
}
.usls-blog-spot__tx{
  display:flex; flex-direction:column; justify-content:flex-start;
  padding:30px 0 30px 36px; border-left:1px solid var(--usls-blog-hair);
}
.usls-blog-spot__tx > a{ color:inherit; display:block; }
.usls-blog-spot__t{
  display:block; font-size:30px; line-height:1.12; letter-spacing:-.024em;
  font-weight:700; color:#fff; text-wrap:balance;
}
.usls-blog-spot__d{
  display:block; margin-top:14px; font-size:15.5px; line-height:1.6;
  color:var(--usls-blog-on-dark); max-width:44ch;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

/* ---------- Writers ----------
   The borders go on each cell and not on the grid's background: if the last
   row is incomplete, the gap shows white and not grey. */
/* The whole section sits on a full-width grey band: it separates without
   having to draw a line. */
.usls-blog-sec--wash{
  background:var(--usls-blog-wash);
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  padding-left:calc(50vw - 50%); padding-right:calc(50vw - 50%);
  border-top:0;
}
.usls-blog-sec--wash + .usls-blog-sec{ border-top:0; }
.usls-blog-writers{
  display:grid; grid-template-columns:repeat(6,1fr);
  border-top:1px solid var(--usls-blog-rule); border-left:1px solid var(--usls-blog-rule);
}
.usls-blog .usls-blog-writer{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  background:#fff; padding:18px; cursor:pointer; text-align:left; width:100%;
  border:0; border-right:1px solid var(--usls-blog-rule); border-bottom:1px solid var(--usls-blog-rule);
  font-family:inherit; color:var(--usls-blog-ink);
}
/* Only where there is a mouse: on a touch screen :hover sticks to whatever
   was last tapped, and closing a writer with a second tap left their card
   grey as if it were still selected. */
@media (hover:hover){
  .usls-blog .usls-blog-writer:hover{ background:var(--usls-blog-wash); }
  .usls-blog .usls-blog-writer--soon:hover{ background:#fff; }
}
/* Selected: the card turns grey and the border darkens, like the chips. In
   solid black it was far too heavy for a grid of six. */
.usls-blog .usls-blog-writer[aria-current=true]{ background:var(--usls-blog-wash); }
.usls-blog .usls-blog-writer[aria-current=true] .usls-blog-writer__n{ color:var(--usls-blog-ink); }
/* No articles yet: it cannot be clicked, but it looks like the others. */
.usls-blog .usls-blog-writer--soon{ cursor:default; }
.usls-blog-writer__im{
  width:56px; height:56px; border-radius:50%; object-fit:cover;
  margin-bottom:10px; background:var(--usls-blog-wash);
}
.usls-blog-writer__im--ph{ display:block; border:1px solid var(--usls-blog-rule); }
.usls-blog-writer__n{ font-size:15px; font-weight:500; letter-spacing:-.008em; line-height:1.25; }

.usls-blog-writer-out{ margin-top:38px; padding-top:30px; border-top:1px solid var(--usls-blog-rule); }
.usls-blog-bio-out{
  margin:0 0 34px; padding:22px 24px 24px;
  background:var(--usls-blog-wash); border:1px solid var(--usls-blog-rule);
  font-size:15px; line-height:1.65; color:var(--usls-blog-body);
}
.usls-blog-bio-out:empty{ display:none; }
/* The author box comes in whole —photo and text— but without its own frame:
   the frame is the grey from here. It is laid out as a grid, the same as on
   the article page: the floats the text block brings made the text sit on top
   of the photo on some cards and run off to the far side on others. */
.usls-blog-bio-out #author-info,
.usls-blog-bio-out #author-box,
.usls-blog-bio-out [id^="author-box"]{
  border:0 !important; background:none !important; padding:0 !important; margin:0 !important;
  box-shadow:none !important;
}
.usls-blog-bio-out::after{ content:""; display:block; clear:both; }
.usls-blog-bio-out p:first-child{ margin-top:0; }
.usls-blog-bio-out p:last-child{ margin-bottom:0; }
/* The line that separates the biography from the articles. */
.usls-blog-writer-grid-sep{ border-top:1px solid var(--usls-blog-rule); padding-top:30px; }
.usls-blog .usls-blog-writer-out h3{
  margin:0; padding:0; border:0; font-size:22px;
  letter-spacing:-.02em; font-weight:700; color:var(--usls-blog-ink);
}

/* ---------- Years ---------- */
.usls-blog-years{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.usls-blog .usls-blog-yr{
  font-size:13px; font-weight:700;
  border:1px solid var(--usls-blog-rule2); color:var(--usls-blog-muted); padding:5px 13px;
  font-variant-numeric:tabular-nums;
}
@media (hover:hover){
  .usls-blog .usls-blog-yr:hover{ border-color:var(--usls-blog-ink); color:var(--usls-blog-ink); }
}
.usls-blog .usls-blog-yr[aria-current=true]{
  background:var(--usls-blog-ink); border-color:var(--usls-blog-ink); color:#fff;
}

/* ---------- Load more ---------- */
.usls-blog .usls-blog-loadmore{
  display:block; margin:34px auto 0; padding:13px 34px; font-size:14px; font-family:inherit;
  background:#fff; border:2px solid var(--usls-blog-ink); color:var(--usls-blog-ink); cursor:pointer;
  text-transform:uppercase; letter-spacing:.06em;
}
.usls-blog .usls-blog-loadmore:hover{ background:var(--usls-blog-ink); color:#fff; }

/* ---------- Pagination ---------- */
/* Pagination: the theme's on search, and ours on the archive page, which
   numbers from 1. */
.usls-blog-pag{ padding-top:38px; }
/* The archive paginator: prev / "Page 2 of 21" / next on the left and how
   many per page on the right. The full row of numbers grew with the blog and,
   past twenty, stopped being of any use. */
.usls-blog-pag--bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px 24px; flex-wrap:wrap; margin-top:34px; padding-top:18px;
  border-top:1px solid var(--usls-blog-rule);
}
/* All three are boxed, the same button as the topic chips and the years:
   1px border, square corner and a white background. */
.usls-blog-pag__nav{ display:flex; align-items:center; gap:6px; }
.usls-blog nav.usls-blog-pag--bar a,
.usls-blog-pag__off,
.usls-blog-pag__n{
  display:inline-block; font-size:13px; padding:7px 15px; white-space:nowrap;
  border:1px solid var(--usls-blog-rule2); background:#fff;
}
.usls-blog nav.usls-blog-pag--bar a{ color:var(--usls-blog-body); }
@media (hover:hover){
  .usls-blog nav.usls-blog-pag--bar a:hover{ border-color:var(--usls-blog-ink); color:var(--usls-blog-ink); }
}
/* The middle one says where you are: in black, and not clickable. */
.usls-blog-pag__n{
  font-weight:700; letter-spacing:.01em;
  color:var(--usls-blog-ink); font-variant-numeric:tabular-nums;
}
/* When there is no next page, the box stays but dimmed: that way the row
   does not change width on the last page. */
.usls-blog-pag__off{ color:var(--usls-blog-faint); border-color:var(--usls-blog-rule); }
.usls-blog-pag__pp{ display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--usls-blog-muted); }
.usls-blog .usls-blog-pag__pp select{
  font-family:inherit; font-size:13px; padding:6px 10px; background:#fff;
  border:1px solid var(--usls-blog-rule2); color:var(--usls-blog-ink); cursor:pointer;
}
.usls-blog .usls-blog-pag__go{
  font-family:inherit; font-size:12.5px; padding:6px 13px; background:transparent;
  border:1px solid var(--usls-blog-rule2); color:var(--usls-blog-muted); cursor:pointer;
}
.usls-blog-pag .fusion-pagination{ text-align:center; }
.usls-blog-open--short{ padding-bottom:0; }
.usls-blog-open--short .usls-blog-rail{ margin-bottom:0; border-bottom:0; }


/* ====================== The article page ================================
   What follows dresses the single.php template. The body of an article is not
   rewritten: it comes out of the_content() as always —a Fusion Builder block
   with the share plugin's buttons and the "About the author" box inside— and
   all that is done is to narrow it and give it shape. That is why it works on
   all 201 articles without re-uploading a single one.
   ========================================================================= */

/* The body runs at the same width as the photo and as the rest of the site.
   There is no narrow column: the jump in width between the image and the text
   is exactly what we do not want.

   And the article's lines are BLACK, not the grey used elsewhere on the blog.
   They are torchscan.com's, which uses pure 1px black for this same box left
   open at the sides. There are four here and only four: under the rail, above
   and below the header with its vertical rule in between, and above and below
   the author box. Inside the article there are none. */
.usls-blog--post{
  --usls-blog-measure: 100%;
  --usls-blog-line: #000;
  /* The grey for small labels on white. It is the same one the table headers
     of the citizenship guides use. The grey used elsewhere on the blog is
     meant to be read on the black band; on white it washes out and on top of
     that it does not reach the minimum contrast. */
  --usls-blog-label: #4a4a4a;
}
.usls-blog-article{ margin:0; padding:70px 0 96px; background:#fff; }

/* The same rail as the blog home and the spotlight, but on white: that way
   the article header carries the two lines the other two blocks carry —the
   rail's and the box's— and not just one. */
.usls-blog-rail--light{ color:var(--usls-blog-ink); border-bottom-color:var(--usls-blog-line); }
.usls-blog-rail--light > span:last-child{ color:var(--usls-blog-label); }

/* ---------- The article chrome links, in black ----------
   The site's CSS carries `.single-post article a{ color:#0070c9 }`, which
   outweighs a single-class selector: that is why "Blog" and the byline came
   out blue however much this file said otherwise. These rules carry three
   classes to beat it on specificity, without resorting to !important.

   Links in the BODY of the article do stay blue, and should: there blue means
   "this leads somewhere else", which is what the reader expects. Here it does
   not: "Blog", the categories and the byline are the page's chrome. */
.usls-blog.usls-blog--post .usls-blog-rail--light a,
.usls-blog.usls-blog--post .usls-blog-arthead__by a,
.usls-blog.usls-blog--post .usls-blog-art__more a{ color:var(--usls-blog-ink); }
.usls-blog.usls-blog--post .usls-blog-rail--light > span:last-child a{ color:var(--usls-blog-label); }
@media (hover:hover){
  /* On hover they dim a shade instead of changing colour: that way it is
     clear they can be clicked and no blue turns up where it should not. */
  .usls-blog.usls-blog--post .usls-blog-rail--light a:hover,
  .usls-blog.usls-blog--post .usls-blog-arthead__by a:hover,
  .usls-blog.usls-blog--post .usls-blog-art__more a:hover{ color:var(--usls-blog-muted); }
  .usls-blog.usls-blog--post .usls-blog-rail--light > span:last-child a:hover{ color:var(--usls-blog-ink); }
}

/* ---------- Header ----------
   It is the same box as "Latest post" on the blog home: photo on the left,
   text on the right, a line above and below, a vertical rule in between and
   nothing closed off at the sides. The article's four details are shared
   between the two labels that block already had: reading time above the photo
   and the date above the headline. The byline closes the text column, where
   the button goes there. */
.usls-blog-arthead{
  display:grid; grid-template-columns:1.05fr .95fr; gap:0; align-items:stretch;
  border-top:1px solid var(--usls-blog-line); border-bottom:1px solid var(--usls-blog-line);
}
.usls-blog-arthead__col{ display:block; padding:26px 34px 30px 0; }
.usls-blog-arthead__im img{ display:block; width:100%; height:auto; margin:0; }
.usls-blog-arthead__tx{
  display:flex; flex-direction:column; justify-content:flex-start;
  padding:26px 0 30px 34px; border-left:1px solid var(--usls-blog-line);
}
/* The two Avada already printed hidden for hentry. */
.usls-blog-arthead .rich-snippet-hidden{ display:none; }
/* The two labels —minutes above the photo and date above the headline— and
   the separator they carry inside. */
.usls-blog--post .usls-blog-arthead .usls-blog-feat__label{ color:var(--usls-blog-label); }
.usls-blog-arthead .usls-blog-feat__label i{ font-style:normal; padding:0 7px; }

.usls-blog--post .usls-blog-arthead__t{
  margin:0; padding:0; border:0;
  font-size:clamp(26px,3.3vw,40px); line-height:1.1;
  letter-spacing:-.024em; font-weight:700; color:var(--usls-blog-ink);
  text-wrap:balance;
}
.usls-blog-arthead__dek{
  margin:16px 0 0; font-size:16.5px; line-height:1.6; color:var(--usls-blog-body);
}
/* The byline, in the place of the button on the blog home block. */
/* "BY" in the label grey and the name in black: what matters is who wrote
   it, not the preposition. */
.usls-blog-arthead__by{
  margin:22px 0 0; font-size:11.5px; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; color:var(--usls-blog-label);
}

/* ---------- Body ----------
   Only the text is narrowed. Photos, tables and columns an article brings
   keep the width they had. */
.usls-blog-article .post-content{ margin:46px 0 0; }

.usls-blog-article .fusion-text > p,
.usls-blog-article .fusion-text > h2,
.usls-blog-article .fusion-text > h3,
.usls-blog-article .fusion-text > h4,
.usls-blog-article .fusion-text > ul,
.usls-blog-article .fusion-text > ol,
.usls-blog-article .fusion-text > blockquote{
  max-width:var(--usls-blog-measure); margin-left:auto; margin-right:auto;
}
.usls-blog-article .fusion-text > p,
.usls-blog-article .fusion-text > ul,
.usls-blog-article .fusion-text > ol{
  font-size:18px; line-height:1.72; color:var(--usls-blog-body);
  margin-top:0; margin-bottom:26px;
}
/* Inside the article there is not a single line: what separates one section
   from the next is the air the heading has above it, not a rule. The lines
   are left only on the header at the top and the author box at the end.
   Avada works its headings out with a variable of its own and leaves
   line-height in the style attribute, so those two need !important or they do
   not move. */
.usls-blog-article .fusion-text > h2{
  margin-top:54px; margin-bottom:20px;
  font-size:28px !important; line-height:1.22 !important;
  letter-spacing:-.022em; font-weight:700; color:var(--usls-blog-ink);
}
.usls-blog-article .fusion-text > h2:first-child{ margin-top:0; }
.usls-blog-article .fusion-text > h3{
  margin-top:42px; margin-bottom:14px;
  font-size:21px !important; line-height:1.3 !important;
  font-weight:700; color:var(--usls-blog-ink);
}
.usls-blog-article .fusion-text a{ color:var(--usls-blog-link); }
@media (hover:hover){
  .usls-blog-article .fusion-text a:hover{ color:var(--usls-blog-ink); }
}

/* ---------- Sharing ----------
   The buttons are the plugin's and are left exactly as they come, with their
   colours and their icons. All that is done is to hide the row that appears
   at the start of the body, so it is not the first thing seen, and keep the
   one at the end, which is where an article gets shared: after reading it. */
.usls-blog-article > .usls-blog-row > .post-content > .addtoany_share_save_container{ display:none !important; }
.usls-blog-article .fusion-text > .addtoany_share_save_container{ margin-top:44px; }

/* ---------- Author box ----------
   It is the same box the articles already carry inside, and it is the same in
   both places it appears: at the foot of the article and in a writer's card
   on the blog home. The frame and the floats are removed —the floats were
   what made the text sit on top of the photo on some cards and run off to the
   far side on others— and it is laid out as a grid. */
/* At the foot of the article, the photo on the left and the text beside
   it. */
.usls-blog-article #author-info{
  display:grid; grid-template-columns:86px minmax(0,1fr);
  grid-template-areas:"title title" "photo text"; gap:0 28px; align-items:start;
  margin:64px 0 0 !important; padding:30px 0 34px !important;
  border:0 !important; border-top:1px solid var(--usls-blog-line) !important;
  border-bottom:1px solid var(--usls-blog-line) !important;
  background:none !important; box-shadow:none !important;
}
.usls-blog-article #author-info-title,
.usls-blog-bio-out #author-info-title{
  grid-area:title; margin:0 0 22px; font-size:11.5px; font-weight:800;
  letter-spacing:.07em; text-transform:uppercase; color:var(--usls-blog-faint);
}
.usls-blog-article #author-avatar,
.usls-blog-bio-out #author-avatar{
  grid-area:photo; float:none !important; width:auto !important; margin:0 !important;
}
.usls-blog-article #author-avatar img,
.usls-blog-bio-out #author-avatar img{
  display:block; width:86px; height:86px; margin:0; max-width:86px;
  border-radius:50%; object-fit:cover; background:var(--usls-blog-wash);
}
.usls-blog-bio-out #author-avatar img{ width:76px; height:76px; max-width:76px; }

/* A writer's card is stacked: the photo, and the text underneath. These two
   rules have to come AFTER the shared ones above: same specificity and both
   with !important, so the last one wins. Placed before, the margin under the
   photo never applied. */
.usls-blog-bio-out #author-info{ display:block; }
.usls-blog-bio-out #author-avatar{ margin:0 0 14px !important; }
.usls-blog-article #author-description,
.usls-blog-bio-out #author-description{
  grid-area:text; float:none !important; width:auto !important;
  max-width:none !important; margin:0 !important; overflow:visible !important;
}
/* The empty div the block inserts to clear the floats is no longer needed,
   and in a grid it would open an extra row. */
.usls-blog-article #author-info > div:not([id]),
.usls-blog-bio-out #author-info > div:not([id]){ display:none; }
.usls-blog-article #author-name,
.usls-blog-bio-out #author-name{
  margin:0 0 8px !important; font-size:21px !important; line-height:1.25 !important;
  letter-spacing:-.015em; font-weight:700; color:var(--usls-blog-ink);
}
/* No width cap: the biography takes the space it has. Capped at 620px it
   left half the box empty on the right. */
.usls-blog-article #author-description-text,
.usls-blog-bio-out #author-description-text{
  font-size:16.5px; line-height:1.65; color:var(--usls-blog-body);
}

.usls-blog-art__more{ max-width:var(--usls-blog-measure); margin:20px auto 0; }
.usls-blog--post .usls-blog-art__more a{
  font-size:11.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
}

/* ---------- The container decides, not the window ---------- */
@container (max-width:1000px){
  .usls-blog-g3{ gap:40px 10px; }
  .usls-blog-feat{ grid-template-columns:1fr .95fr; }
  .usls-blog-writers{ grid-template-columns:repeat(3,1fr); }
  .usls-blog-part{ flex:0 0 calc(37% - 13px); }
}
@container (max-width:820px){
  .usls-blog-g3{ grid-template-columns:repeat(2,1fr); }
  .usls-blog-feat{ grid-template-columns:1fr; }
  .usls-blog-feat__col{ padding:24px 0 0; }
  .usls-blog-feat__tx{ padding:22px 0 26px; border-left:0; }
  .usls-blog-open{ padding-bottom:48px; }
  .usls-blog-rail{ margin-bottom:38px; }
  .usls-blog-open .usls-blog-eyebrow{ margin-top:42px; }
  .usls-blog-card__title{ font-size:18px; }
  .usls-blog-writers{ grid-template-columns:repeat(3,1fr); }
  .usls-blog-part{ flex:0 0 calc(46% - 13px); }
  .usls-blog-article{ padding: 52px 0 72px; }
  .usls-blog-arthead{ grid-template-columns: 1fr; }
  .usls-blog-arthead__col{ padding: 24px 0 0; }
  .usls-blog-arthead__tx{ padding: 22px 0 26px; border-left: 0; }
  .usls-blog-spot{ padding-bottom:48px; }
  .usls-blog-spot__box{ grid-template-columns:1fr; }
  .usls-blog-spot__col{ padding:26px 0 0; }
  .usls-blog-spot__tx{ padding:24px 0 26px; border-left:0; }
  .usls-blog-spot__t{ font-size:25px; }
}
@container (max-width:560px){
  .usls-blog-g3{ grid-template-columns:1fr; gap:40px 10px; }
  .usls-blog-sec{ padding:38px 0; }
  .usls-blog-card--list .usls-blog-card__link{ grid-template-columns:70px 1fr; gap:14px; }
  .usls-blog-card--list img, .usls-blog-card--list .usls-blog-ph{ width:70px; }
  .usls-blog-writers{ grid-template-columns:repeat(2,1fr); }
  .usls-blog-part{ flex:0 0 calc(70% - 10px); }

  .usls-blog--post{ --usls-blog-measure: 100%; }
  .usls-blog-article{ padding: 34px 0 60px; }
  .usls-blog-arthead{ grid-template-columns: 1fr; }
  .usls-blog-arthead__col{ padding: 20px 0 0; }
  .usls-blog-arthead__tx{ padding: 20px 0 24px; border-left: 0; }
  .usls-blog--post .usls-blog-arthead__t{ font-size: 28px; line-height: 1.14; }
  .usls-blog-arthead__dek{ font-size: 16px; }
  .usls-blog-article .post-content{ margin-top: 32px; }
  .usls-blog-article .fusion-text > p,
  .usls-blog-article .fusion-text > ul,
  .usls-blog-article .fusion-text > ol{ font-size: 17px; }
  .usls-blog-article .fusion-text > h2{ font-size: 23px !important; margin-top: 40px; }
  .usls-blog-article .fusion-text > h3{ font-size: 19px !important; }
  .usls-blog-article #author-info{ grid-template-columns: 64px minmax(0,1fr); gap: 0 18px; }
  .usls-blog-article #author-avatar img{ width: 64px; height: 64px; }

  .usls-blog-rail{ font-size:14px; }

  .usls-blog-topics .usls-blog-row{ gap:10px; align-items:center; }

  /* With the chips hidden, the field takes the whole row. */
  .usls-blog .usls-blog-find__box input[type=search]{ width:100%; }

  .usls-blog-sech{ gap:10px 12px; }
  .usls-blog-pag__nav{ width:100%; justify-content:space-between; gap:12px; }
  .usls-blog-pag__pp{ width:100%; justify-content:flex-end; }
}
@supports not (container-type: inline-size){
  @media (max-width:900px){
    .usls-blog-g3{ grid-template-columns:repeat(2,1fr); }
    .usls-blog-feat{ grid-template-columns:1fr; }
    .usls-blog-feat__col{ padding:24px 0 0; }
    .usls-blog-feat__tx{ padding:22px 0 26px; border-left:0; }
    .usls-blog-writers{ grid-template-columns:repeat(3,1fr); }
    .usls-blog-part{ flex:0 0 calc(44% - 13px); }
  }
  @media (max-width:620px){
    .usls-blog-g3{ grid-template-columns:1fr; }
    .usls-blog-writers{ grid-template-columns:repeat(2,1fr); }
  .usls-blog--post{ --usls-blog-measure: 100%; }
    .usls-blog-article{ padding: 34px 0 60px; }
    .usls-blog-arthead{ grid-template-columns: 1fr; }
    .usls-blog-arthead__col{ padding: 20px 0 0; }
    .usls-blog-arthead__tx{ padding: 20px 0 24px; border-left: 0; }
    .usls-blog--post .usls-blog-arthead__t{ font-size: 28px; line-height: 1.14; }
    .usls-blog-arthead__dek{ font-size: 16px; }
    .usls-blog-article .post-content{ margin-top: 32px; }
    .usls-blog-article .fusion-text > p,
    .usls-blog-article .fusion-text > ul,
    .usls-blog-article .fusion-text > ol{ font-size: 17px; }
    .usls-blog-article .fusion-text > h2{ font-size: 23px !important; margin-top: 40px; }
    .usls-blog-article .fusion-text > h3{ font-size: 19px !important; }
    .usls-blog-article #author-info{ grid-template-columns: 64px minmax(0,1fr); gap: 0 18px; }
    .usls-blog-article #author-avatar img{ width: 64px; height: 64px; }

    .usls-blog-topics .usls-blog-row{ gap:10px; align-items:center; }

    /* With the chips hidden, the field takes the whole row. */
    .usls-blog .usls-blog-find__box input[type=search]{ width:100%; }

    .usls-blog-sech{ gap:10px 12px; }
    .usls-blog-pag__nav{ width:100%; justify-content:space-between; gap:12px; }
    .usls-blog-pag__pp{ width:100%; justify-content:flex-end; }
  }
}
@media (prefers-reduced-motion: reduce){ .usls-blog-track{ scroll-behavior:auto; } }

/* ====================== USLS BLOG — END ================================== */

/* Spacing for the "Latest articles" block on the search page. */
.usls-blog-sech--sep{ margin-top:34px; }