/* Awla theme. Source of truth for the look: Concept Site/index.html. */
:root{
  --white:#ffffff;
  --paper:#f7f6f5;
  --grey-1:#e6e4e2;
  --grey-2:#b8b4b0;
  --grey-3:#6e6a66;
  --black:#111111;
  --pink:#e8a2b4;
  --pink-deep:#c9738d;
  --pink-pale:#f6dfe5;
  --serif:var(--gh-font-heading,"EB Garamond"),"Iowan Old Style",Georgia,serif;
  --sans:var(--gh-font-body,"EB Garamond"),"Iowan Old Style",Georgia,serif;
  --brand:"Playfair Display","EB Garamond",Georgia,serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html,body{overflow-x:hidden}
body{
  background:var(--white);color:var(--black);
  font-family:var(--serif);font-weight:400;font-size:18px;line-height:1.5;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:1040px;margin:0 auto}
.wrap.narrow{max-width:680px}

/* brand mark */
/* one look for header and footer; only the size differs */
.wordmark{
  font-family:var(--brand);font-weight:400;font-style:italic;
  letter-spacing:.08em;line-height:1;color:var(--black);
}
.wordmark span{color:var(--pink-deep)}

/* header */
.site-header{
  position:sticky;top:0;z-index:10;
  background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--grey-1);
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;
}
/* search: header icon button and the full-screen search window (partials/search.hbs).
   Colours change instantly, like the article boxes. */
.nav-search{display:inline-flex;align-items:center;background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}
.nav-search svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.nav-search:hover{color:var(--pink-deep)}
html.search-open{overflow:hidden}
.search{position:fixed;inset:0;z-index:100;background:var(--white);overflow-y:auto;animation:search-in .18s ease}
.search[hidden]{display:none}
@keyframes search-in{from{opacity:0}to{opacity:1}}
.search-panel{max-width:760px;margin:0 auto;padding:24px 20px 80px}
.search-bar{display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--black);padding-bottom:8px}
.search-icon{width:26px;height:26px;flex:none;fill:none;stroke:var(--grey-3);stroke-width:1.5;stroke-linecap:round}
.search-input{flex:1;min-width:0;border:0;outline:0;border-radius:0;background:transparent;font-family:var(--serif);font-size:30px;color:var(--black);padding:6px 0;-webkit-appearance:none;appearance:none}
.search-input::placeholder{color:var(--grey-2)}
.search-input::-webkit-search-cancel-button{display:none}
.search-close{flex:none;background:none;border:0;cursor:pointer;font-family:var(--sans);font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-3)}
.search-close:hover{color:var(--pink-deep)}
.search-status{font-family:var(--sans);font-size:15px;color:var(--grey-3);margin:14px 0 6px;min-height:1.5em}
.search-results{list-style:none}
.search-result a{display:block;padding:18px 16px;margin:0 -16px;border-top:1px solid var(--grey-1)}
.search-result:first-child a{border-top:0}
.search-result .eyebrow{margin-bottom:6px}
.search-result h3{font-weight:400;font-size:24px;line-height:1.2;margin-bottom:6px}
.search-result p{color:var(--grey-3);font-size:17px}
:is(.search-result.is-active, .search-result:hover) a{background:var(--paper)}
:is(.search-result.is-active, .search-result:hover) h3{color:var(--pink-deep)}
:is(.search-result.is-active, .search-result:hover) p{color:var(--black)}
.search mark{background:var(--pink-pale);color:inherit;padding:0 1px}
/* related-terms group: its own labelled block under the exact results, with a Hide/Show switch */
.search-related-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:28px 0 2px;padding-top:14px;border-top:1px solid var(--black);font-family:var(--sans);font-size:15px;color:var(--grey-3)}
.search-related-head b{font-weight:500;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--black)}
.search-related-terms{font-style:italic}
.search-related-toggle{margin-left:auto;background:none;border:0;padding:0;cursor:pointer;font-family:var(--sans);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-3)}
.search-related-toggle:hover{color:var(--pink-deep)}
.search-via{display:block;margin:-2px 0 6px;font-family:var(--sans);font-size:15px;color:var(--grey-3)}
.search-via i{color:var(--pink-deep)}
@media (min-width:720px){.search-panel{padding-top:56px}.search-input{font-size:40px}}

/* 40px on phones so the title and the two top links fit on one row; 52px from 720px up */
.site-header .wordmark{font-size:40px}
.site-nav a{white-space:nowrap}
.site-nav{display:flex;align-items:center;gap:18px;font-family:var(--sans);font-size:15px;font-weight:500;letter-spacing:.04em}
.site-nav ul{list-style:none;display:flex;gap:18px}
/* sign-in / account icon: same size and colour as the search icon; filled when a member is signed in */
.site-nav .nav-signin{display:inline-flex;align-items:center;color:inherit}
.nav-signin svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.nav-signin.is-member svg{fill:currentColor}
.site-nav .nav-signin:hover{color:var(--pink-deep)}

/* photo treatment */
.photo{position:relative;overflow:hidden;background:var(--grey-1)}
.photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.photo::after{content:"";position:absolute;inset:0;background:var(--pink);mix-blend-mode:multiply;opacity:.55}
.photo.plain::after{opacity:0}

/* hero */
.hero{padding:56px 20px 40px}
.eyebrow{
  font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--grey-3);margin-bottom:18px;
}
.hero h1{font-weight:400;font-size:44px;line-height:1.05;letter-spacing:-.01em;margin-bottom:22px}
.hero h1 em{font-style:italic;font-weight:400;color:var(--pink-deep)}
.hero-phrase{white-space:nowrap}
/* "read for practitioners" stays on one line: on a narrow screen the whole title shrinks until it fits
   (the old "read for practitioners." measured 7.84em in EB Garamond; 8.2 leaves a margin) */
.hero h1{font-size:min(44px, calc((100vw - 40px) / 8.2))}
.hero p{color:var(--grey-3);max-width:32ch;margin-bottom:28px}
.btn{
  display:inline-block;font-family:var(--sans);font-size:15px;font-weight:500;letter-spacing:.04em;
  padding:14px 22px;border:1px solid var(--black);border-radius:999px;background:transparent;color:var(--black);cursor:pointer;
}
.btn.solid{background:var(--black);color:var(--white)}
.btn + .btn{margin-left:8px}
.hero-photo{height:300px;margin:36px -20px 0}

/* sections */
section{padding:56px 20px}
h2{font-weight:400;font-size:30px;line-height:1.15;letter-spacing:-.01em;margin-bottom:14px}
.lede{color:var(--grey-3);margin-bottom:28px;max-width:34ch}

/* proof table */
.proof{background:var(--paper);padding:56px 20px}
.table{background:var(--white);border:1px solid var(--grey-1);font-family:var(--sans);font-size:15px}
.table .row{display:grid;grid-template-columns:1fr auto;gap:12px;padding:14px 16px;border-top:1px solid var(--grey-1)}
.table .row:first-child{border-top:0;background:var(--paper);color:var(--grey-3);font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.table .row b{font-weight:500}
.table .num{font-variant-numeric:tabular-nums;text-align:right}
.tag{display:inline-block;font-family:var(--sans);font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:3px 7px;border-radius:999px;background:var(--pink-pale);color:var(--pink-deep);margin-left:8px;vertical-align:middle}
.tag.grey{background:var(--grey-1);color:var(--grey-3)}
.caption{font-family:var(--sans);font-size:14px;color:var(--grey-3);margin-top:12px}

/* products */
.products{display:grid;gap:36px}
.product .photo{height:200px;margin-bottom:18px}
.product h3{font-weight:400;font-size:24px;margin-bottom:8px}
.product p{color:var(--grey-3);font-size:17px}
.product .k{font-family:var(--sans);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--pink-deep);margin-bottom:10px}

/* pull quote */
.quote{background:var(--black);color:var(--white);padding:64px 20px}
.quote blockquote{font-size:28px;line-height:1.2;font-weight:400;font-style:italic}
.quote blockquote strong{font-style:normal;font-weight:400;color:var(--pink)}
.quote cite{display:block;font-family:var(--sans);font-style:normal;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-2);margin-top:22px}

/* post list */
.post-list{display:grid;gap:28px}
/* flex column so the link stretches to the full box height, even when a grid row is taller than this card */
.post-card{border-top:1px solid var(--grey-1);display:flex;flex-direction:column}
.card-link{display:block;flex:1 1 auto;padding-top:20px}
.post-card h3{font-weight:400;font-size:24px;margin-bottom:8px}
.post-card p{color:var(--grey-3);font-size:17px}
.post-card .eyebrow{margin-bottom:10px}
.more{margin-top:32px}
.pagination{display:flex;justify-content:space-between;margin-top:36px;font-family:var(--sans);font-size:15px;color:var(--grey-3)}

/* pricing */
.plans{display:grid;gap:14px}
.plan{border:1px solid var(--grey-1);padding:24px 20px}
.plan.feature{border-color:var(--black)}
.plan .k{font-family:var(--sans);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey-3);margin-bottom:8px}
.plan .price{font-size:38px;font-weight:400;line-height:1}
.plan .price small{font-family:var(--sans);font-size:14px;color:var(--grey-3);margin-left:6px}
.plan ul{list-style:none;margin:16px 0 20px;font-size:16px;color:var(--grey-3)}
.plan li{padding:6px 0;border-top:1px solid var(--grey-1)}
.plan li::before{content:"\2014  ";color:var(--pink-deep)}
.plan-note{font-size:16px;font-style:italic;color:var(--grey-3)}
/* the "Coming later" box on About: greyed out on purpose, nothing specific promised */
.plan.is-muted{background:var(--paper);border-color:var(--grey-1);color:var(--grey-3)}
.plan.is-muted .k{color:var(--grey-2)}
.plan-coming{font-size:24px;line-height:1.2;font-style:italic;color:var(--grey-3);margin:4px 0 16px}
.plan-link{font-family:var(--sans);font-size:15px;color:var(--grey-3);border-bottom:1px solid var(--grey-2);padding-bottom:1px}
.plan-link:hover{color:var(--pink-deep);border-bottom-color:var(--pink-deep)}

/* newsletter */
.signup{background:var(--pink-pale);padding:56px 20px}
.signup form{display:grid;gap:10px;margin-top:20px}
.signup input{font-family:var(--sans);font-size:17px;padding:14px 16px;border:1px solid var(--grey-2);background:var(--white);border-radius:0;width:100%}
.signup .btn{text-align:center}
/* bottom sign-up box: heading and text each on one line from 720px up; the heading shrinks with the window
   so it still fits (about 22em of Garamond); phones wrap as normal */
@media (min-width:720px){
  .signup h2,.signup .lede{white-space:nowrap;max-width:none}
  .signup h2{font-size:min(30px, calc(min(100vw - 80px, 1040px) / 22))}
}
.form-note{display:none;font-family:var(--sans);font-size:15px;color:var(--grey-3);grid-column:1/-1}
.success .form-note[data-members-success]{display:block}
.error .form-note[data-members-error]{display:block}

/* single post / page */
/* :not(.post-card): Ghost gives post cards class "post" too, and this padding was eating their clickable edge */
.post:not(.post-card){padding:56px 20px}
.post-title{font-weight:400;font-size:40px;line-height:1.1;letter-spacing:-.01em;margin-bottom:18px}
/* the grey box is a pseudo-element so it can drift behind the words on scroll (--c comes from animations.js) */
.post .lede{max-width:none;position:relative;isolation:isolate;padding:20px 24px;margin:0 0 32px}
.post .lede::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--paper);translate:0 calc(clamp(-.6, var(--c,0), .6) * 32px)}
.post-photo{height:320px;margin:28px 0}
.gh-content{font-size:19px;line-height:1.6}
.gh-content > *{margin-bottom:1.2em}
.gh-content h2{font-size:28px;margin-top:1.6em}
.gh-content h3{font-weight:400;font-size:22px;margin-top:1.4em}
.gh-content a{border-bottom:1px solid var(--pink);padding-bottom:1px}
.gh-content blockquote{border-left:2px solid var(--pink-deep);padding-left:18px;color:var(--grey-3);font-style:italic}
.gh-content ul,.gh-content ol{padding-left:1.3em}
.gh-content table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:16px}
.gh-content th,.gh-content td{border-top:1px solid var(--grey-1);padding:10px 8px;text-align:left;vertical-align:top}
.gh-content th{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-3);font-weight:500}
.gh-content hr{border:0;border-top:1px solid var(--grey-1);margin:2em 0}
.gh-content pre{font-size:14px;background:var(--paper);padding:16px;overflow-x:auto}
.gh-content code{font-size:.9em;background:var(--paper);padding:1px 4px}
.gh-content img{width:100%}
.kg-width-wide{position:relative;width:min(1040px,92vw);left:50%;transform:translateX(-50%)}
.kg-width-full{position:relative;width:100vw;left:50%;transform:translateX(-50%)}
.kg-width-full img{width:100%}
.post-meta{margin-top:40px;border-top:1px solid var(--grey-1);padding-top:16px}
/* newsletter sign-up at the end of an article: the home page's pink sign-up block, sized for the article column */
.post-signup{margin-top:48px;padding:28px 24px}
.post-signup-name{font-family:var(--brand);font-style:italic;font-size:28px;letter-spacing:.04em;line-height:1.1;margin-bottom:8px}
/* not "lede": inside an article that class draws the summary's grey box */
.post-signup-text{margin:0;color:var(--grey-3)}
.post-signup form{margin-top:16px}
@media (min-width:720px){.post-signup form{grid-template-columns:1fr auto}.post-signup .form-note{grid-column:1/-1}}

/* members-only fade */
.gh-post-upgrade-cta{background:var(--pink-pale);padding:32px 24px;text-align:center;font-family:var(--sans);font-size:17px}

/* footer */
.site-footer{padding:40px 20px 48px;border-top:1px solid var(--grey-1);font-family:var(--sans);font-size:14px;color:var(--grey-3)}
.site-footer .wordmark{display:inline-block;font-size:30px;margin-bottom:14px}
.site-footer p{margin-bottom:8px}
/* the theme's links and Ghost's secondary navigation are two lists: lay them side by side as one row */
.site-footer nav{margin:18px 0;display:flex;flex-wrap:wrap;gap:16px}
.site-footer nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:16px}

/* larger screens */
@media (min-width:720px){
  body{font-size:19px}
  .hero{padding:96px 40px 56px;max-width:1040px;margin:0 auto}
  .hero h1{font-size:min(72px, calc(min(100vw - 80px, 1040px) / 8.2));max-width:none}
  .hero-photo{height:460px;margin:56px -40px 0}
  section,.proof,.signup,.quote,.post:not(.post-card),.site-footer{padding-left:40px;padding-right:40px}
  .products{grid-template-columns:repeat(3,1fr);gap:28px}
  .plans{grid-template-columns:repeat(2,1fr)}
  .quote blockquote{font-size:40px;max-width:24ch}
  .signup form{grid-template-columns:1fr auto}
  .post-title{font-size:56px}
  .post-photo{height:420px}
}

/* ---- v0.2: feed front page, sections nav ---- */
.site-header{display:block;padding:0}
.masthead{display:flex;align-items:center;justify-content:space-between;padding:14px 20px}
.sections{display:flex;gap:18px;overflow-x:auto;white-space:nowrap;padding:0 20px 12px;font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-3);scrollbar-width:none}
.sections::-webkit-scrollbar{display:none}
.sections a{padding-bottom:4px;border-bottom:1px solid transparent}
.sections a.current,.sections a:hover{color:var(--black);border-bottom-color:var(--pink-deep)}
/* section menu. Only screens that can hover hide it behind "Judgments"; touch screens always show it.
   The menu box ignores the mouse, so only "Judgments" or a visible link can open it. On leaving, the links
   wait a moment before fading, so the mouse can cross from "Judgments" to a link without the menu closing. */
/* The links and the breadcrumb share one grid cell, so the breadcrumb can stand in the links' place, and
   baseline alignment keeps "JUDGMENTS", "|" and "COMMERCIAL" on exactly the same line of text. */
.sections{align-items:baseline}
.sections-rest{display:grid;grid-template-columns:minmax(0,auto);align-items:baseline}
.sections-rest.has-crumb{min-width:0}
.sections-menu,.sections-crumb{grid-area:1/1}
.sections-menu{display:flex;gap:18px}
/* section page breadcrumb: "| COMMERCIAL  Companies, insolvency, ..." on one line; a narrow screen ends it with "…" */
.sections-crumb{display:flex;align-items:baseline;white-space:nowrap;min-width:0}
.crumb-sep{color:var(--grey-2);margin-right:18px}
.crumb-desc{margin-left:18px;min-width:0;overflow:hidden;text-overflow:ellipsis;font-style:italic;font-weight:400;font-size:16px;letter-spacing:0;text-transform:none;color:var(--grey-3)}
@media (hover:hover){
  .sections-menu{pointer-events:none}
  .sections-menu a{
    pointer-events:auto;opacity:0;translate:-16px 0;visibility:hidden;
    transition:opacity .25s ease .25s,translate .25s ease .25s,visibility 0s linear .5s;
  }
  /* open: "Judgments" hovered, a visible link hovered, or keyboard focus in the menu */
  :is(.sections-root:hover + .sections-rest .sections-menu, .sections-menu:hover, .sections:has(a:focus-visible) .sections-menu) a{
    opacity:1;translate:0 0;visibility:visible;
    transition:opacity .35s ease calc(var(--i,0) * 45ms),translate .5s cubic-bezier(.2,.7,.2,1) calc(var(--i,0) * 45ms),visibility 0s;
  }
  /* the breadcrumb sits over the closed menu and steps aside while the menu is open */
  .sections-crumb{transition:opacity .25s ease .3s,visibility 0s linear .3s}
  :is(.sections-root:hover + .sections-rest, .sections:has(a:focus-visible)) .sections-crumb,
  .sections-menu:hover + .sections-crumb{opacity:0;visibility:hidden;transition:opacity .15s ease,visibility 0s linear .15s}
}
/* touch screens cannot hover: a section page shows its breadcrumb instead of the links */
@media (hover:none){
  .sections-rest.has-crumb .sections-menu{display:none}
}

/* phone menu (under 720px, assets/js/menu.js): a three-line button opens a panel of sections under the header.
   The sideways section row goes: the home page shows no row, a section page keeps "JUDGMENTS | COMMERCIAL". */
.nav-menu,.mobile-menu,.menu-backdrop{display:none}
/* no blue flash box when a phone taps the header icons */
.nav-menu,.nav-search,.nav-signin,.mm-item{-webkit-tap-highlight-color:transparent}
@keyframes mm-in{from{opacity:0;translate:-14px 0}to{opacity:1;translate:0 0}}
@media (max-width:719px){
  .nav-menu{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:22px;height:22px;background:none;border:0;padding:0;cursor:pointer;color:inherit}
  .nav-menu span{display:block;width:22px;height:1.6px;border-radius:1px;background:currentColor;transition:transform .25s ease,opacity .2s ease}
  .menu-open .nav-menu span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
  .menu-open .nav-menu span:nth-child(2){opacity:0}
  .menu-open .nav-menu span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}
  .sections .sections-menu{display:none}
  .sections:not(:has(.has-crumb)){display:none}
  .crumb-desc{display:none}
  .mobile-menu:not([hidden]){display:block;position:absolute;left:0;right:0;top:100%;z-index:30;background:var(--white);
    border-bottom:1px solid var(--grey-1);box-shadow:0 18px 40px rgba(17,17,17,.08);
    max-height:calc(100dvh - var(--menu-top,72px));overflow-y:auto;overscroll-behavior:contain;padding:4px 20px 16px}
  .menu-backdrop:not([hidden]){display:block;position:fixed;inset:0;z-index:5;background:rgba(17,17,17,.18)}
  html.menu-open{overflow:hidden}
  .mm-item{display:block;padding:14px 0;border-top:1px solid var(--grey-1)}
  .mm-item:first-child{border-top:0}
  .mm-name{display:block;font-family:var(--sans);font-size:15px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--black)}
  .mm-desc{display:block;margin-top:4px;font-style:italic;font-size:16px;line-height:1.35;color:var(--grey-3)}
  .mm-item.current .mm-name{color:var(--pink-deep)}
  .mm-item:active{background:var(--paper)}
  /* items float in from the left, one after another */
  .mobile-menu:not([hidden]) .mm-item{animation:mm-in .4s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,-1) * 35ms + 35ms)}
}
@media (prefers-reduced-motion:reduce){
  .mobile-menu .mm-item{animation:none !important}
  .nav-menu span{transition:none}
}
.strap{padding:40px 20px 8px}
.strap-line{font-size:30px;line-height:1.1;font-weight:400;letter-spacing:-.01em;margin-bottom:10px}
.strap-line em{font-style:italic;color:var(--pink-deep)}
.strap-sub{color:var(--grey-3);font-size:17px}
.strap-sub a{color:var(--pink-deep)}
.feed{padding-top:32px}
.post-list.grid{gap:0}
.post-card.is-lead{border-top:0;background:var(--paper);margin-bottom:36px}
.post-card.is-lead .card-link{padding:28px 24px}
.post-card.is-lead h3{font-size:34px;line-height:1.1}
.post-card.is-lead p{font-size:18px}
.card-photo{height:220px;margin-bottom:16px}
.post-card.is-lead .card-photo{height:320px}
.section-chip{color:var(--pink-deep)}
.section-index{background:var(--paper)}
/* home "Sections": one row that scrolls sideways, snapping each box to the left edge. The row bleeds into the
   section's side padding so boxes slide out past the text column; a soft fade marks the side with more boxes. */
.section-index-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.section-row{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  scroll-padding-left:20px;margin:0 -20px;padding:4px 20px 18px;scrollbar-width:none;outline:0}
.section-row::-webkit-scrollbar{display:none}
.section-row:focus-visible{box-shadow:inset 0 0 0 1px var(--pink-deep)}
.section-row .section-card{flex:0 0 78%;scroll-snap-align:start}
/* the left fade is only as wide as the row's side padding (--fade-left), so it never softens the box that has
   just snapped to the left edge; the right fade is wider, to hint at the next box */
.section-row{--fade-left:20px}
.section-row.can-right{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent)}
.section-row.can-left{-webkit-mask-image:linear-gradient(to right,transparent,#000 var(--fade-left));mask-image:linear-gradient(to right,transparent,#000 var(--fade-left))}
.section-row.can-left.can-right{-webkit-mask-image:linear-gradient(to right,transparent,#000 var(--fade-left),#000 calc(100% - 56px),transparent);mask-image:linear-gradient(to right,transparent,#000 var(--fade-left),#000 calc(100% - 56px),transparent)}
.row-arrows{display:none;gap:8px;margin-bottom:14px}
.row-arrow{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;border:1px solid var(--grey-2);background:var(--white);color:var(--black);cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent}
.row-arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.row-arrow:hover:not(:disabled){border-color:var(--pink-deep);color:var(--pink-deep)}
.row-arrow:disabled{opacity:.35;cursor:default}
@media (min-width:720px){
  .section-row{gap:16px;margin:0 -40px;padding:4px 40px 18px;scroll-padding-left:40px;--fade-left:40px}
  .section-row .section-card{flex-basis:300px}
}
@media (min-width:720px) and (hover:hover){.row-arrows{display:flex}}
.section-card{display:block;background:var(--white);border:1px solid var(--grey-1);padding:18px 18px 16px}
.section-card .k{font-family:var(--sans);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--pink-deep);margin-bottom:8px}
.section-card p{color:var(--grey-3);font-size:16px;margin-bottom:10px}
.section-card .count{font-family:var(--sans);font-size:14px;color:var(--grey-2)}
@media (min-width:720px){
  .masthead{padding:14px 40px}
  .site-header .wordmark{font-size:52px}
  .sections{padding:0 40px 12px;gap:26px}
  .sections-menu{gap:26px}
  .crumb-sep{margin-right:26px}
  .strap{padding:64px 40px 8px;max-width:1040px;margin:0 auto}
  /* desktop: the tagline is always one line. The size shrinks with the window so it still fits
     (about 23.5em of Garamond for "Leading judgments from Maltese courts and tribunals."); phones may wrap. */
  .strap-line{white-space:nowrap;font-size:min(44px, calc((min(100vw, 1040px) - 80px) / 23.5))}
  .post-list.grid{grid-template-columns:repeat(3,1fr);gap:0 28px}
  .post-card.is-lead .card-link{padding:44px 48px}
  .post-card.is-lead h3{font-size:48px}
}

/* animations (js/animations.js). "translate" not "transform", so wide Koenig cards keep their own transform. */
.anim :is(.strap,.post-card,.section-index h2,.section-card,.signup .wrap,.post > .wrap > .eyebrow,.post-title,.post .lede,.post-photo,.gh-content > *,.proof,.product,.plan,.quote,.hero){
  transition:opacity .7s ease,translate .7s cubic-bezier(.2,.7,.2,1),border-color .25s ease;
}
.anim :is(.strap,.post-card,.section-index h2,.section-card,.signup .wrap,.post > .wrap > .eyebrow,.post-title,.post .lede,.post-photo,.gh-content > *,.proof,.product,.plan,.quote,.hero):not(.is-in){
  opacity:0;translate:0 16px;
}
/* highlighter behind the pink phrase on the front page: sweeps in on load (--sweep),
   then the band thickens behind the words as the reader scrolls down (--c) */
@property --sweep{syntax:"<percentage>";inherits:false;initial-value:100%}
/* also the About title's highlighted phrase (.hero h1 em), so both pages share one look */
:is(.strap-line, .hero h1) em{
  --sweep:100%;
  background-image:linear-gradient(var(--pink-pale),var(--pink-pale));background-repeat:no-repeat;
  background-position:0 90%;
  background-size:var(--sweep) calc(.3em + clamp(0, (var(--c,0) * -1 - .2) * 1.6, 1) * .75em);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  transition:--sweep 1.1s cubic-bezier(.2,.7,.2,1) .5s;
}
.anim .strap:not(.is-in) .strap-line em,.anim .hero:not(.is-in) h1 em{--sweep:0%}
/* pink rule under article headings: drawn in on arrival, longest while the heading sits mid-screen (--near) */
.gh-content h2::after{content:"";display:block;width:120px;height:1px;margin-top:10px;background:var(--pink-deep);transform-origin:0 50%;transform:scaleX(calc(.33 + var(--near,0) * .67));transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.anim .gh-content h2:not(.is-in)::after{transform:scaleX(0)}
/* reading progress on article pages */
.read-progress{position:fixed;top:0;left:0;right:0;height:2px;background:var(--pink-deep);transform-origin:0 50%;transform:scaleX(0);z-index:50;pointer-events:none}
/* hover */
.section-card:hover{border-color:var(--pink)}
/* article box hover. JS sets .is-hover from the pointer position, also while the page scrolls under a
   still mouse (Chrome's own :hover waits for scrolling to stop). Without JS, plain :hover does the same.
   Colours change instantly (no transition); only the float moves. */
.post-card:not(.is-lead) .card-link{padding:20px 16px 24px}
:is(.post-card.is-hover, html:not(.hover-js) .post-card:hover):not(.is-lead){background:var(--paper)}
:is(.post-card.is-hover, html:not(.hover-js) .post-card:hover).is-lead{background:#efedeb}
:is(.post-card.is-hover, html:not(.hover-js) .post-card:hover) h3{color:var(--pink-deep)}
:is(.post-card.is-hover, html:not(.hover-js) .post-card:hover) p{color:var(--black)}
/* float: on hover the words lift off the box; on the lead card they also drift with scroll (up to 24px) */
.card-body{transition:transform .45s cubic-bezier(.2,.7,.2,1);will-change:transform}
:is(.post-card.is-hover, html:not(.hover-js) .post-card:hover) .card-body{transform:translateY(-10px)}
.post-card.is-lead .card-body{translate:0 calc(clamp(-.6, var(--c,0), .6) * -40px)}
@media (prefers-reduced-motion:reduce){
  .strap-line em,.gh-content h2::after{transition:none}
  .card-body{transition:none;transform:none !important}
}