/* ==========================================================================
   RECORD — a third direction for LP Evans.
   The premise: this firm's work is documentary. Disclosure, cell-site, CCTV,
   transcripts, exhibits. So the page is built like a case file: monospace
   metadata, hairlines that organise real content, hard monochrome plates,
   and one signal colour reserved for urgency.

   Deliberately not the other two: no Caslon, no brass, no navy, no amber.
   Monochrome with a single red that only ever means "this is the urgent path".
   ========================================================================== */
:root{
  --ink:#0C0C0D;
  --ink-2:#141416;
  --ink-3:#1D1D20;
  --paper:#F4F3F0;
  --paper-2:#EAE9E5;
  --paper-3:#DEDDD8;
  --line:#D2D1CB;
  --line-dark:rgba(255,255,255,.14);
  --signal:#C81E24;          /* 5.16:1 on paper, 5.73:1 behind white */
  --signal-lit:#E8484E;      /* 5.09:1 on ink */
  --brass:#C81E24;
  --brass-ink:#C81E24;
  --brass-lite:#E8484E;
  --text:#0C0C0D;
  --text-mute:#5A5955;       /* 6.32:1 on paper */
  --text-invert:#F4F3F0;
  --text-invert-mute:#A8A8A5;/* 8.20:1 on ink */
  --font-display:"Geist","Helvetica Neue",Arial,sans-serif;
  --font-text:"Geist",Georgia,serif;
  --font-ui:"Geist",system-ui,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --radius:0px;
  --wrap:1280px;
  --shadow:none;
}
body{font-family:var(--font-ui);background:var(--paper);color:var(--text)}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;letter-spacing:-.028em;line-height:1.04}

/* shared metadata voice */
.docket,.rec-label,.dk__ref,.dk__court,.ix__n,.pp__n,.rec-hero__note{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;text-transform:uppercase}
.rec-label{color:var(--text-mute);margin:0 0 26px}
.rec-label--inv{color:var(--text-invert-mute)}
.rec-h{font-size:clamp(1.9rem,3.6vw,3rem);max-width:18ch;margin:0 0 34px}
.rec-h--inv{color:var(--text-invert)}

/* buttons: square, hard, one signal fill */
.rbtn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  font-family:var(--font-ui);font-size:14px;font-weight:600;padding:16px 26px;
  border:1px solid transparent;transition:background .2s var(--ease),color .2s var(--ease),
  border-color .2s var(--ease),transform .2s var(--ease)}
.rbtn:active{transform:translateY(1px)}
.rbtn--signal{background:var(--signal);color:#fff}
.rbtn--signal:hover{background:#A8161C}
.rbtn--ghost{border-color:currentColor;color:var(--text)}
.rbtn--ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.rec-reach .rbtn--ghost{color:var(--text-invert)}
.rec-reach .rbtn--ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}

/* header, in the same register */
.alertbar{background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:11.5px;
  letter-spacing:.03em}
.alertbar a{color:var(--signal-lit)}
.site-head{background:var(--paper);border-bottom:1px solid var(--line)}
.brand img{filter:invert(1)}
.nav a{color:var(--text-mute);text-transform:none;letter-spacing:0;font-size:14px;font-weight:500}
.nav a:hover,.nav a[aria-current="page"]{color:var(--text)}
.nav a::after{background:var(--signal)}
.burger{border-color:var(--line)}.burger span{background:var(--text)}
.drawer{background:var(--paper)}
.drawer a{color:var(--text);border-bottom-color:var(--line)}
.head-cta{background:var(--signal);color:#fff;border:0;font-weight:600}
.head-cta:hover{background:#A8161C}
.mega{background:var(--ink)}
.mega .mega__item{color:var(--text-invert)}
.mega__t{font-family:var(--font-display)}
.mega__n{color:var(--signal-lit)}

/* ---- hero: asymmetric split ------------------------------------------- */
.rec-hero{display:grid;background:var(--paper);border-bottom:1px solid var(--line)}
@media (min-width:900px){.rec-hero{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)}}
.rec-hero__panel{display:flex;flex-direction:column;justify-content:center;gap:26px;
  padding:clamp(52px,6vw,84px) var(--gutter)}
@media (min-width:900px){.rec-hero__panel{
  padding-left:max(var(--gutter),calc((100vw - var(--wrap))/2 + var(--gutter)));
  padding-right:clamp(32px,4vw,60px)}}
.docket{display:flex;flex-wrap:wrap;gap:8px 0;margin:0;color:var(--text-mute)}
.docket span{padding-right:14px;margin-right:14px;border-right:1px solid var(--line)}
.docket span:last-child{border-right:0;padding-right:0;margin-right:0}
.rec-hero h1{font-size:clamp(2.6rem,6vw,4.6rem);margin:0;max-width:12ch}
.rec-hero__sub{margin:0;max-width:44ch;font-size:clamp(1.02rem,1.4vw,1.16rem);line-height:1.55;
  color:var(--text-mute)}
.rec-hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 20px;margin-top:4px}
.rec-hero__note{margin:0;color:var(--text-mute)}
.rec-hero__plate{position:relative;min-height:300px;background:var(--ink)}
.rec-hero__plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 62%;filter:grayscale(1) contrast(1.18) brightness(.82)}

/* ---- docket strip ------------------------------------------------------ */
.rec-docket{background:var(--ink);color:var(--text-invert);padding-block:clamp(40px,5vw,60px)}
.rec-docket .rec-label{color:var(--text-invert-mute)}
.dk__list{display:grid;border-top:1px solid var(--line-dark)}
.dk{display:grid;gap:6px;padding:20px 0;border-bottom:1px solid var(--line-dark);
  text-decoration:none;color:var(--text-invert);transition:padding-left .3s var(--ease)}
@media (min-width:860px){.dk{grid-template-columns:130px 210px 1fr;gap:28px;align-items:baseline}}
.dk:hover{padding-left:14px}
.dk__ref{color:var(--signal-lit)}
.dk__court{color:var(--text-invert-mute)}
.dk__note{font-size:15px;line-height:1.5;color:var(--text-invert)}

/* ---- practice index with a changing plate ------------------------------ */
.rec-index{padding-block:clamp(64px,8vw,110px)}
.ix__grid{display:grid;gap:34px}
@media (min-width:1000px){.ix__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:64px;align-items:start}}
.ix__rows{border-top:1px solid var(--line)}
.ix{display:grid;grid-template-columns:auto 1fr;gap:6px 20px;padding:22px 0;
  border-bottom:1px solid var(--line);text-decoration:none;color:var(--text);
  transition:padding-left .32s var(--ease),background .32s var(--ease)}
.ix:hover,.ix:focus-visible{padding-left:14px;background:var(--paper-2)}
.ix__n{grid-row:span 2;color:var(--text-mute);padding-top:5px}
.ix:hover .ix__n{color:var(--signal)}
.ix__t{font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(1.25rem,1.9vw,1.6rem);line-height:1.15}
.ix__d{font-size:14px;line-height:1.55;color:var(--text-mute);max-width:52ch}
.ix__plate{position:relative;aspect-ratio:4/5;background:var(--ink);overflow:hidden;
  position:sticky;top:120px}
@media (max-width:999px){.ix__plate{display:none}}
.ixp{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  filter:grayscale(1) contrast(1.15) brightness(.86);
  transition:opacity .5s var(--ease),transform 1.2s var(--ease);transform:scale(1.04)}
.ixp.is-on{opacity:1;transform:scale(1)}

/* ---- reach: map on ink ------------------------------------------------- */
.rec-reach{background:var(--ink);color:var(--text-invert);padding-block:clamp(64px,8vw,104px)}
.reach__grid{display:grid;gap:40px}
@media (min-width:960px){.reach__grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:64px;align-items:center}}
.reach__copy p{color:var(--text-invert-mute);max-width:46ch;margin:0 0 28px}
.reach__map .courtmap figcaption{border-top-color:var(--line-dark);color:var(--text-invert-mute)}
.reach__map .courtmap figcaption strong{color:var(--signal-lit)}
.rec-reach .cm__lines line{stroke:var(--signal-lit)}
.rec-reach .cm__dot{fill:var(--signal-lit)}
.rec-reach .cm__dot--hub{stroke:var(--signal-lit)}
.rec-reach .cm__label{fill:var(--text-invert-mute)}

/* ---- one quote --------------------------------------------------------- */
.rec-quote{padding-block:clamp(64px,8vw,104px);border-bottom:1px solid var(--line)}
.rec-quote blockquote{margin:0 0 24px;font-family:var(--font-display);font-weight:500;
  letter-spacing:-.024em;line-height:1.12;font-size:clamp(1.7rem,4.2vw,3.1rem);max-width:20ch}
.rec-quote blockquote::before{content:"\201C"}
.rec-quote blockquote::after{content:"\201D"}
.rec-quote__by{margin:0;font-size:14.5px;color:var(--text-mute);max-width:52ch}
.rec-quote__by strong{color:var(--text);font-weight:600}
.rec-quote__by a{color:var(--signal)}

/* ---- people ------------------------------------------------------------ */
.rec-people{padding-block:clamp(64px,8vw,104px)}
.pp__grid{display:grid;gap:26px;margin-bottom:38px}
@media (min-width:720px){.pp__grid{grid-template-columns:repeat(3,1fr)}}
.pp__img{aspect-ratio:4/5;background:var(--paper-2);overflow:hidden;margin-bottom:16px}
.pp__img img{width:100%;height:100%;object-fit:contain;object-position:center bottom;
  filter:grayscale(1) contrast(1.06);transition:transform .7s var(--ease)}
.pp:hover .pp__img img{transform:scale(1.03)}
.pp h3{font-size:1.3rem;margin:0 0 4px}
.pp__role{margin:0 0 10px;font-size:14px;color:var(--text-mute)}
.pp__n{margin:0;color:var(--signal)}

/* shared components pulled into this register */
.section.dark{background:var(--ink)}
.page-head.dark{background:var(--ink)}
.cta.dark{background:var(--ink-2)}
.site-foot{background:var(--ink)}
.eyebrow{font-family:var(--mono);letter-spacing:.04em;color:var(--signal);font-size:11.5px}
.eyebrow::before{background:var(--signal);width:22px}
.dark .eyebrow,.page-head .eyebrow{color:var(--signal-lit)}
.dark .eyebrow::before,.page-head .eyebrow::before{background:var(--signal-lit)}
.btn--brass{background:var(--signal);color:#fff;border-radius:0}
.btn--brass:hover{background:#A8161C}
.area,.tile,.case,.person,.quote{border-radius:0}
.h-lg,.h-xl,.h-md{letter-spacing:-.028em}