/* ==========================================================================
   Inner pages (legal, pre-lander) — the homepage's design system, applied
   to pages without a hero film. Loads after cinematic.css, so every token,
   button, header and footer rule is shared; this file only adds what the
   inner pages themselves need.
   ========================================================================== */

/* No utility strip above the header on these pages, and no film to pull the
   first section up behind it. The drawer pads by this value. */
.page-sub {
  --topbar-h: var(--header-h);
}

/* --------------------------------------------------------------------------
   Legal page
   -------------------------------------------------------------------------- */
.c-legal {
  max-width: 48rem;
  padding-block: clamp(2.5rem, 7vw, 5rem) clamp(3rem, 8vw, 6rem);
  color: var(--c-ink-2);
  font-size: 1rem;
  line-height: 1.75;
}

.c-legal .c-kicker {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1.25rem;
}

.c-legal .c-kicker::before {
  content: '';
  inline-size: 2rem;
  block-size: 1px;
  background: var(--c-ink);
}

.c-legal__title {
  font-family: var(--c-serif);
  font-weight: 400;
  font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--c-ink);
  margin: 0 0 1.25rem;
  text-wrap: balance;
}

.c-legal__lede {
  font-size: clamp(1.02rem, 0.95rem + 0.3vw, 1.15rem);
  color: var(--c-dim);
  max-width: 40rem;
  margin: 0;
}

.c-legal section {
  margin-block-start: clamp(2.5rem, 5vw, 3.5rem);
  padding-block-start: clamp(2rem, 4vw, 2.75rem);
  border-block-start: 1px solid var(--c-line);
  scroll-margin-block-start: calc(var(--header-h) + 1.5rem);
}

.c-legal h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.9rem;
  font-family: var(--c-serif);
  font-weight: 400;
  font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem);
  line-height: 1.2;
  color: var(--c-ink);
  margin: 0 0 1rem;
}

.c-legal p {
  margin: 0;
}

.c-legal p + p,
.c-legal p + ul,
.c-legal ul + p {
  margin-block-start: 0.9rem;
}

.c-legal ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: grid;
  gap: 0.7rem;
}

.c-legal li {
  position: relative;
  padding-inline-start: 1.4rem;
}

/* A short hairline instead of a bullet — the homepage's own mark. */
.c-legal li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.85em;
  inline-size: 0.7rem;
  block-size: 1px;
  background: var(--c-ink);
  opacity: 0.55;
}

.c-legal strong {
  color: var(--c-ink);
  font-weight: 600;
}

.c-legal a {
  color: var(--c-ink);
  text-decoration: underline;
  text-decoration-color: rgb(var(--c-blue-rgb) / 0.45);
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--dur-fast);
}

.c-legal a:hover {
  text-decoration-color: var(--c-blue);
}

.c-legal address {
  font-style: normal;
  margin-block-start: 1.5rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--c-line);
  background: var(--c-bg-2);
  font-size: 0.92rem;
}

/* ==========================================================================
   Content pages: the six practice pages, Media, Reviews and the articles
   (the content placement of 17 Oct 2026). Case results, press cards, reviews
   and the drawer's practice index are shared with the homepage and sit in
   cinematic.css; what is only for these pages is here.
   ========================================================================== */

/* Page head: kicker, the one H1, the lede, the call-to-action row and, on
   Traffic and Criminal, the brand banner as a side panel. */
.c-pagehero {
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.75rem);
  align-items: center;
  padding-block: clamp(2.25rem, 6vw, 4.25rem) clamp(2rem, 5vw, 3.5rem);
}

.c-pagehero__copy {
  display: grid;
  gap: 1.15rem;
  justify-items: start;
  min-width: 0;
}

.c-pagehero .c-kicker {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
}

.c-pagehero .c-kicker::before {
  content: '';
  inline-size: 2rem;
  block-size: 1px;
  background: var(--c-ink);
}

.c-pagehero .c-kicker a {
  text-decoration: none;
}

.c-pagehero .c-kicker a:hover {
  color: var(--c-blue-soft);
}

.c-pagehero__title {
  margin: 0;
  font-family: var(--c-serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 1.35rem + 4.6vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.c-pagehero__lede {
  max-width: 36ch;
  font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.2rem);
  line-height: 1.7;
  color: var(--c-ink-2);
  text-wrap: pretty;
}

.c-pagehero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block-start: 0.35rem;
}

@media (min-width: 64em) {
  .c-pagehero--banner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 4rem;
  }
}

/* The brand banner, as designed: 600 px wide at most (the file is 600 px), a
   hairline frame and the brass rule on top. On wide screens it is the side panel. */
.c-banner {
  margin: 0;
  inline-size: 100%;
  max-inline-size: 600px;
  border: 1px solid var(--c-line);
  border-block-start: 2px solid var(--c-amber);
  background: var(--c-bg-2);
}

.c-banner picture,
.c-banner img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

@media (min-width: 64em) {
  .c-pagehero--banner .c-banner {
    justify-self: end;
  }
}

/* A heading beside its text. */
.c-split {
  display: grid;
  gap: 1.5rem 4rem;
  align-items: start;
}

.c-split > * {
  min-width: 0;
}

.c-split__head {
  display: grid;
  gap: 1rem;
  align-content: start;
}

@media (min-width: 64em) {
  .c-split {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }
}

.c-prose {
  max-width: 62ch;
  font-size: 1.02rem;
  line-height: 1.85;
  color: var(--c-ink-2);
  text-wrap: pretty;
}

.c-prose + .c-points {
  margin-block-start: 1.25rem;
}

/* A short hairline instead of a bullet: the homepage's own mark, as on the legal page. */
.c-points {
  display: grid;
  gap: 0.8rem;
  max-width: 62ch;
}

.c-points li {
  position: relative;
  padding-inline-start: 1.6rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--c-ink-2);
}

.c-points li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.9em;
  inline-size: 0.8rem;
  block-size: 1px;
  background: var(--c-ink);
  opacity: 0.55;
}

/* Case results and press items, one under the other. */
.c-cases {
  display: grid;
  gap: 1.25rem;
}

/* A link to a page of its own (the DUI guide on Traffic, the press page on Criminal). */
.c-feature {
  display: grid;
  gap: 0.75rem;
  max-inline-size: 46rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--c-line);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur);
}

.c-feature:hover {
  border-color: var(--c-line-2);
}

.c-feature h3 {
  font-family: var(--c-serif);
  font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem);
  line-height: 1.15;
  transition: color var(--dur-fast);
}

.c-feature:hover h3 {
  color: var(--c-blue-soft);
}

.c-feature .c-kicker {
  max-width: none;
  font-size: 0.66rem;
  color: var(--c-dim);
}

.c-feature p {
  max-width: 52ch;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--c-ink-2);
}

/* --------------------------------------------------------------------------
   Articles. They are built on the legal page's column and type (.c-legal) and
   add what an article has and a legal page does not: a table of contents, a
   table, a note, numbered steps and questions.
   -------------------------------------------------------------------------- */
.c-doc {
  max-width: 52rem;
}

.c-doc .c-legal__lede {
  max-width: 44rem;
  font-weight: 500;
  color: var(--c-ink);
}

.c-doc__meta {
  margin-block-start: 1rem;
  font-size: 0.8rem;
  color: var(--c-dim);
}

/* Sections run on, with space between them and no rule, unlike the legal page. */
.c-doc section {
  margin-block-start: clamp(2rem, 4vw, 2.75rem);
  padding-block-start: 0;
  border-block-start: 0;
}

.c-doc h2 {
  font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.8rem);
}

.c-doc section > * + * {
  margin-block-start: 0.9rem;
}

.c-doc ol {
  display: grid;
  gap: 0.7rem;
  margin: 1rem 0 0;
  counter-reset: step;
}

.c-doc ol li {
  position: relative;
  padding-inline-start: 2rem;
  counter-increment: step;
}

.c-doc ol li::before {
  content: counter(step);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  inline-size: auto;
  block-size: auto;
  background: none;
  opacity: 1;
  font-family: var(--c-serif);
  color: var(--c-dim);
}

.c-doc__toc {
  margin-block-start: 2rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--c-line);
  background: var(--c-bg-2);
}

.c-doc__toc p {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--c-ink);
}

.c-doc__toc ul {
  margin-block-start: 0.6rem;
  gap: 0.35rem;
  font-size: 0.92rem;
}

.c-doc__table {
  margin-block-start: 1.25rem;
  overflow-x: auto;
  border: 1px solid var(--c-line);
}

.c-doc__table table {
  inline-size: 100%;
  min-inline-size: 28rem;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.c-doc__table caption {
  padding: 0.75rem 1rem;
  text-align: start;
  font-weight: 600;
  color: var(--c-ink);
}

.c-doc__table th,
.c-doc__table td {
  padding: 0.65rem 1rem;
  text-align: start;
  border-block-start: 1px solid var(--c-line);
}

.c-doc__table thead th {
  background: var(--c-bg-2);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: var(--c-ink-2);
}

.c-doc__note {
  padding: 1rem 1.15rem;
  border: 1px solid var(--c-line);
  border-inline-start: 3px solid var(--c-amber);
  background: rgb(var(--c-amber-rgb) / 0.06);
}

.c-doc .c-faq {
  max-width: none;
  margin-block-start: 1rem;
}

.c-doc .c-faq summary {
  font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.2rem);
}

.c-doc .c-faq__body {
  font-size: 0.98rem;
  line-height: 1.8;
}

.c-doc__sources {
  margin-block-start: clamp(2rem, 4vw, 2.75rem);
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--c-line);
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--c-dim);
}

.c-doc__sources + .c-doc__sources {
  margin-block-start: 0.6rem;
  padding-block-start: 0;
  border-block-start: 0;
}

/* The closing call to action and the section heads, as on the homepage, where their
   spacing is written inline. The article pages' headline is a sentence, so it is smaller. */
.page-sub .c-head .c-h2,
.page-sub .c-cta .c-kicker + .c-cta__title {
  margin-block-start: 1rem;
}

.page-sub .c-cta .c-body {
  max-width: 40ch;
  margin-block-start: 1.25rem;
  font-size: 0.92rem;
}

.c-cta__title--sm {
  max-width: 20ch;
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.2rem);
}

/* A page without a banner: the area's own mark on the other side of the head, in a halo
   ring like the one behind the homepage portrait. Wide screens only. */
.c-pagehero__mark {
  display: none;
}

@media (min-width: 64em) {
  .c-pagehero--mark {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 4rem;
  }

  .c-pagehero__mark {
    display: grid;
    place-items: center;
    justify-self: end;
    inline-size: min(100%, 22rem);
    aspect-ratio: 1;
    border: 1px solid rgb(var(--c-tint-rgb) / 0.22);
    border-radius: 50%;
    box-shadow: 0 0 60px rgb(var(--c-tint-rgb) / 0.06), inset 0 0 60px rgb(var(--c-tint-rgb) / 0.04);
    color: var(--c-ink);
  }

  .c-pagehero__mark svg {
    --icon-stroke: 0.6;
    inline-size: 28%;
    block-size: 28%;
  }
}

/* Reading pages keep a steadier, tighter rhythm than the homepage's showcase sections. */
.page-sub .c-section {
  padding-block: clamp(2.25rem, 5vw, 3.75rem);
}