/* =============================================================
   alimony.lol - content.css

   Layout and components for the case pages, court hubs, the
   casebook and the guides. Loaded on top of styles.css, which
   owns the palette, the type scale and the calculator.

   Three things this file has to get right, because the first
   version of it got all three wrong:

   1. Alignment. Everything on the page hangs off one container.
      The breadcrumb used to sit outside it and ran flush to the
      viewport edge while the heading below was inset.
   2. Navigation on small screens. styles.css hides .nav below
      760px and hands over to a hamburger that only exists on the
      homepage, so these pages had no navigation at all on a
      phone. The nav here is its own component and never hides.
   3. The measure. A 46rem column left-aligned inside a 1180px
      container leaves half the screen empty on a laptop. The
      column is centred now, and on wide screens the space on the
      right carries a sticky rail instead of nothing.
   ============================================================= */

/* ---------- Skip link ----------------------------------------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--paper);
  padding: .7rem 1.1rem; font: 600 .85rem/1 var(--sans);
}
.skip:focus { left: .5rem; top: .5rem; }

/* ---------- The one container everything hangs off ------------ */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gap);
}

/* ---------- Header -------------------------------------------
   Self-contained. Deliberately does not reuse .nav from
   styles.css, which is display:none under 760px.
   -------------------------------------------------------------- */
.chead {
  position: sticky; top: 0; z-index: 60;
  background: rgba(244, 239, 230, .93);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
}
.chead__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: 13px;
}
.chead__brand {
  display: inline-flex; align-items: baseline; gap: .42rem;
  font: 400 1.32rem/1 var(--serif); color: var(--ink);
  text-decoration: none; white-space: nowrap;
}
.chead__brand:hover { color: var(--court-red); }
.chead__mark { color: var(--court-red); font-size: 1.15em; }
.chead__dot { color: var(--court-red); }

.cnav {
  display: flex; align-items: center; gap: 1.35rem;
  font: 500 .78rem/1 var(--sans);
  letter-spacing: .05em; text-transform: uppercase;
  min-width: 0;
}
.cnav a {
  color: var(--ink-mute); text-decoration: none; white-space: nowrap;
  padding-block: .35rem;
  border-bottom: 1.5px solid transparent;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.cnav a:hover, .cnav a[aria-current="page"] {
  color: var(--court-red); border-bottom-color: var(--court-red);
}
.cnav a.cnav__cta {
  background: var(--court-red); color: #F7EEE7;
  padding: .5rem .8rem; border-radius: var(--radius); border-bottom: none;
}
.cnav a.cnav__cta:hover { background: var(--court-red-dk); color: #fff; }

/* ---------- Hamburger ----------------------------------------
   Hidden above 760px, where the links sit inline. Below it, the
   links collapse into a panel and this is the only control.
   -------------------------------------------------------------- */
.chead__burger {
  display: none;
  position: relative; width: 42px; height: 38px; flex: none;
  background: none; border: 1px solid transparent; border-radius: var(--radius);
  cursor: pointer; padding: 0;
}
.chead__burger:hover { border-color: var(--hairline); }
.chead__burger:focus-visible { outline: 2px solid var(--court-red); outline-offset: 2px; }
.chead__bar {
  position: absolute; left: 11px; width: 20px; height: 2px;
  background: var(--ink); border-radius: 2px;
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.chead__bar:nth-child(1) { top: 12px; }
.chead__bar:nth-child(2) { top: 18px; }
.chead__bar:nth-child(3) { top: 24px; }
.chead__burger[aria-expanded="true"] .chead__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.chead__burger[aria-expanded="true"] .chead__bar:nth-child(2) { opacity: 0; }
.chead__burger[aria-expanded="true"] .chead__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 760px) {
  .chead__burger { display: block; }
  .chead__brand { font-size: 1.18rem; }

  /* The panel. Anchored under the sticky header, full width, and
     closed by default so it costs nothing until it is opened. */
  .cnav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--hairline);
    box-shadow: 0 14px 30px -22px rgba(24,22,19,.8);
    padding: .3rem var(--gap) .8rem;
    font-size: .82rem;

    /* Collapsed rather than display:none, so the open transition has
       something to animate from. */
    max-height: 0; overflow: hidden; opacity: 0;
    visibility: hidden; pointer-events: none;
    transition: max-height var(--t-med) var(--ease),
                opacity var(--t-fast) var(--ease),
                visibility 0s linear var(--t-med);
  }
  .cnav.is-open {
    max-height: 26rem; opacity: 1;
    visibility: visible; pointer-events: auto;
    transition: max-height var(--t-med) var(--ease),
                opacity var(--t-fast) var(--ease),
                visibility 0s;
  }
  .cnav a {
    padding: .85rem .2rem;
    border-bottom: 1px solid var(--hairline);
    border-left: none;
  }
  .cnav a:last-of-type { border-bottom: none; }
  .cnav a:hover, .cnav a[aria-current="page"] { border-bottom-color: var(--hairline); }
  .cnav a.cnav__cta {
    margin-top: .7rem; text-align: center;
    padding: .85rem 1rem; border-bottom: none;
  }

  /* The header has to establish the containing block for the panel. */
  .chead__inner { position: relative; }
  body.nav-open { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .cnav, .chead__bar { transition: none; }
}

/* ---------- Breadcrumb ---------------------------------------- */
.crumbs {
  font: 500 .72rem/1.5 var(--sans);
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-mute);
  padding-block: 1.05rem .2rem;
}
.crumbs ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem;
}
.crumbs li { display: flex; align-items: baseline; gap: .5rem; min-width: 0; }
.crumbs li:not(:last-child)::after { content: "/"; color: var(--hairline); }
.crumbs a {
  color: var(--ink-mute); text-decoration: none;
  border-bottom: 1px solid transparent;
}
.crumbs a:hover { color: var(--court-red); border-bottom-color: currentColor; }
/* The last crumb is the page title and can be very long. Truncate it
   rather than letting it wrap into three lines on a phone. */
.crumbs li:last-child {
  color: var(--ink-soft); max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- Page layout --------------------------------------- */
.layout {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 2.4rem; align-items: start;
  padding-bottom: 3.5rem;
}
.col { min-width: 0; max-width: 44rem; }
/* Hubs are a table first and an article second, so their column runs the
   full width of the container and the prose gets its own measure inside. */
.col--wide { max-width: none; }
.measure { max-width: 44rem; }
/* Centre the reading column until there is room for the rail. */
@media (min-width: 700px) and (max-width: 1059px) {
  .col { margin-inline: auto; }
}
@media (min-width: 1060px) {
  .layout { grid-template-columns: minmax(0, 1fr) 18.5rem; gap: 3.4rem; }
  .layout--solo { grid-template-columns: minmax(0, 1fr); }
  .layout--solo .col { margin-inline: auto; }
}
/* Tables and figures may run wider than the prose measure. */
.col > .bleed { width: 100%; }
@media (min-width: 1060px) {
  .col > .bleed { width: calc(100% + 4rem); margin-left: -2rem; }
  .layout--solo .col > .bleed { width: 100%; margin-left: 0; }
}

/* ---------- Sticky rail --------------------------------------- */
.rail { display: none; }
@media (min-width: 1060px) {
  .rail { display: block; position: sticky; top: 4.9rem; }
}
.rail__card {
  border: 1px solid var(--hairline);
  background: var(--paper-deep);
  border-radius: var(--radius);
  padding: 1.05rem 1.1rem;
  margin-bottom: 1rem;
}
.rail__card--accent {
  background: var(--court-red); border-color: var(--court-red-dk); color: #F3E6DE;
}
.rail__k {
  font: 600 .66rem/1 var(--sans); letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-mute); margin: 0 0 .7rem;
}
.rail__card--accent .rail__k { color: rgba(243,230,222,.72); }
.rail__card--accent p { color: #F3E6DE; }
.rail__lead { font: 400 .96rem/1.5 var(--serif); margin: 0 0 .9rem; }
.rail__btn {
  display: block; text-align: center; text-decoration: none;
  background: var(--paper); color: var(--court-red-dk);
  font: 600 .84rem/1 var(--sans);
  padding: .72rem .9rem; border-radius: var(--radius);
}
.rail__btn:hover { background: #fff; }
.rail dl { margin: 0; font-size: .84rem; }
.rail dt {
  font: 600 .66rem/1 var(--sans); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: .22rem;
}
.rail dd {
  margin: 0 0 .85rem; font: 400 .95rem/1.35 var(--serif); color: var(--ink);
}
.rail dd:last-child { margin-bottom: 0; }
.rail__links { list-style: none; margin: 0; padding: 0; }
.rail__links li { margin-bottom: .55rem; }
.rail__links a {
  font: 400 .89rem/1.4 var(--sans); color: var(--court-red); text-decoration: none;
}
.rail__links a:hover { text-decoration: underline; }

/* ---------- Hero ---------------------------------------------- */
.phero { padding: .9rem 0 1.6rem; margin-bottom: 1.8rem; border-bottom: 1px solid var(--hairline); }
.phero__kicker {
  font: 600 .71rem/1.4 var(--sans); letter-spacing: .13em;
  text-transform: uppercase; color: var(--court-red); margin: 0 0 .7rem;
}
.phero__title {
  font: 400 clamp(1.8rem, 4vw, 2.7rem)/1.14 var(--serif);
  color: var(--ink); margin: 0 0 .75rem; letter-spacing: -.012em;
  overflow-wrap: break-word;
}
.phero__standfirst {
  font: 300 clamp(1rem, 1.5vw, 1.14rem)/1.62 var(--serif);
  color: var(--ink-soft); margin: 0;
}
.phero__meta {
  display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: 1.05rem;
  font: 500 .76rem/1.5 var(--mono); color: var(--ink-mute);
}
.phero__meta span { display: inline-flex; align-items: center; gap: .42rem; }
.phero__meta span::before {
  content: ""; width: 4px; height: 4px; background: var(--gold);
  border-radius: 50%; flex: none;
}
.phero--hub { border-bottom: none; padding-bottom: .8rem; }
.phero--guide {
  background: var(--paper-deep); border: 1px solid var(--hairline);
  border-left: 3px solid var(--court-red);
  padding: 1.6rem clamp(1.1rem, 2.6vw, 2rem);
  margin-bottom: 2rem; border-radius: var(--radius);
}

/* ---------- Calculator call to action ------------------------- */
.cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.1rem;
  background: var(--court-red); color: #F6ECE4;
  padding: 1rem 1.2rem; border-radius: var(--radius);
  margin: 0 0 1.8rem;
  box-shadow: 0 1px 0 var(--court-red-dk), 0 12px 26px -20px rgba(90,20,20,.9);
}
.cta__text { flex: 1 1 15rem; margin: 0; font: 400 .97rem/1.5 var(--serif); min-width: 0; }
.cta__text b { font-weight: 600; }
.cta__btn {
  flex: 0 0 auto; display: inline-block; text-decoration: none;
  background: var(--paper); color: var(--court-red-dk);
  font: 600 .85rem/1 var(--sans); letter-spacing: .015em;
  padding: .76rem 1.15rem; border-radius: var(--radius);
  border: 1px solid rgba(0,0,0,.1);
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.cta__btn:hover { background: #fff; transform: translateY(-1px); }
.cta--inline {
  background: var(--paper-deep); color: var(--ink-soft);
  border: 1px solid var(--hairline); border-left: 3px solid var(--court-red);
  box-shadow: none;
}
.cta--inline .cta__btn { background: var(--court-red); color: #F6ECE4; border-color: var(--court-red-dk); }
.cta--inline .cta__btn:hover { background: var(--court-red-dk); color: #fff; }
.cta--end { margin: 2.4rem 0 0; }

/* ---------- Verdict panel ------------------------------------- */
.facts {
  border: 1px solid var(--hairline); border-top: 2px solid var(--rule);
  background: var(--paper-deep);
  padding: 1.25rem clamp(1rem, 2.2vw, 1.5rem);
  margin: 0 0 1.8rem; border-radius: var(--radius);
}
.facts__grid {
  display: grid; gap: 1rem 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
}
.facts__k {
  font: 600 .67rem/1 var(--sans); letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-mute); margin: 0 0 .38rem;
}
.facts__v { font: 400 1.24rem/1.2 var(--serif); color: var(--ink); margin: 0; }
.facts__v small {
  display: block; font: 400 .78rem/1.4 var(--sans);
  color: var(--ink-mute); margin-top: .28rem;
}
.facts__v--money { font-family: var(--mono); font-size: 1.12rem; font-weight: 500; }
.facts__v a { color: var(--court-red); text-decoration: none; border-bottom: 1px solid var(--court-red-tint); }
.facts__v a:hover { border-bottom-color: var(--court-red); }

/* ---------- Inflation panel ----------------------------------- */
.infl {
  border: 1px solid var(--gold-soft);
  background: linear-gradient(180deg, rgba(199,169,116,.15), rgba(199,169,116,.05));
  padding: 1.2rem clamp(1rem, 2.2vw, 1.5rem);
  margin: 1.8rem 0; border-radius: var(--radius);
}
.infl__label {
  font: 600 .69rem/1 var(--sans); letter-spacing: .13em;
  text-transform: uppercase; color: #6E5624; margin: 0 0 .9rem;
}
.infl__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem .8rem; }
.infl__then, .infl__now { font: 500 clamp(1.1rem, 3.2vw, 1.45rem)/1.15 var(--mono); }
.infl__then { color: var(--ink-mute); text-decoration: line-through; text-decoration-thickness: 1px; }
.infl__arrow { color: var(--gold); }
.infl__now { color: var(--court-red); }
.infl__mult {
  font: 600 .72rem/1 var(--sans); letter-spacing: .05em;
  background: var(--gold); color: #2A1F09;
  padding: .3rem .5rem; border-radius: 2px; white-space: nowrap;
}
.infl__note { font: 400 .86rem/1.62 var(--sans); color: var(--ink-mute); margin: .85rem 0 0; }
.infl__note a { color: var(--court-red); }

/* ---------- Prose --------------------------------------------- */
.prose > :first-child { margin-top: 0; }
.prose h2 {
  font: 400 clamp(1.35rem, 2.4vw, 1.7rem)/1.28 var(--serif);
  color: var(--ink); margin: 2.3rem 0 .8rem;
}
.prose h3 { font: 600 1rem/1.4 var(--sans); color: var(--ink); margin: 1.7rem 0 .5rem; }
.prose p { font: 300 1.01rem/1.74 var(--serif); color: var(--ink-soft); margin: 0 0 1rem; }
.prose a { color: var(--court-red); text-decoration: none; border-bottom: 1px solid var(--court-red-tint); }
.prose a:hover { border-bottom-color: var(--court-red); }
.prose ul, .prose ol { margin: 0 0 1.1rem; padding-left: 1.25rem; }
.prose li { font: 300 1.01rem/1.68 var(--serif); color: var(--ink-soft); margin-bottom: .45rem; }
.prose strong { font-weight: 600; color: var(--ink); }

/* A statute or case name in running text is always a link, never
   just red type. Red text that does nothing when tapped reads as a
   broken link. */
.ref { color: var(--court-red); text-decoration: none; border-bottom: 1px solid var(--court-red-tint); }
.ref:hover { border-bottom-color: var(--court-red); }

/* ---------- Factor list --------------------------------------- */
.factors { list-style: none; margin: 1.3rem 0 1.6rem; padding: 0; counter-reset: f; }
.factors li {
  counter-increment: f; position: relative;
  padding: .7rem 0 .7rem 2.7rem;
  border-bottom: 1px solid var(--hairline);
  font: 300 .99rem/1.62 var(--serif); color: var(--ink-soft); margin: 0;
}
.factors li:last-child { border-bottom: none; }
.factors li::before {
  content: counter(f, decimal-leading-zero);
  position: absolute; left: 0; top: .78rem;
  font: 500 .8rem/1 var(--mono); color: var(--court-red);
}

/* ---------- Callouts ------------------------------------------ */
.callout {
  border-left: 3px solid var(--court-red); background: var(--court-red-tint);
  padding: 1rem 1.2rem; margin: 1.6rem 0; border-radius: 0 var(--radius) var(--radius) 0;
}
.callout p { margin: 0; font: 400 .99rem/1.62 var(--serif); color: #4A1616; }
.callout p + p { margin-top: .65rem; }
.callout a { color: #5B1414; }
.callout--note { border-left-color: var(--gold); background: rgba(199,169,116,.16); }
.callout--note p { color: #5A4718; }
.callout__label {
  display: block; font: 600 .68rem/1 var(--sans); letter-spacing: .13em;
  text-transform: uppercase; margin-bottom: .5rem; opacity: .72;
}

/* ---------- Filter bar ---------------------------------------- */
.filters {
  display: flex; flex-wrap: wrap; gap: .6rem;
  padding: .9rem 0 1rem; margin-bottom: .2rem;
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  align-items: center;
}
.filters__field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.filters__field--grow { flex: 1 1 13rem; }
.filters label {
  font: 600 .64rem/1 var(--sans); letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-mute);
}
.filters input, .filters select {
  font: 400 .88rem/1.2 var(--sans); color: var(--ink);
  background: var(--paper); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: .5rem .6rem;
  min-height: 2.35rem; max-width: 100%;
}
.filters input:focus, .filters select:focus {
  outline: 2px solid var(--court-red); outline-offset: 1px; border-color: var(--court-red);
}
.filters__count {
  margin-left: auto; align-self: flex-end;
  font: 500 .8rem/2.35rem var(--mono); color: var(--ink-mute); white-space: nowrap;
}
.filters__reset {
  align-self: flex-end; background: none; border: 1px solid var(--hairline);
  border-radius: var(--radius); cursor: pointer;
  font: 500 .78rem/1 var(--sans); color: var(--ink-mute);
  padding: .62rem .75rem; min-height: 2.35rem;
}
.filters__reset:hover { border-color: var(--court-red); color: var(--court-red); }
.filters__empty {
  display: none; padding: 1.8rem 0; text-align: center;
  font: 400 .96rem/1.6 var(--serif); color: var(--ink-mute);
}
.is-empty .filters__empty { display: block; }
.is-empty .tablewrap { display: none; }

/* ---------- Tables -------------------------------------------- */
.tablewrap {
  overflow-x: auto; margin: 1.2rem 0 1.8rem;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--hairline); border-radius: var(--radius);
  background: var(--paper);
}
.ctable { width: 100%; border-collapse: collapse; min-width: 40rem; }
.ctable th {
  text-align: left; font: 600 .66rem/1.3 var(--sans);
  letter-spacing: .11em; text-transform: uppercase; color: var(--ink-mute);
  padding: .68rem .8rem; border-bottom: 1px solid var(--rule);
  white-space: nowrap; background: var(--paper-deep);
  position: sticky; top: 0; z-index: 1;
}
.ctable th[data-sort] { cursor: pointer; user-select: none; }
.ctable th[data-sort]:hover { color: var(--court-red); }
.ctable th[data-sort]::after { content: "\2195"; opacity: .3; margin-left: .35rem; }
.ctable th[aria-sort="ascending"]::after { content: "\2191"; opacity: 1; color: var(--court-red); }
.ctable th[aria-sort="descending"]::after { content: "\2193"; opacity: 1; color: var(--court-red); }
.ctable td {
  padding: .6rem .8rem; border-bottom: 1px solid var(--hairline);
  font: 400 .89rem/1.4 var(--sans); color: var(--ink-soft); vertical-align: middle;
}
/* Without this the case-name column wraps to three lines and drags every
   other cell's row height with it. */
.ctable td:first-child { min-width: 14rem; }
.ctable td:nth-child(2) { min-width: 9rem; }
.ctable tbody tr:last-child td { border-bottom: none; }
.ctable tbody tr:hover td { background: rgba(163,132,86,.07); }
.ctable a { color: var(--court-red); text-decoration: none; font-weight: 500; }
.ctable a:hover { text-decoration: underline; }
.ctable .num { font-family: var(--mono); font-size: .85rem; white-space: nowrap; }
.ctable .adj { color: var(--ink-mute); font-size: .76rem; display: block; margin-top: .12rem; }
.ctable .tag {
  display: inline-block; font: 500 .68rem/1 var(--sans);
  padding: .26rem .45rem; border-radius: 2px; white-space: nowrap;
  background: var(--paper-deep); border: 1px solid var(--hairline); color: var(--ink-mute);
}
.ctable .tag--granted { background: rgba(47,93,58,.1); border-color: rgba(47,93,58,.3); color: #2F5D3A; }
.ctable .tag--refused { background: var(--court-red-tint); border-color: rgba(122,31,31,.25); color: var(--court-red); }
.ctable tr[hidden] { display: none; }

/* ---------- Cards --------------------------------------------- */
.cards {
  display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  margin: 1.4rem 0 2rem;
}
.card {
  border: 1px solid var(--hairline); background: var(--paper-deep);
  padding: 1.05rem 1.1rem; border-radius: var(--radius);
  text-decoration: none; display: block;
  transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.card:hover { border-color: var(--court-red); transform: translateY(-2px); }
.card__k { font: 600 .65rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--court-red); margin: 0 0 .45rem; }
.card__t { font: 400 1.04rem/1.32 var(--serif); color: var(--ink); margin: 0 0 .4rem; }
.card__d { font: 400 .85rem/1.5 var(--sans); color: var(--ink-mute); margin: 0; }
.card__n { font: 500 .78rem/1 var(--mono); color: var(--ink-mute); margin-top: .65rem; display: block; }

/* ---------- Figures ------------------------------------------- */
.fig { margin: 1.7rem 0; }
.fig img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--hairline); border-radius: var(--radius);
  background: var(--paper-deep);
}
.fig figcaption { font: 400 .81rem/1.6 var(--sans); color: var(--ink-mute); margin-top: .55rem; }

/* ---------- Sources, related, disclaimer ---------------------- */
.sources { margin-top: 2.4rem; padding-top: 1.2rem; border-top: 1px solid var(--hairline); }
.sources h2 { font: 600 .72rem/1 var(--sans); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 .8rem; }
.sources ul { list-style: none; margin: 0; padding: 0; }
.sources li { font: 400 .86rem/1.6 var(--sans); color: var(--ink-mute); margin-bottom: .4rem; }
.sources a { color: var(--court-red); text-decoration: none; }
.sources a:hover { text-decoration: underline; }
.sources .cite { font-family: var(--mono); font-size: .8rem; }

.disclaim {
  margin: 2.2rem 0 0; padding: .9rem 1.05rem;
  border: 1px dashed var(--hairline); border-radius: var(--radius);
  font: 400 .83rem/1.62 var(--sans); color: var(--ink-mute);
}

/* ---------- Footer -------------------------------------------- */
.cfoot { border-top: 2px solid var(--rule); background: var(--paper-deep); padding: 2.2rem 0 2.6rem; }
.cfoot__inner { display: grid; gap: 1.8rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.cfoot__brand { font: 400 1.2rem/1 var(--serif); color: var(--ink); margin: 0 0 .4rem; }
.cfoot__tag { font: 400 .86rem/1.5 var(--sans); color: var(--ink-mute); margin: 0; }
.cfoot h2 { font: 600 .68rem/1 var(--sans); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 .7rem; }
.cfoot ul { list-style: none; margin: 0; padding: 0; }
.cfoot li { margin-bottom: .42rem; }
.cfoot a { font: 400 .88rem/1.45 var(--sans); color: var(--ink-soft); text-decoration: none; }
.cfoot a:hover { color: var(--court-red); }

/* ---------- Motion & print ------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .card:hover, .cta__btn:hover { transform: none; }
}
@media print {
  .cta, .rail, .skip, .chead, .cfoot, .filters { display: none !important; }
  body { background: #fff; }
  .layout { display: block; }
  .col { max-width: none; }
  .prose p, .prose li { font-size: 11pt; line-height: 1.5; }
  .infl { border: 1px solid #999; background: none; }
  .tablewrap { overflow: visible; }
  .ctable { min-width: 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; }
}

/* ---------- Homepage casebook additions -----------------------
   The casebook table on the homepage is rendered by app.js. These
   cover the cells that did not exist before: the case name is now
   a link into our own write-up rather than a jump straight off the
   site, and the award carries its value in today's money.
   -------------------------------------------------------------- */
.case-name--link {
  color: var(--court-red); text-decoration: none;
  border-bottom: 1px solid var(--court-red-tint);
}
.case-name--link:hover { border-bottom-color: var(--court-red); }
.award-today {
  display: block; margin-top: .15rem;
  font: 400 .74rem/1.3 var(--mono); color: var(--ink-mute); white-space: nowrap;
}
.source-link--ext { opacity: .8; }

/* ---------- Casebook signpost on the homepage ------------------
   The full table used to sit inline on the homepage. It belongs on
   its own indexable page, so what is left here is a route to it.
   -------------------------------------------------------------- */
.casebook-promo { padding: 3rem 0; border-block: 1px solid var(--hairline); background: var(--paper-deep); }
.casebook-promo__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1.5rem 2.5rem; justify-content: space-between;
}
.casebook-promo__inner > div { flex: 1 1 26rem; min-width: 0; }
.casebook-promo__k {
  font: 600 .7rem/1 var(--sans); letter-spacing: .13em;
  text-transform: uppercase; color: var(--court-red); margin: 0 0 .7rem;
}
.casebook-promo__t {
  font: 400 clamp(1.4rem, 3vw, 2rem)/1.22 var(--serif);
  color: var(--ink); margin: 0 0 .7rem;
}
.casebook-promo__d {
  font: 300 1rem/1.65 var(--serif); color: var(--ink-soft); margin: 0; max-width: 40rem;
}
.casebook-promo__btn {
  flex: 0 0 auto; display: inline-block; text-decoration: none;
  background: var(--court-red); color: #F6ECE4;
  font: 600 .88rem/1 var(--sans); letter-spacing: .015em;
  padding: .9rem 1.3rem; border-radius: var(--radius);
  border: 1px solid var(--court-red-dk);
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.casebook-promo__btn:hover { background: var(--court-red-dk); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .casebook-promo__btn:hover { transform: none; } }

/* The bench line under a researched case's first heading. */
.prose-meta {
  font: 500 .78rem/1.5 var(--mono); color: var(--ink-mute);
  margin: -.3rem 0 1.2rem; padding-bottom: .9rem;
  border-bottom: 1px solid var(--hairline);
}

/* ---------- Share ---------------------------------------------
   One button. The phone's own sheet lists WhatsApp, Instagram
   Stories, Telegram and the rest far better than a row of brand
   icons we would have to keep up to date.
   -------------------------------------------------------------- */
.shareblock { margin-top: 1.5rem; padding-top: 1.3rem; border-top: 1px solid var(--hairline); }
.share-btn {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--court-red); color: #F6ECE4;
  border: 1px solid var(--court-red-dk); border-radius: var(--radius);
  font: 600 .95rem/1 var(--sans); letter-spacing: .01em;
  padding: .95rem 1.4rem; cursor: pointer;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.share-btn:hover { background: var(--court-red-dk); transform: translateY(-1px); }
.share-btn:active { transform: translateY(0); }
.share-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.share-btn svg { flex: none; }
.shareblock__hint {
  margin: .7rem 0 0; max-width: 32rem;
  font: 400 .85rem/1.55 var(--sans); color: var(--ink-mute);
}
.share-toast {
  margin: .7rem 0 0; min-height: 1.2rem;
  font: 500 .86rem/1.4 var(--sans); color: var(--green);
  opacity: 0; transform: translateY(-3px);
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.share-toast.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .share-btn:hover { transform: none; }
  .share-toast { transition: none; }
}

/* Copy link sits beside Share as an equal, not a fallback. On a laptop
   it is the one people actually want. */
.shareblock { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.shareblock .shareblock__hint,
.shareblock .share-toast { flex: 1 0 100%; }
.share-btn--ghost {
  background: transparent; color: var(--paper);
  border-color: rgba(244, 239, 230, .35);
}
.share-btn--ghost:hover { background: rgba(244, 239, 230, .1); color: #fff; }

/* ---------- Consent banner ------------------------------------
   Shown only in the EEA, the UK and Switzerland. Anchored to the
   bottom so it never covers the answer somebody came for, and it
   does not trap focus, because a cookie notice is not a modal.
   -------------------------------------------------------------- */
.consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  background: var(--ink); color: #EFE7DA;
  border-top: 2px solid var(--court-red);
  box-shadow: 0 -8px 30px -20px rgba(0,0,0,.8);
  padding: 1rem var(--gap) calc(1rem + env(safe-area-inset-bottom, 0px));
  animation: consent-in var(--t-med) var(--ease-out) both;
}
@keyframes consent-in { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .consent { animation: none; } }

.consent__inner {
  max-width: var(--max); margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.6rem;
}
.consent__text { flex: 1 1 24rem; min-width: 0; }
.consent__text p { margin: 0; font: 400 .88rem/1.6 var(--sans); color: #D9CFBF; }
.consent__text strong { color: #F6ECE4; font-weight: 600; }
.consent__text a { color: var(--gold-soft); }
.consent__actions { display: flex; gap: .6rem; flex: 0 0 auto; }
.consent__btn {
  font: 600 .85rem/1 var(--sans); cursor: pointer;
  padding: .75rem 1.3rem; border-radius: var(--radius);
  background: var(--paper); color: var(--ink); border: 1px solid var(--paper);
  transition: background var(--t-fast) var(--ease);
}
.consent__btn:hover { background: #fff; }
.consent__btn--ghost {
  background: transparent; color: #D9CFBF; border-color: rgba(217,207,191,.4);
}
.consent__btn--ghost:hover { background: rgba(217,207,191,.12); color: #fff; }
.consent__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

@media (max-width: 560px) {
  .consent__actions { width: 100%; }
  .consent__btn { flex: 1 1 auto; }
}

/* ---------- Footer legal strip -------------------------------- */
.cfoot__legal {
  margin-top: 1.8rem; padding-top: 1.1rem;
  border-top: 1px solid var(--hairline);
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem;
  align-items: baseline; justify-content: space-between;
}
.cfoot__legal p { margin: 0; font: 400 .8rem/1.6 var(--sans); color: var(--ink-mute); max-width: 46rem; }
.cfoot__consent {
  background: none; border: none; padding: 0; cursor: pointer;
  font: 500 .8rem/1.6 var(--sans); color: var(--court-red);
  text-decoration: underline; text-underline-offset: 2px;
}
.cfoot__consent:hover { color: var(--court-red-dk); }

/* ---------- Contact form --------------------------------------
   Posts to a Google Apps Script that appends to a sheet. No email
   address is published anywhere on the site, which also means
   there is nothing for a scraper to harvest.
   -------------------------------------------------------------- */
.cform { margin: 0 0 2.2rem; }
.cform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cform__grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.cform__field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; min-width: 0; }
.cform__field label {
  font: 600 .72rem/1 var(--sans); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-mute);
}
.cform__req { color: var(--court-red); }
.cform input, .cform textarea {
  font: 400 1rem/1.5 var(--sans); color: var(--ink);
  background: var(--paper); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: .7rem .8rem;
  width: 100%; max-width: 100%;
}
.cform textarea { resize: vertical; min-height: 9rem; font-family: var(--serif); font-weight: 300; }
.cform input:focus, .cform textarea:focus {
  outline: 2px solid var(--court-red); outline-offset: 1px; border-color: var(--court-red);
}
.cform input:invalid:not(:placeholder-shown),
.cform textarea:invalid:not(:placeholder-shown) { border-color: rgba(122,31,31,.5); }
.cform__hint { margin: 0; font: 400 .8rem/1.4 var(--sans); color: var(--ink-mute); }
.cform__hint.is-ok { color: var(--green); }
.cform__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.2rem; margin-top: .4rem; }
.cform__submit {
  background: var(--court-red); color: #F6ECE4;
  border: 1px solid var(--court-red-dk); border-radius: var(--radius);
  font: 600 .92rem/1 var(--sans); padding: .9rem 1.5rem; cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.cform__submit:hover:not(:disabled) { background: var(--court-red-dk); }
.cform__submit:disabled { opacity: .55; cursor: default; }
.cform__submit:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.form-status { margin: 0; font: 500 .88rem/1.5 var(--sans); color: var(--ink-mute); }
.form-status.is-error { color: var(--court-red); }
.form-status.is-success { color: var(--green); }
.form-status.is-pending { color: var(--ink-mute); }
.cform__privacy { margin: 1.1rem 0 0; font: 400 .82rem/1.6 var(--sans); color: var(--ink-mute); }
/* reCAPTCHA is a fixed-width iframe and overflows a narrow phone. */
.g-recaptcha { max-width: 100%; overflow-x: auto; }

/* ---------- Running estimate bar -------------------------------
   The calculator answers as you go, so there is a number on screen
   from the first question onward rather than after a submit. The
   bar carries it while the form is being filled and stands down
   once the full result panel is genuinely on screen.
   -------------------------------------------------------------- */
.estbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--ink); color: #F1E7D8;
  border-top: 2px solid var(--gold);
  box-shadow: 0 -10px 34px -24px rgba(0,0,0,.9);
  padding: .7rem var(--gap) calc(.7rem + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform var(--t-med) var(--ease-out);
}
.estbar.is-up { transform: none; }
.estbar__inner {
  display: flex; align-items: center; gap: .8rem 1.6rem; flex-wrap: wrap;
}
.estbar__figure { flex: 1 1 14rem; min-width: 0; }
.estbar__label {
  margin: 0 0 .15rem; font: 600 .62rem/1 var(--sans);
  letter-spacing: .13em; text-transform: uppercase; color: var(--gold-soft);
}
.estbar__range {
  margin: 0; font: 500 1.15rem/1.2 var(--mono); color: #FBF4E8;
  display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap;
}
.estbar__to { font: 400 .8rem/1 var(--serif); font-style: italic; color: var(--gold-soft); }
.estbar__unit { font: 400 .74rem/1 var(--sans); color: rgba(241,231,216,.65); }

.estbar__meter { flex: 0 1 11rem; min-width: 8rem; }
.estbar__track {
  height: 4px; border-radius: 2px; overflow: hidden;
  background: rgba(241,231,216,.18);
}
.estbar__fill {
  height: 100%; width: 0%; background: var(--gold);
  transition: width var(--t-med) var(--ease);
}
.estbar__conf {
  margin: .35rem 0 0; font: 400 .7rem/1.3 var(--sans);
  color: rgba(241,231,216,.62);
}

.estbar__btn {
  flex: 0 0 auto; text-decoration: none;
  background: var(--gold); color: #241A06;
  font: 600 .8rem/1 var(--sans); letter-spacing: .01em;
  padding: .7rem 1.05rem; border-radius: var(--radius);
}
.estbar__btn:hover { background: var(--gold-soft); }

@media (max-width: 620px) {
  .estbar__inner { gap: .55rem .9rem; }
  .estbar__meter { flex: 1 1 100%; order: 3; }
  .estbar__conf { margin-top: .25rem; }
  .estbar__range { font-size: 1.02rem; }
  .estbar__btn { padding: .62rem .85rem; font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .estbar, .estbar__fill { transition: none; }
}
/* The consent banner and the estimate bar both want the bottom of the
   screen. Stacking them means guessing the banner's height, which wraps
   to three lines on a narrow phone and clipped the estimate behind it.
   Consent is a one-time legal gate, so the estimate simply waits: the
   moment a choice is made the banner goes and the bar slides up. */
body.consent-up .estbar { transform: translateY(100%); }