/* Hallmark · shape: Long Document · genre: editorial · theme: Newsprint (deal 1/3, seed personal-injury-law-firm-53c4·20ebebf9·2026-10-24·r0) · job: hire · draw: ebda00
 * hero: Ledge · nav: masthead · footer: index columns · imagery: photographs, library 1, mono · signature: the first three days after a wreck, set as a front page in justified columns · newsprint: default
 * axes: light/slab-serif/warm · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P5 H4 E4 S4 R5 V5 · weakest: S, injury firms all promise to fight; led with the advice a caller needs before an adjuster rings, not a promise */
/* Hallmark · dismissed 58 · the ten words over are the footer's attorney advertising disclosure, which a Texas firm cannot cut */
@import url("./tokens.css");
@import url("./base.css");

body { font-size: 1.0625rem; color: var(--color-ink-2); }
h1, h2, h3 { color: var(--color-ink); line-height: 1.05; }
a { color: var(--color-accent); text-decoration-color: var(--color-accent); text-underline-offset: 0.16em; transition: text-decoration-thickness var(--dur-micro) var(--ease-out); }
a:hover { text-decoration-thickness: 2px; }
::selection { background: color-mix(in oklab, var(--color-accent) 20%, transparent); }
.rule--double { box-sizing: content-box; height: 2px; margin: 0; border: 0; border-block: var(--rule-hair) solid var(--color-rule-2); }

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

/* Masthead */
.mast { padding-top: var(--space-md); }
.mast__top { display: flex; justify-content: space-between; gap: var(--space-md); font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-rule); }
.mast__name { display: block; width: fit-content; margin: var(--space-md) auto 0; font: var(--display-weight) clamp(2.5rem, 5vw, 4.25rem)/1 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); text-decoration: none; }
.mast__sub { text-align: center; font-weight: 500; color: var(--color-muted); margin: var(--space-2xs) 0 var(--space-sm); }
.mast nav { display: flex; justify-content: center; gap: var(--space-xl); padding-block: var(--space-sm); border-bottom: 1px solid var(--color-rule); }
.mast nav a { color: var(--color-ink); text-decoration: none; font-weight: 500; font-size: var(--text-sm); }
.mast nav a:hover { color: var(--color-accent); text-decoration: underline; }

/* Controls */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-lg); border: 0; border-radius: 0; background: none; font: 700 0.9375rem/1 var(--font-display); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn--primary { background: var(--color-ink); color: var(--color-paper); }
.btn--primary:hover { background: var(--color-ink-2); }
.btn--secondary { border-block: var(--rule-hair) solid var(--color-ink); color: var(--color-ink); }
.btn--secondary:hover { background: var(--color-paper-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

/* Ledge: a tall field, the head resting at its base */
.ledge { padding-block: var(--space-lg) var(--space-2xl); }
.ledge__photo { margin: 0; height: clamp(220px, 34svh, 400px); border: var(--rule-hair) solid var(--color-rule); }
[data-slot] > img { filter: grayscale(1) contrast(1.08); }
.ledge__text { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: end; padding-top: var(--space-xl); }
.ledge h1 { font-size: var(--text-display); max-width: 14ch; }
.ledge__side { display: grid; gap: var(--space-lg); padding-bottom: var(--space-xs); }
.ledge .lead { max-width: 36ch; }
.actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; }

/* Front page in columns */
.front { padding-block: var(--section-gap-s) var(--section-gap); }
.front h2 { font-size: var(--text-display-s); max-width: 24ch; margin-top: var(--space-xl); }
.dateline { margin: var(--space-sm) 0 var(--space-2xl); font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.cols { columns: 3 18rem; column-gap: var(--space-xl); column-rule: var(--rule-hair) solid var(--color-rule); text-align: justify; hyphens: auto; }
.cols p { margin-bottom: var(--space-md); break-inside: avoid; max-width: none; }
.cols b { font-weight: 500; color: var(--color-ink); }
.dropcap::first-letter { float: left; font: 700 3.4em/0.8 var(--font-display); padding-right: 0.06em; padding-top: 0.06em; color: var(--color-accent); }

/* Index of cases */
.cases { padding-block: var(--section-gap-s) var(--section-gap); }
.cases h2 { margin-bottom: var(--space-xl); }
.index { width: 100%; border-collapse: collapse; border-top: var(--rule-hair) solid var(--color-rule-2); }
.index thead th { font: 500 var(--text-sm)/1.4 var(--font-body); color: var(--color-muted); text-align: left; padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
.index tbody th { width: 34%; text-align: left; font: var(--display-weight) var(--text-title)/1.2 var(--font-display); color: var(--color-ink); padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); vertical-align: baseline; }
.index td { padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); font-size: var(--text-lg); vertical-align: baseline; }

/* One case opened, in a well */
.well { background: var(--color-paper-2); border-block: var(--rule-hair) solid var(--color-rule); }
.how { padding-block: var(--section-gap-s); }
.how__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); }
.how__body > p { font-size: var(--text-lead); margin-bottom: var(--space-xl); }
.runs { margin: 0; border-top: var(--rule-hair) solid var(--color-rule-2); }
.runs div { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr); gap: var(--gap-columns); padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.runs dt { font: var(--display-weight) var(--text-title)/1.2 var(--font-display); color: var(--color-ink); }
.runs dd { margin: 0; }

/* The ink band: the fee notice */
.fee { background: var(--color-ink); color: var(--color-paper); padding-block: var(--section-gap-s); }
.fee__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: end; }
.fee h2 { color: var(--color-paper); font-size: var(--text-display-s); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-accent); }
.fee p { color: var(--color-paper-3); }

/* Contact */
.contact { padding-block: var(--section-gap); }
.contact__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: start; }
.contact__line { font-size: var(--text-lead); margin-top: var(--space-md); max-width: 30ch; }
.reach { margin: 0; border-top: var(--rule-hair) solid var(--color-rule-2); }
.reach div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.reach dt { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.reach dd { margin: 0; font: var(--display-weight) var(--text-2xl)/1.15 var(--font-display); color: var(--color-ink); }
.reach dd .fill { font: 400 var(--text-lg)/1.4 var(--font-body); }
.fill { padding: 0 0.25em; border: 1px dashed color-mix(in oklch, var(--color-muted) 70%, transparent); border-radius: 3px; color: var(--color-muted); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Footer, index columns */
.foot { padding-block: var(--space-xl) var(--space-2xl); }
.foot__cols { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr); gap: var(--gap-columns); padding-block: var(--space-xl); border-bottom: 1px solid var(--color-rule); margin-bottom: var(--space-lg); }
.foot__name { font: var(--display-weight) var(--text-2xl)/1 var(--font-display); color: var(--color-ink); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.foot__legal { font-size: var(--text-sm); color: var(--color-muted); margin-bottom: var(--space-xs); }

@media (max-width: 60rem) {
  .ledge__text, .how__grid, .fee__grid, .contact__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .ledge h1 { font-size: var(--text-section); }
  .mast nav { gap: var(--space-md); flex-wrap: wrap; }
  .foot__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .foot__name { grid-column: 1 / -1; }
}
@media (max-width: 40rem) {
  .mast__top p:first-child { display: none; }
  .mast__top { justify-content: center; }
  .cols { text-align: left; }
  .index thead { display: none; }
  .index tr { display: grid; padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
  .index tbody th, .index td { width: auto; padding-block: var(--space-2xs); border: 0; }
  .runs div, .reach div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .reach dd { font-size: var(--text-xl); }
}