/* Privy — attorneys-at-law.
 *
 * Idiom: correspondence. A practice is judged on whether it looks like it
 * keeps records, so the page is built like a letterhead and a memorandum —
 * a utility strip, a centred masthead over a double rule, a numbered index of
 * practice areas, and interior pages set as a document with its contents
 * pinned beside it. No photograph competes with the type; the two pictures
 * that exist are architectural and sit behind their own rules.
 *
 * Nothing here is shared with any other template.
 */

:root {
  --ink: #17201c;
  --ink-soft: #55615a;
  --forest: #10352a;
  --forest-deep: #0a241c;
  --paper: #f3f4f2;
  --card: #fbfcfa;
  --rule: #cfd5cf;
  --rule-strong: #9aa79f;
  --claret: #8a1c2b;

  --gutter: clamp(1.25rem, 6vw, 7rem);
  --rail: min(100% - 2 * var(--gutter), 72rem);
  --serif: 'Lora', Georgia, 'Times New Roman', serif;
  --sans: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

/* `hidden` must always win. Author display rules (.pv-form is a grid) beat the
   browser's own [hidden] { display: none }, so an element given `hidden` by a
   script would otherwise stay on screen. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 clamp(1rem, 0.97rem + 0.16vw, 1.06rem)/1.7 var(--serif);
}

img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; margin: 0; letter-spacing: -0.004em; }

.pv-rail { width: var(--rail); margin-inline: auto; }

.pv-skip { position: absolute; left: -9999px; }
.pv-skip:focus { left: 0; top: 0; background: var(--forest); color: #fff; padding: 0.7rem 1rem; z-index: 99; }

/* ── utility strip ──────────────────────────────────────────────────── */

.pv-utility {
  background: var(--forest-deep);
  color: #cbd8d1;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
}
.pv-utility .pv-rail { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.5rem; }
.pv-utility p { margin: 0; }
.pv-utility__right { display: flex; gap: 1.4rem; }
.pv-utility a { text-decoration: none; }
.pv-utility a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 40rem) { .pv-utility .pv-rail > p:first-child { display: none; } }

/* ── letterhead ─────────────────────────────────────────────────────── */

.pv-masthead { background: var(--card); border-bottom: 1px solid var(--rule); }
.pv-wordmark {
  display: block; text-align: center; text-decoration: none;
  padding-block: clamp(1.4rem, 3vw, 2.4rem) 1.1rem;
}
.pv-wordmark__name {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.1rem);
  letter-spacing: 0.06em;
  color: var(--forest);
}
.pv-wordmark__sub {
  display: block; margin-top: 0.4rem;
  font-family: var(--sans); font-size: 0.7rem;
  letter-spacing: 0.42em; text-transform: uppercase; color: var(--ink-soft);
  padding-left: 0.42em;
}

.pv-nav { border-top: 1px solid var(--rule); border-bottom: 3px double var(--rule-strong); }
.pv-nav__inner { display: flex; justify-content: center; }
.pv-nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
}
.pv-nav a {
  display: block; padding: 0.8rem clamp(0.7rem, 1.6vw, 1.5rem);
  font-family: var(--sans); font-size: 0.79rem;
  letter-spacing: 0.13em; text-transform: uppercase;
  text-decoration: none; color: var(--ink-soft);
}
.pv-nav a:hover, .pv-nav a[aria-current] { color: var(--claret); }
.pv-nav__toggle { display: none; }

@media (max-width: 55rem) {
  .pv-nav__inner { display: block; }
  .pv-nav__toggle {
    display: block; width: 100%; padding: 0.7rem;
    background: none; border: 0; cursor: pointer; color: var(--ink-soft);
    font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase;
  }
  .pv-nav ul { flex-direction: column; max-height: 0; overflow: hidden; transition: max-height 0.3s; }
  .pv-nav[data-open] ul { max-height: 26rem; }
  .pv-nav li { border-top: 1px solid var(--rule); }
  .pv-nav a { text-align: center; }
}

/* ── the opening statement ──────────────────────────────────────────── */

.pv-opening { background: var(--forest); color: #eef3ef; }
.pv-opening .pv-rail {
  padding-block: clamp(3rem, 7vw, 5.5rem);
  display: grid; gap: clamp(1.6rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 58rem) { .pv-opening .pv-rail { grid-template-columns: minmax(0, 1fr); } }
.pv-opening h1 {
  font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  line-height: 1.16; font-weight: 400;
}
.pv-opening p { color: #cddbd3; }
.pv-opening__aside {
  border-left: 1px solid rgba(255, 255, 255, 0.22);
  padding-left: clamp(1.2rem, 3vw, 2.2rem);
}
.pv-opening__aside dl { margin: 0; display: grid; gap: 0.9rem; }
.pv-opening__aside dt {
  font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: #9fb7ab;
}
.pv-opening__aside dd { margin: 0.15rem 0 0; }

/* ── generic sections ───────────────────────────────────────────────── */

.pv-section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.pv-section--card { background: var(--card); border-block: 1px solid var(--rule); }
.pv-section--forest { background: var(--forest); color: #eef3ef; }

.pv-label {
  font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--claret); margin: 0 0 0.8rem;
}
.pv-section--forest .pv-label { color: #9fb7ab; }

.pv-h2 { font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.5rem); line-height: 1.2; }
.pv-lede { font-size: 1.12rem; color: var(--ink-soft); max-width: 62ch; }
.pv-section--forest .pv-lede { color: #cddbd3; }

.pv-headrow {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.2rem;
  align-items: end; padding-bottom: 1.1rem; margin-bottom: 2.2rem;
  border-bottom: 3px double var(--rule-strong);
}
.pv-section--forest .pv-headrow { border-bottom-color: rgba(255, 255, 255, 0.3); }
@media (max-width: 45rem) { .pv-headrow { grid-template-columns: minmax(0, 1fr); } }

/* ── practice areas: a numbered index ───────────────────────────────── */

.pv-index { counter-reset: pv-i; border-top: 1px solid var(--rule); }
.pv-item {
  counter-increment: pv-i;
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1rem, 3vw, 2.4rem);
  padding-block: 1.6rem;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  align-items: baseline;
}
.pv-item::before {
  content: counter(pv-i, upper-roman) ".";
  font-family: var(--sans); font-size: 0.82rem; letter-spacing: 0.1em;
  color: var(--rule-strong);
}
.pv-item h3 { font-size: 1.3rem; }
.pv-item p { margin: 0; color: var(--ink-soft); font-size: 0.97rem; }
.pv-item:hover h3 { color: var(--claret); }
.pv-item__fee {
  font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.08em;
  color: var(--ink-soft); display: block; margin-top: 0.4rem;
}
@media (max-width: 55rem) {
  .pv-item { grid-template-columns: 3rem minmax(0, 1fr); }
  .pv-item p { grid-column: 2; }
}

/* ── attorneys ──────────────────────────────────────────────────────── */

.pv-bar { border-top: 3px double var(--rule-strong); }
.pv-person {
  display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 2.6rem);
  padding-block: 2rem;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
}
.pv-person__name { font-size: 1.45rem; }
.pv-person__role {
  font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--claret); margin: 0.3rem 0 0;
}
.pv-person__bio { margin: 0.9rem 0 0; color: var(--ink-soft); max-width: 60ch; }
.pv-creds { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.25rem; }
.pv-creds li {
  font-family: var(--sans); font-size: 0.82rem; color: var(--ink-soft);
  padding-left: 1rem; position: relative;
}
.pv-creds li::before { content: "\2014"; position: absolute; left: 0; color: var(--rule-strong); }
.pv-person:hover .pv-person__name { color: var(--claret); }
@media (max-width: 45rem) { .pv-person { grid-template-columns: minmax(0, 1fr); } }

/* ── the fee notice ─────────────────────────────────────────────────── */

.pv-notice {
  border: 1px solid var(--rule-strong);
  border-left: 4px solid var(--claret);
  background: var(--card);
  padding: clamp(1.1rem, 3vw, 1.8rem);
  font-size: 0.94rem; color: var(--ink-soft);
  margin: 0;
}
.pv-notice strong { color: var(--ink); }
.pv-notice--foot {
  background: transparent; border-color: rgba(255, 255, 255, 0.24);
  border-left-color: #6f8a7e; color: #b6c7bd; margin-block: 2.4rem 1.6rem;
}

/* ── the matters table ──────────────────────────────────────────────── */

.pv-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.pv-table caption {
  text-align: left; font-family: var(--sans); font-size: 0.72rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft);
  padding-bottom: 0.7rem;
}
.pv-table th, .pv-table td {
  text-align: left; padding: 0.85rem 1rem 0.85rem 0;
  border-bottom: 1px solid var(--rule); vertical-align: top;
}
.pv-table th {
  font-family: var(--sans); font-weight: 500; font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);
  border-bottom: 1px solid var(--rule-strong);
}
.pv-table td:last-child, .pv-table th:last-child { text-align: right; padding-right: 0; white-space: nowrap; }

/* ── document layout with pinned contents ───────────────────────────── */

.pv-doc {
  display: grid; gap: clamp(1.8rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 58rem) { .pv-doc { grid-template-columns: minmax(0, 1fr); } }
/* .pv-doc is authored as narrow-sidebar-first, wide-prose-second (see the
   :toc + :prose pages). Two sections reuse this grid without a :toc — home's
   "Thirty minutes" card and /consultation — and happen to list :prose FIRST,
   so grid auto-placement drops the whole article (heading, paragraph, CTA
   button) into the 15rem sidebar track: "Request a consultation" wrapped
   into a two-line button in a ~50px-too-narrow column. Pin prose to the wide
   track and any sidebar content to the narrow one regardless of source order.
   Scoped to the same breakpoint as the 2-column layout itself — below it
   .pv-doc is a single implicit column, and an unconditional grid-column:2
   here would force the grid to open a second (implicit) column that the
   max-width rule above never intended, undoing the mobile stack. The fee
   table also needs more than 15rem for its row labels ("Grant of probate,
   uncontested") once the nowrap price cell claims its share, hence --fees. */
@media (min-width: 58.01rem) {
  .pv-doc > .pv-prose { grid-column: 2; }
  .pv-doc > :not(.pv-prose) { grid-column: 1; }
  .pv-doc--fees { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); }
}

.pv-toc { position: sticky; top: 1.5rem; font-family: var(--sans); font-size: 0.83rem; }
.pv-toc h2 {
  font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-soft);
  padding-bottom: 0.6rem; border-bottom: 1px solid var(--rule-strong); margin-bottom: 0.7rem;
}
.pv-toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.pv-toc a { text-decoration: none; color: var(--ink-soft); }
.pv-toc a:hover { color: var(--claret); }
@media (max-width: 58rem) { .pv-toc { position: static; } }

.pv-prose > * + * { margin-top: 1.15rem; }
.pv-prose h2 { font-size: 1.55rem; margin-top: 2.6rem; padding-top: 1.2rem; border-top: 1px solid var(--rule); }
.pv-prose h3 { font-size: 1.15rem; margin-top: 1.8rem; }
.pv-prose p { max-width: 68ch; }
.pv-prose ul { padding-left: 1.2rem; }
.pv-prose li + li { margin-top: 0.4rem; }

/* ── commentary list ────────────────────────────────────────────────── */

.pv-notes { border-top: 3px double var(--rule-strong); }
.pv-note {
  display: grid; grid-template-columns: minmax(0, 1fr) 10rem;
  gap: 1.4rem; padding-block: 1.5rem;
  border-bottom: 1px solid var(--rule); text-decoration: none; align-items: baseline;
}
.pv-note h3 { font-size: 1.24rem; }
.pv-note p { margin: 0.35rem 0 0; color: var(--ink-soft); font-size: 0.95rem; max-width: 66ch; }
.pv-note time {
  font-family: var(--sans); font-size: 0.76rem; letter-spacing: 0.1em;
  color: var(--ink-soft); text-align: right;
}
.pv-note:hover h3 { color: var(--claret); }
@media (max-width: 45rem) {
  .pv-note { grid-template-columns: minmax(0, 1fr); }
  .pv-note time { text-align: left; order: -1; }
}

/* ── questions ──────────────────────────────────────────────────────── */

.pv-qa { border-top: 1px solid var(--rule-strong); }
.pv-qa__item { border-bottom: 1px solid var(--rule); padding-block: 1.3rem; }
.pv-qa__item h3 { font-size: 1.16rem; }
.pv-qa__item p { margin: 0.5rem 0 0; color: var(--ink-soft); max-width: 68ch; }

/* ── buttons and links ──────────────────────────────────────────────── */

.pv-btn {
  display: inline-block;
  font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.14em;
  text-transform: uppercase; text-decoration: none;
  padding: 0.85rem 1.7rem;
  background: var(--claret); color: #fff; border: 1px solid var(--claret);
  cursor: pointer;
}
.pv-btn:hover { background: var(--forest); border-color: var(--forest); }
.pv-btn--quiet { background: transparent; color: inherit; border-color: currentColor; }
.pv-btn--quiet:hover { background: var(--forest); border-color: var(--forest); color: #fff; }

.pv-more {
  font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.1em;
  text-transform: uppercase; text-decoration: none;
  border-bottom: 1px solid var(--claret); padding-bottom: 2px;
}
.pv-actions { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; }

/* ── intake form ────────────────────────────────────────────────────── */

.pv-intake { background: var(--card); border: 1px solid var(--rule-strong); padding: clamp(1.4rem, 4vw, 2.6rem); }
.pv-intake h2 { font-size: 1.5rem; margin-bottom: 0.4rem; }
.pv-form { display: grid; gap: 1.1rem; margin-top: 1.6rem; }
.pv-form__pair { display: grid; gap: 1.1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 34rem) { .pv-form__pair { grid-template-columns: 1fr; } }
.pv-field { display: grid; gap: 0.3rem; }
.pv-field label {
  font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-soft);
}
.pv-field input, .pv-field select, .pv-field textarea {
  font: inherit; color: inherit; background: #fff;
  border: 1px solid var(--rule-strong); padding: 0.6rem 0.7rem; border-radius: 0;
}
.pv-field input:focus, .pv-field select:focus, .pv-field textarea:focus {
  outline: 2px solid var(--claret); outline-offset: -2px; border-color: var(--claret);
}
.pv-field__hint { margin: 0; font-family: var(--sans); font-size: 0.82rem; color: var(--ink-soft); }
.pv-hp { position: absolute; left: -9999px; }
.pv-form__status { margin: 0; font-family: var(--sans); font-size: 0.9rem; }
.pv-form__status[data-state="ok"] { color: var(--forest); }
.pv-form__status[data-state="err"] { color: var(--claret); }
.pv-form[data-busy] { opacity: 0.6; pointer-events: none; }

/* ── acknowledgement of receipt ─────────────────────────────────────── */
/* The enquiry leaves the screen and an acknowledgement takes its place, set
   like the letter the practice would send: what was received, then the order
   in which it is dealt with. */

.pv-received {
  background: var(--card);
  border: 1px solid var(--rule-strong);
  border-top: 3px solid var(--claret);
  padding: clamp(1.4rem, 4vw, 2.6rem);
}
.pv-received:focus { outline: none; }
.pv-received:focus-visible { outline: 2px solid var(--claret); outline-offset: 3px; }
.pv-received__line { font-size: clamp(1.35rem, 1.05rem + 1vw, 1.8rem); line-height: 1.25; }
.pv-received__file { margin: 1.8rem 0; table-layout: fixed; }
.pv-received__file th { width: 42%; }
.pv-received__file td { word-break: break-word; }
.pv-received__file td:last-child { text-align: left; white-space: normal; padding-right: 0; }
.pv-received__order { counter-reset: pv-r; list-style: none; margin: 0 0 1.8rem; padding: 0; display: grid; gap: 0.95rem; }
.pv-received__order li {
  counter-increment: pv-r; position: relative; padding-left: 2.7rem;
  color: var(--ink-soft); font-size: 0.97rem;
}
.pv-received__order li::before {
  content: counter(pv-r, upper-roman) ".";
  position: absolute; left: 0; top: 0.2rem;
  font-family: var(--sans); font-size: 0.76rem; letter-spacing: 0.1em; color: var(--claret);
}
.pv-received__order strong { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.pv-received__again {
  font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
  background: none; border: 0; border-bottom: 1px solid var(--claret);
  padding: 0 0 2px; color: inherit; cursor: pointer;
}
.pv-received__again:hover { color: var(--claret); }

/* ── plate: the one architectural image, behind a rule ──────────────── */

.pv-plate { border-block: 1px solid var(--rule); }
.pv-plate img { width: 100%; height: clamp(14rem, 30vw, 24rem); object-fit: cover; filter: grayscale(1) contrast(1.05); }
.pv-plate figcaption {
  font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-soft);
  padding: 0.7rem 0; text-align: center;
}

/* ── crumbs and detail ──────────────────────────────────────────────── */

.pv-crumbs {
  font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 1.6rem;
}
.pv-crumbs a { text-decoration: none; }
.pv-crumbs a:hover { color: var(--claret); }

.pv-detail h1 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem); line-height: 1.16; }
.pv-detail__meta { font-family: var(--sans); font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin: 0.7rem 0 2rem; }

.pv-foot { background: var(--forest-deep); color: #b6c7bd; padding-block: clamp(2.6rem, 6vw, 4.4rem) 2rem; }
.pv-foot__grid { display: grid; gap: clamp(1.6rem, 4vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.pv-foot h2 { font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: #8fa89c; margin-bottom: 0.7rem; }
.pv-foot p { margin: 0 0 0.5rem; font-size: 0.93rem; }
.pv-foot a { text-decoration: none; }
.pv-foot a:hover { color: #fff; text-decoration: underline; }
.pv-foot__mark { font-family: var(--serif); font-size: 1.5rem; color: #eef3ef; letter-spacing: 0.05em; margin-bottom: 0.1rem; }
.pv-foot__sub { font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.34em; text-transform: uppercase; color: #8fa89c; }
.pv-foot__about { max-width: 34ch; margin-top: 0.9rem; }
.pv-foot__nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; font-size: 0.93rem; }
.pv-hours { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 0.3rem 1rem; font-size: 0.93rem; }
.pv-hours dd { margin: 0; text-align: right; }
.pv-foot__fine { font-family: var(--sans); font-size: 0.76rem; color: #7d958a; margin: 0; }

.pv-empty { color: var(--ink-soft); font-style: italic; }