/* /insights/<slug>/, family FIRM "Material": the long-form guide. Loaded AFTER /about/assets/about.css, whose record
   ledger (.record, .ledger), closing (.closing) and document links (.docs) these pages reuse as they are. This file adds
   only the article head, the reading column, the contents rail, the clear "At Acrylic" pane and the related grid.
   Spectrum appears only as light (the hairline under the head, the glint on each pane). Text is graphite. */

/* ---------- article head: left set, one H1, a standfirst, a quiet meta line ---------- */
.art-head { padding: clamp(56px, 8vw, 112px) 0 0; }
.art-head h1 {
  font: 400 clamp(44px, 5.6vw, 82px)/1.02 var(--serif); letter-spacing: -.018em;
  margin: 0 0 26px; max-width: 13.5em; text-wrap: balance;
}
.art-dek { font: 400 clamp(21px, 1.9vw, 26px)/1.45 var(--serif); color: var(--ink-2); margin: 0; max-width: 32em; text-wrap: pretty; }
.art-meta {
  display: flex; flex-wrap: wrap; gap: 8px 30px; list-style: none; padding: 0; margin: 34px 0 0;
  font: 500 13.5px/1.4 var(--sans); letter-spacing: .02em; color: var(--ink-3);
}
.art-meta li { position: relative; }
.art-meta li + li::before {
  content: ""; position: absolute; left: -16px; inset-block-start: .62em; width: 3px; height: 3px;
  border-radius: 50%; background: currentColor;
}
/* the hairline: graphite that splits into light toward its end, the way an edge of acrylic does */
.art-rule {
  display: block; height: 1px; margin-top: clamp(44px, 5vw, 64px);
  background: linear-gradient(90deg, rgba(29, 33, 38, .55), rgba(29, 33, 38, .55) 58%, rgba(79, 195, 232, .75) 70%,
    rgba(156, 124, 244, .7) 79%, rgba(224, 122, 176, .65) 88%, rgba(242, 199, 126, .7) 95%, rgba(242, 199, 126, 0));
}

/* ---------- body: contents rail + reading column (the same 4/8 split as the /about record) ---------- */
.art-body { padding: clamp(48px, 6vw, 88px) 0 clamp(80px, 10vw, 136px); }
.art-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; align-items: start; }
.art-toc-h { font: 600 12.5px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 14px; }
.art-toc ol { list-style: none; counter-reset: toc; padding: 0; margin: 0; border-top: 1px solid rgba(29, 33, 38, .7); max-width: 22rem; }
.art-toc li { counter-increment: toc; border-bottom: 1px solid var(--line); }
.art-toc a {
  display: flex; align-items: baseline; gap: 14px; min-height: 44px; padding: 12px 0;
  font: 500 15px/1.35 var(--sans); color: var(--ink-2); text-decoration: none;
}
.art-toc a::before { content: counter(toc, decimal-leading-zero); flex: none; min-width: 1.7em; font: 400 16px/1 var(--serif); color: var(--ink-3); }
.art-toc a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.art-toc a:focus-visible, .art-prose a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }

.art-prose { max-width: 40rem; }
.art-prose > section + section { margin-top: clamp(52px, 5.4vw, 76px); }
.art-prose h2 {
  font: 400 clamp(30px, 3vw, 42px)/1.08 var(--serif); letter-spacing: -.01em; margin: 0 0 20px;
  scroll-margin-top: 104px; text-wrap: balance;
}
.art-prose p { margin: 0 0 18px; font-size: 18px; line-height: 1.7; text-wrap: pretty; }
.art-prose a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.art-prose a:hover { text-decoration-thickness: 2px; }
.art-prose ul, .art-prose ol { list-style: none; padding: 0; margin: 0 0 22px; }
.art-prose li { position: relative; padding-left: 28px; margin: 0 0 11px; font-size: 18px; line-height: 1.6; text-wrap: pretty; }
.art-prose ul > li::before { content: ""; position: absolute; left: 3px; inset-block-start: .8em; width: 13px; height: 1px; background: var(--ink); }
.art-prose ol { counter-reset: step; }
.art-prose ol > li { counter-increment: step; padding-left: 42px; }
.art-prose ol > li::before { content: counter(step); position: absolute; left: 0; inset-block-start: -.02em; font: 400 24px/1.2 var(--serif); color: var(--ink-3); }
.art-prose strong { font-weight: 600; }

/* a term and what it means, ruled like the record */
.art-terms { margin: 6px 0 26px; border-top: 1px solid rgba(29, 33, 38, .7); }
.art-terms > div { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); gap: 22px; padding: 16px 0 15px; border-bottom: 1px solid var(--line); }
.art-terms dt { font: 400 21px/1.3 var(--serif); color: var(--ink); }
.art-terms dd { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); }

/* "At Acrylic": a standing pane of clear acrylic in the column (the /about name plate, quieter) */
.art-pane {
  position: relative; isolation: isolate; margin: 30px 0 10px; padding: 30px 30px 26px; border-radius: 7px 7px 3px 3px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .84) 0, rgba(255, 255, 255, .52) 30%, rgba(255, 255, 255, .3) 100%);
  box-shadow:
    inset 2px 0 0 rgba(255, 255, 255, .95),
    inset -2px 0 0 rgba(255, 255, 255, .7),
    inset 0 -2px 0 rgba(29, 33, 38, .08),
    0 0 0 1px rgba(29, 33, 38, .12),
    0 26px 30px -26px rgba(29, 33, 38, .3);
}
.art-pane::before {
  content: ""; position: absolute; left: 0; right: 0; inset-block-start: 0; height: 10px; z-index: -1; border-radius: 7px 7px 0 0;
  background: linear-gradient(180deg, #FFFFFF 0, #FFFFFF 30%, rgba(203, 209, 214, .7) 60%, rgba(255, 255, 255, .85) 80%, rgba(226, 230, 234, .5) 100%);
}
.art-pane::after {
  content: ""; position: absolute; inset-block-start: 3px; right: 14%; width: 48px; height: 3px; border-radius: 3px; z-index: -1;
  background: linear-gradient(90deg, rgba(79, 195, 232, 0), rgba(79, 195, 232, .7), rgba(156, 124, 244, .6), rgba(224, 122, 176, .6), rgba(242, 199, 126, .7), rgba(242, 199, 126, 0));
  filter: blur(.8px);
}
.art-pane p, .art-pane li { font-size: 17px; }
.art-pane .art-pane-h { font: 600 12.5px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 14px; }
.art-pane > :last-child { margin-bottom: 0; }
.art-prose .art-src { font-size: 14px; line-height: 1.5; color: var(--ink-3); }

/* ---------- the record, related guides and the closing: about.css draws them; spacing for a long page ---------- */
.art-record { border-top: 1px solid var(--line); padding: clamp(64px, 8vw, 104px) 0; }
.art-record .ledger dd { font-size: clamp(21px, 1.9vw, 27px); }
.art-record .ledger dd a { text-underline-offset: 4px; text-decoration-thickness: 1px; overflow-wrap: anywhere; }
.art-more { padding: 0 0 clamp(72px, 9vw, 120px); }
.art-more h2 { font: 400 clamp(32px, 3.4vw, 46px)/1.05 var(--serif); letter-spacing: -.01em; margin: 0 0 28px; }
.art-more .docs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.art-more .docs li a { border-left: 1px solid var(--line); padding-left: 18px; min-height: 84px; font: 400 21px/1.25 var(--serif); }
.art-more .docs li:nth-child(3n+1) a { border-left: 0; padding-left: 0; }
.art-close-note { color: var(--ink-2); margin: -14px auto 30px; max-width: 30em; }

/* ---------- tablet ---------- */
@media (min-width: 1021px) {
  .art-toc { position: sticky; inset-block-start: 112px; }
}
@media (max-width: 1020px) {
  .art-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .art-toc ol { max-width: none; }
  .art-more .docs { grid-template-columns: 1fr 1fr; }
  .art-more .docs li a { border-left: 1px solid var(--line); padding-left: 18px; }
  .art-more .docs li:nth-child(2n+1) a { border-left: 0; padding-left: 0; }
}

/* ---------- phone ---------- */
@media (max-width: 760px) {
  .art-head { padding-top: 44px; }
  .art-head h1 { font-size: clamp(38px, 10.6vw, 50px); line-height: 1.04; margin-bottom: 18px; }
  .art-dek { font-size: 20px; }
  .art-meta { margin-top: 24px; flex-direction: column; gap: 4px; }
  .art-meta li + li::before { display: none; }
  .art-rule { margin-top: 36px; }
  .art-body { padding: 36px 0 72px; }
  .art-prose h2 { font-size: clamp(28px, 7.6vw, 34px); scroll-margin-top: 84px; }
  .art-prose p, .art-prose li { font-size: 17px; }
  .art-terms > div { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; }
  .art-terms dt { font-size: 20px; }
  .art-pane { padding: 26px 22px 22px; }
  .art-record { padding: 56px 0; }
  .art-record .ledger dd { font-size: 22px; }
}
@media (max-width: 560px) {
  .art-more .docs { grid-template-columns: 1fr; }
  .art-more .docs li a, .art-more .docs li:nth-child(2n+1) a { border-left: 0; padding-left: 0; min-height: 64px; font-size: 20px; }
}