/* legal.css: /privacy/, /terms/, /cancellation-policy/ (SPEC 5 P7). One porcelain band: a page head with the H1 set
   large and the lede and date bottom-right, a hairline, then a numbered sticky rail (columns 1 to 3) beside a 64ch
   reading column (columns 5 to 11) with hanging numerals on the H2s. The cancellation table sits on celadon (the page's
   one quiet band of hard facts). The contact block closes the column at statement size. */

.aj-site .lg { padding-block: clamp(32px, 1rem + 4vw, 88px) clamp(96px, 3rem + 7vw, 176px); }

/* ---------- head ---------- */
.lg-head { position: relative; display: grid; gap: clamp(20px, 2vw, 32px); padding-bottom: clamp(40px, 1.5rem + 3vw, 88px); }
.lg-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); transform-origin: left; }
.aj-site .lg-title { margin: 0; max-width: 13ch; }
.lg-title .w { display: inline-block; overflow: clip; vertical-align: top; padding: 0.06em 0 0.14em; margin: -0.06em 0 -0.14em; }
.lg-title .w > span { display: inline-block; }
.lg-head-side { display: grid; gap: 16px; align-content: end; }
.aj-site .lg-head .t-lede { margin: 0; max-width: 30ch; color: var(--text-2); }
.lg-updated { display: flex; align-items: center; gap: 14px; margin: 0; font-size: var(--fs-meta); font-weight: 500; color: var(--text-2); }
.lg-updated::before { content: ""; flex: none; width: 32px; height: 1px; background: currentColor; }
.lg-updated .num { color: var(--text); }

/* ---------- body grid ---------- */
.lg-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 6vw, 64px); padding-top: clamp(40px, 1.5rem + 3vw, 96px); }

/* the rail */
.lg-toc { min-width: 0; align-self: start; }
.lg-toc-k { margin: 0 0 16px; font-size: var(--fs-meta); font-weight: 500; color: var(--text-2); }
.lg-toc ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.lg-toc li { position: relative; }
.lg-toc a {
  position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: baseline; gap: 4px;
  min-height: 44px; padding: 11px 0; border-bottom: 1px solid var(--line);
  font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--text-2); text-decoration: none;
  transition: color var(--dur-hover) var(--ease-out);
}
.lg-toc a .num { font-size: var(--fs-meta); color: var(--text-2); font-variant-numeric: tabular-nums; }
.lg-toc-t { transition: translate var(--dur-hover) var(--ease-out); }
.lg-toc a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--line-strong); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-hover) var(--ease-out); }
.lg-toc a:is(:hover, :focus-visible) { color: var(--text); }
.lg-toc a:is(:hover, :focus-visible) .lg-toc-t { translate: 6px 0; }
.lg-toc a[aria-current] { color: var(--text); }
.lg-toc a[aria-current]::after { transform: scaleX(1); }
.lg-toc a[aria-current] .num { color: var(--text); }

/* the reading column */
.aj-site .lg-body { max-width: 64ch; min-width: 0; font-size: var(--fs-body); line-height: 1.7; color: var(--text); }
.lg-sec { position: relative; scroll-margin-top: calc(var(--frame-top, 88px) + 32px); }
.lg-sec + .lg-sec, .lg-before + .lg-sec { margin-top: clamp(56px, 2rem + 3vw, 96px); }
.aj-site .lg-h2 { display: grid; gap: 10px; margin: 0 0 clamp(16px, 1.4vw, 24px); font-size: clamp(1.625rem, 1.3rem + 1.1vw, 2.375rem); font-weight: 500; line-height: 1.12; letter-spacing: -0.03em; color: var(--heading); text-wrap: balance; }
.aj-site .lg-n { font-size: var(--fs-small); font-weight: 500; letter-spacing: 0; line-height: 1; color: var(--text-2); font-variant-numeric: tabular-nums; }
.lg-text { color: var(--text-2); }
.lg-text p { margin: 0; }
.lg-text p + p, .lg-text p + ul, .lg-text ul + p, .lg-text p + dl, .lg-text dl + p { margin-top: 1em; }
.lg-text ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.lg-text li { position: relative; padding: 12px 0 12px 32px; border-bottom: 1px solid var(--line); }
.lg-text li::before { content: ""; position: absolute; left: 0; top: calc(12px + 0.85em); width: 14px; height: 1px; background: var(--text-2); }
.lg-text li + li { margin-top: 0; }

/* ---------- cancellation: the table on celadon and the tier rows ---------- */
.lg-before { margin: 0 0 clamp(56px, 2rem + 3vw, 96px); }
.lg-table-wrap { background: var(--celadon); padding: clamp(20px, 2.4vw, 36px) clamp(20px, 2.4vw, 40px) clamp(12px, 1.2vw, 20px); }
.lg-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); line-height: 1.4; font-variant-numeric: tabular-nums; }
.lg-table thead th { padding: 0 0 14px; text-align: left; font-size: var(--fs-meta); font-weight: 500; color: var(--ink-2); border-bottom: 1px solid var(--ink); }
.lg-table thead th:last-child { text-align: right; }
.lg-table tbody th, .lg-table tbody td { padding: 18px 0; border-bottom: 1px solid var(--hair); vertical-align: baseline; }
.lg-table tbody tr:last-child > * { border-bottom: 0; }
.lg-table tbody th { padding-right: 24px; text-align: left; font-weight: 500; color: var(--ink-2); }
.lg-table tbody td { text-align: right; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }

.lg-tiers { margin: 20px 0; border-top: 1px solid var(--line); }
.lg-tiers > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.lg-tiers dt { margin: 0; }
.lg-tiers dd { margin: 0; text-align: right; font-weight: 500; line-height: 1.4; color: var(--text); }
.aj-site .lg-tiers .tag-tier { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 10px; border-radius: var(--r-1); font-size: var(--fs-meta); font-weight: 600; font-style: italic; letter-spacing: 0.02em; }
.aj-site .lg-tiers .tag-tier[data-tier="member"] { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.aj-site .lg-tiers .tag-tier[data-tier="jade"] { background: var(--green-high); color: var(--mist); box-shadow: none; }
.aj-site .lg-tiers .tag-tier[data-tier="vermilion"] { background: var(--pine); color: var(--mist); box-shadow: none; }
/* phones: the tags in a fixed column and the windows left aligned beside them, so the rows read as one ragged-free list */
@media (max-width: 599px) {
  .lg-tiers > div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; }
  .lg-tiers dd { text-align: left; }
  .lg-table tbody td { text-wrap: balance; }
}

/* ---------- the contact block ---------- */
.lg-contact { display: grid; gap: 28px; justify-items: start; margin-top: clamp(80px, 3rem + 5vw, 144px); padding-top: clamp(32px, 3vw, 48px); border-top: 1px solid var(--line-strong); }
.aj-site .lg-contact-line { margin: 0; max-width: 28ch; font-size: clamp(1.375rem, 1.1rem + 1.1vw, 2.125rem); font-weight: 400; line-height: 1.25; letter-spacing: -0.02em; color: var(--text); text-wrap: balance; }
.lg-contact .btn-row { display: flex; flex-wrap: wrap; }
.lg-related { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; font-size: 15px; font-weight: 500; }
.lg-related .btn-link { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- desktop: head on the grid, sticky numbered rail, hanging numerals ---------- */
@media (min-width: 1024px) {
  .lg-head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
  .lg-title { grid-column: 1 / span 8; }
  .lg-head-side { grid-column: 9 / -1; padding-bottom: 0.6em; }
  .lg-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
  .lg-toc { grid-column: 1 / span 3; position: sticky; top: calc(var(--frame-top, 88px) + 32px); }
  .aj-site .lg-body { grid-column: 5 / span 7; }
  .aj-site .lg-h2 { display: block; position: relative; }
  .aj-site .lg-n { position: absolute; right: calc(100% + 28px); top: 0.55em; }
  .lg-before { margin-top: 6px; }
}
@media (min-width: 1024px) and (max-height: 760px) {
  .lg-toc a { min-height: 40px; padding: 9px 0; font-size: 14px; }
}

/* ---------- load: the H1's words rise, the side fades up (CSS only; nothing hidden under reduced motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .lg-title .w > span { animation: mh-word var(--dur-reveal) var(--ease-out) both; animation-delay: calc(120ms + var(--i, 0) * 70ms); }
  .lg-head-side { animation: mh-up 900ms var(--ease-out) 520ms both; }
  .lg-head::after { animation: lg-draw 1400ms var(--ease-out) 300ms both; }
}
@keyframes lg-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }