/* Transcending Personal Training
   Legal pages, HTML sitemap and 404 (dark document layout). */

.page-legal {
  background:#101010;
  background-image:radial-gradient(rgba(255,255,255,.035) 1.2px,transparent 1.5px);
  background-size:24px 24px;
}

.page-legal .lg-wrap {
  max-width:860px;
  margin:0 auto;
  padding:48px 24px 100px;
}

.lg-bc ol {
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:0 0 22px;
  padding:0;
  font-size:.8rem;
  font-weight:600;
  color:#fff;
}

.lg-bc li + li::before {
  content:"/";
  margin-right:6px;
  color:#ED1C24;
}

.lg-bc a {
  color:#fff;
  text-decoration:none;
}

.lg-bc a:hover {
  color:#ED1C24;
}

.page-legal .lg-wrap h1 {
  font-family:'Bebas Neue','Bebas Fallback',sans-serif;
  font-weight:400;
  font-size:clamp(2.8rem,7vw,4.6rem);
  line-height:.92;
  letter-spacing:.01em;
  margin:0;
  color:#fff;
}

.page-legal .lg-wrap h1 .ital {
  font-family:'Lora','Lora Fallback',serif;
  font-style:italic;
  font-size:.55em;
  color:#ED1C24;
  display:block;
  margin-top:8px;
}

.lg-updated {
  font-size:.8rem;
  color:#d9d6d2;
  font-weight:600;
  margin:16px 0 0;
}

.lg-intro {
  color:#d9d6d2;
  font-size:.98rem;
  line-height:1.7;
  margin:18px 0 44px;
  max-width:66ch;
}

.page-legal .lg-wrap section {
  margin:0 0 48px;
  scroll-margin-top:96px;
}

.page-legal .lg-wrap h2 {
  font-family:'Bebas Neue','Bebas Fallback',sans-serif;
  font-weight:400;
  font-size:2rem;
  letter-spacing:.03em;
  line-height:1.05;
  color:#fff;
  padding-bottom:10px;
  border-bottom:3px solid #ED1C24;
  margin:44px 0 20px;
  scroll-margin-top:96px;
}

.page-legal .lg-wrap h3 {
  font-size:1.1rem;
  font-weight:800;
  color:#fff;
  margin:26px 0 10px;
}

.page-legal .lg-wrap p,
.page-legal .lg-wrap li {
  font-size:.96rem;
  line-height:1.75;
  color:#d9d6d2;
}

.page-legal .lg-wrap p {
  margin:0 0 14px;
}

.page-legal .lg-wrap ul,
.page-legal .lg-wrap ol {
  margin:0 0 14px 22px;
}

.page-legal .lg-wrap li {
  margin-bottom:6px;
}

.page-legal .lg-wrap strong,
.page-legal .lg-wrap code {
  color:#fff;
}

.page-legal .lg-wrap a {
  color:#fff;
  text-underline-offset:3px;
}

.page-legal .lg-wrap a:hover {
  color:#ED1C24;
}

.lg-doc {
  margin-top:32px;
}

.toc,
.lg-contact,
.contact-block,
.notice {
  background:#0b0b0b;
  border:1px solid #262626;
  border-left:3px solid #ED1C24;
  border-radius:0 6px 6px 0;
  padding:18px 22px;
  margin:18px 0 24px;
}

.toc strong {
  display:block;
  margin-bottom:8px;
}

.page-legal .toc ol {
  margin:0 0 0 20px;
}

.page-legal .toc li {
  margin-bottom:4px;
}

.page-legal .lg-contact p,
.page-legal .contact-block p {
  margin:0 0 6px;
}

.page-legal .lg-contact p:last-child,
.page-legal .contact-block p:last-child {
  margin-bottom:0;
}

.lg-ck {
  font:inherit;
  font-weight:700;
  font-size:.9rem;
  color:#fff;
  background:var(--red-dark);
  border:0;
  border-radius:6px;
  padding:12px 20px;
  cursor:pointer;
}

.lg-ck:hover {
  background:#c4141b;
}

.sm-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px 40px;
}

.page-legal .sm-grid h2 {
  margin-top:8px;
}

.page-legal .sm-grid ul {
  list-style:none;
  margin:0;
}

.page-legal .sm-grid a {
  text-decoration:none;
  font-weight:700;
}

/* 404 */
.page-404 .nf {
  min-height:70vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:56px 24px 80px;
  color:#fff;
}

.nf .eyebrow {
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:700;
  font-size:.85rem;
  letter-spacing:.22em;
  text-transform:uppercase;
}

.nf .eyebrow .stars {
  color:#ED1C24;
  letter-spacing:.3em;
}

.nf .big404 {
  font-family:'Bricolage Grotesque','Bricolage Fallback',sans-serif;
  font-weight:800;
  font-size:clamp(7rem,24vw,13rem);
  line-height:.95;
  letter-spacing:-.02em;
  margin-top:18px;
}

.nf .big404 .zero,
.nf .err {
  color:#ED1C24;
}

.nf .err {
  font-weight:800;
  font-size:.85rem;
  letter-spacing:.5em;
  text-indent:.5em;
  text-transform:uppercase;
  margin-top:8px;
}

.page-404 .nf h1 {
  font-family:'Bricolage Grotesque','Bricolage Fallback',sans-serif;
  font-weight:800;
  font-size:clamp(2rem,6vw,3.6rem);
  line-height:1.08;
  margin:22px 0 0;
  text-transform:uppercase;
  max-width:16ch;
  color:#fff;
  letter-spacing:0;
}

.page-404 .nf h1 .serif {
  font-family:'Lora','Lora Fallback',serif;
  font-style:italic;
  font-weight:400;
  text-transform:none;
}

.nf .lead {
  margin-top:20px;
  max-width:48ch;
  font-size:1.05rem;
  line-height:1.65;
}

.nf .actions {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
  margin-top:34px;
}

.nf .btn {
  display:inline-block;
  text-decoration:none;
  font-weight:700;
  padding:16px 30px;
  border-radius:6px;
  color:#fff;
}

.nf .btn-red {
  background:#ED1C24;
}

.nf .btn-red:hover {
  background:#c4141b;
}

.nf .btn-ghost {
  border:1px solid rgba(255,255,255,.4);
}

.nf .btn-ghost:hover {
  border-color:#ED1C24;
  color:#ED1C24;
}

.nf .helper {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px 28px;
  margin-top:44px;
  font-weight:700;
}

.nf .helper a,
.nf .contact a {
  color:#fff;
}

.nf .helper a {
  text-decoration:none;
}

.nf .helper a:hover,
.nf .contact a:hover {
  color:#ED1C24;
}

.nf .contact {
  margin-top:22px;
  font-size:.9rem;
}

@media (max-width:640px) {
  .sm-grid {
    grid-template-columns:1fr;
  }
}