/* brandonlehmanshow.com — secondary pages.
   Section 1 styles the reading pages (contact.html, privacy.html) on the new
   shell: experience.css tokens and type roles only, hairlines not boxes,
   radii 0, no cards, no eyebrows. The previous store CSS that lived below is
   gone with shop.html (now a redirect to /shop/). */

/* 1. Reading pages: title left, text right (5/7 asymmetry), measure <= 68ch. */
.doc {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--s-5);
  row-gap: var(--s-8);
  align-items: start;
  min-height: 70svh;
  padding-top: calc(var(--nav-h) + clamp(64px, 10vw, 160px));
  padding-bottom: clamp(64px, 10vw, 160px);
}
.doc__head { grid-column: 1 / span 5; }
.doc__head .display-2 { max-width: 9ch; }
.doc__meta { margin-top: var(--s-5); max-width: 32ch; }
.doc__body { grid-column: 7 / -1; max-width: var(--measure); }
.doc__body .subhead { margin: var(--s-8) 0 var(--s-3); }
.doc__body .body + .body { margin-top: var(--s-4); }
.doc__body a {
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  overflow-wrap: anywhere;
  transition: text-decoration-color var(--t-state) var(--ease-out);
}
.doc__body a:hover { text-decoration-color: currentColor; }
.doc__address { margin-top: var(--s-2); }
.doc__address a {
  display: inline-block;
  min-height: 44px;
  padding-block: var(--s-2);
  font: 400 22px/1.3 var(--font-display);
  letter-spacing: -0.01em;
}
@media (min-width: 761px) {
  .doc__head { position: sticky; top: calc(var(--nav-h) + var(--s-6)); }
}
@media (max-width: 1000px) {
  .doc__head { grid-column: 1 / span 12; }
  .doc__body { grid-column: 1 / span 12; }
}
@media (max-width: 760px) {
  .doc {
    row-gap: var(--s-7);
    padding-top: calc(var(--nav-h-mobile) + var(--s-8));
    padding-bottom: var(--s-9);
  }
  .doc__body { border-top: 1px solid var(--line); padding-top: var(--s-6); }
  .doc__body .subhead { margin-top: var(--s-7); }
}