/** PunisherTN 5.9 — editorial layout for legal, about, and normal text pages. */
.ptn-document {
  width: min(calc(100% - 48px),1320px);
  padding-block: clamp(34px,5vw,64px) clamp(70px,9vw,118px);
}
.ptn-document-hero {
  position: relative;
  min-height: clamp(230px,27vw,330px);
  padding: clamp(27px,5vw,62px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border-top: 1px solid rgba(222,219,207,.18);
  border-bottom: 1px solid rgba(222,219,207,.13);
  background:
    linear-gradient(105deg,rgba(200,192,158,.065),transparent 38%),
    radial-gradient(circle at 88% 25%,rgba(37,227,223,.035),transparent 18rem),
    #0b0d0e;
}
.ptn-document-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(112deg,rgba(255,255,255,.01) 0 1px,transparent 1px 12px);
  pointer-events: none;
}
.ptn-document-meta {
  position: absolute;
  z-index: 2;
  top: 24px;
  left: clamp(27px,5vw,62px);
  right: clamp(27px,5vw,62px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: #696f6c;
  font: 720 .58rem/1.2 Inter,system-ui,sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.ptn-document-hero h1 {
  position: relative;
  z-index: 2;
  max-width: 850px;
  margin: 0;
  color: #efede7;
  font-family: Inter,system-ui,sans-serif;
  font-size: clamp(2.8rem,7vw,6.3rem);
  font-weight: 640;
  letter-spacing: -.065em;
  line-height: .92;
  text-transform: none;
  text-wrap: balance;
}
.ptn-document-hero > p {
  position: relative;
  z-index: 2;
  max-width: 650px;
  margin: 18px 0 0;
  color: #8e9390;
  font-size: clamp(.82rem,1.4vw,.98rem);
  line-height: 1.6;
}
.ptn-chroma-field--document { inset: 0; z-index: 1; opacity: .58; }
.ptn-chroma-field--document .ptn-chroma-corner { right: 26px; bottom: 24px; width: 58px; height: 58px; }
.ptn-chroma-field--document .ptn-chroma-crosshair { right: 9%; top: 25%; width: 48px; height: 48px; }
.ptn-chroma-field--document .ptn-chroma-plus { right: 27%; top: 19%; width: 13px; height: 13px; }
.ptn-chroma-field--document .ptn-chroma-x { right: 4%; top: 34%; width: 12px; height: 12px; }

.ptn-document-layout {
  display: grid;
  grid-template-columns: minmax(210px,.55fr) minmax(0,1.45fr);
  gap: clamp(32px,6vw,82px);
  align-items: start;
}
.ptn-document-rail {
  position: sticky;
  top: 96px;
  padding-top: 32px;
  display: grid;
  gap: 2px;
}
.ptn-document-rail-label {
  margin-bottom: 11px;
  color: #5f6562;
  font-size: .57rem;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.ptn-document-rail > a {
  min-height: 38px;
  padding: 8px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #777d79;
  font-size: .72rem;
  text-decoration: none;
  transition: color .2s ease,transform .2s ease;
}
.ptn-document-rail > a i {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  border: 1px solid rgba(222,219,207,.18);
  border-radius: 50%;
  transition: border-color .2s ease,box-shadow .2s ease;
}
.ptn-document-rail > a:hover,
.ptn-document-rail > a.is-current { color: #d4d1c8; transform: translateX(3px); }
.ptn-document-rail > a.is-current i {
  border-color: rgba(222,219,207,.6);
  box-shadow: 2px 0 0 rgba(37,227,223,.45),-2px 1px 0 rgba(255,49,95,.42);
}
.ptn-document-help {
  margin-top: 25px;
  padding: 17px 0 0;
  border-top: 1px solid rgba(222,219,207,.1);
}
.ptn-document-help > span { color: #aaa486; font-size: .59rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.ptn-document-help p { margin: 8px 0 12px; color: #686f6b; font-size: .7rem; line-height: 1.5; }
.ptn-document-help a { color: #aaa691; font-size: .64rem; font-weight: 720; letter-spacing: .04em; text-decoration: none; text-transform: uppercase; }
.ptn-document-help a:hover { color: #e2ded0; }

.ptn-document-content { min-width: 0; }
.ptn-document-section {
  scroll-margin-top: 100px;
  padding: clamp(38px,6vw,70px) 0;
  display: grid;
  grid-template-columns: 48px minmax(0,1fr);
  gap: clamp(18px,3vw,34px);
  border-top: 1px solid rgba(222,219,207,.12);
}
.ptn-document-section:last-child { border-bottom: 1px solid rgba(222,219,207,.09); }
.ptn-document-index {
  padding-top: 5px;
  color: #5f6562;
  font: 720 .62rem/1 Inter,system-ui,sans-serif;
  letter-spacing: .1em;
}
.ptn-document-index::after { content: ""; width: 18px; height: 1px; margin-top: 10px; display: block; background: #6f7267; }
.ptn-document-kicker {
  color: #8d896f;
  font-size: .57rem;
  font-weight: 760;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.ptn-document-section h2,
.ptn-document-editor h2 {
  margin: 9px 0 18px;
  color: #e7e4dc;
  font-family: Inter,system-ui,sans-serif;
  font-size: clamp(1.75rem,3.5vw,2.65rem);
  font-weight: 630;
  letter-spacing: -.04em;
  line-height: 1.04;
  text-transform: none;
}
.ptn-document-section h3,
.ptn-document-editor h3 { color: #d8d5cd; font-family: Inter,system-ui,sans-serif; font-weight: 630; text-transform: none; }
.ptn-document-section p,
.ptn-document-section li,
.ptn-document-editor p,
.ptn-document-editor li {
  color: #9ba09c;
  font-size: .9rem;
  line-height: 1.78;
}
.ptn-document-section p { max-width: 760px; margin: 0; }
.ptn-document-section ul,
.ptn-document-editor ul { margin: 0; padding: 0; display: grid; gap: 12px; list-style: none; }
.ptn-document-section li,
.ptn-document-editor li { position: relative; padding-left: 22px; }
.ptn-document-section li::before,
.ptn-document-editor li::before {
  content: "+";
  position: absolute;
  left: 0;
  top: 0;
  color: #aaa486;
  text-shadow: 1px 0 rgba(37,227,223,.5),-1px 1px rgba(255,49,95,.45);
}
.ptn-document-action {
  min-height: 42px;
  margin-top: 23px;
  padding: 10px 14px;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  border: 1px solid rgba(222,219,207,.18);
  border-radius: 3px;
  color: #d0cbb7;
  font-size: .65rem;
  font-weight: 740;
  letter-spacing: .06em;
  text-decoration: none;
  text-transform: uppercase;
}
.ptn-document-action:hover { border-color: rgba(222,219,207,.36); background: rgba(255,255,255,.025); color: #f0ede3; }

/* Editor-authored pages receive the same typographic rhythm automatically. */
.ptn-document-editor {
  scroll-margin-top: 100px;
  padding-block: clamp(38px,6vw,70px);
  border-top: 1px solid rgba(222,219,207,.12);
  background: transparent;
}
.ptn-document-editor > * { max-width: 820px; }
.ptn-document-editor > h2:not(:first-child) { margin-top: 56px; padding-top: 45px; border-top: 1px solid rgba(222,219,207,.11); }
.ptn-document-editor a { color: #c2bda6; text-underline-offset: 3px; }
.ptn-document-editor blockquote { border-left-color: #89856e; background: rgba(255,255,255,.018); }
.ptn-document-editor img { max-width: 100%; border: 1px solid rgba(222,219,207,.12); border-radius: 5px; }

@media (max-width: 820px) {
  .ptn-document { width: min(calc(100% - 28px),760px); }
  .ptn-document-layout { grid-template-columns: 1fr; gap: 0; }
  .ptn-document-rail {
    position: static;
    padding: 18px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    border-bottom: 1px solid rgba(222,219,207,.1);
    scrollbar-width: none;
  }
  .ptn-document-rail::-webkit-scrollbar { display: none; }
  .ptn-document-rail-label { display: none; }
  .ptn-document-rail > a { min-height: 34px; padding: 7px 10px; flex: 0 0 auto; border: 1px solid rgba(222,219,207,.1); border-radius: 999px; }
  .ptn-document-rail > a i { display: none; }
  .ptn-document-rail > a:hover,
  .ptn-document-rail > a.is-current { transform: none; }
  .ptn-document-help { display: none; }
}
@media (max-width: 560px) {
  .ptn-document { width: min(calc(100% - 20px),560px); padding-top: 20px; }
  .ptn-document-hero { min-height: 220px; padding: 24px 20px; }
  .ptn-document-meta { top: 18px; left: 20px; right: 20px; }
  .ptn-document-hero h1 { font-size: clamp(2.35rem,13vw,3.7rem); }
  .ptn-document-hero > p { margin-top: 12px; font-size: .77rem; }
  .ptn-document-section { padding-block: 38px; grid-template-columns: 1fr; gap: 16px; }
  .ptn-document-index { display: flex; align-items: center; gap: 10px; }
  .ptn-document-index::after { margin: 0; }
  .ptn-document-section p,
  .ptn-document-section li,
  .ptn-document-editor p,
  .ptn-document-editor li { font-size: .84rem; line-height: 1.7; }
  .ptn-chroma-field--document .ptn-chroma-crosshair { right: 10%; top: 22%; width: 29px; height: 29px; }
  .ptn-chroma-field--document .ptn-chroma-plus { display: none; }
  .ptn-chroma-field--document .ptn-chroma-corner { right: 13px; bottom: 13px; width: 37px; height: 37px; }
}
@media (prefers-reduced-motion: reduce) {
  .ptn-document-rail > a { transition: none; }
}
