/* =============================================================================
   Performify article stylesheet · sourced from Lab article template
   Loaded only by /labs/[slug]/index.html article pages.
   ============================================================================= */

/* ==========================================================================
   ARTICLE TEMPLATE · v0.1 additions
   ========================================================================== */

/* Template sheet masthead (only visible in this reference file) */
.template-mast {
  max-width: 1060px; margin: 0 auto;
  padding: var(--s-48) var(--gutter) var(--s-24);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-micro);
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-muted);
  display: grid; grid-template-columns: 1fr auto; gap: var(--s-16);
  border-bottom: 1px dashed var(--border-2);
}
.template-mast b { color: var(--text); font-weight: 500; }
.template-mast .accent { color: var(--accent); }

/* Article masthead */
.article-mast {
  max-width: 1060px; margin: 0 auto;
  padding: var(--s-96) var(--gutter) var(--s-48);
}
.article-mast .am-row {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-16);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-micro);
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-muted);
}
.article-mast .am-row .stamp.mint  { color: var(--accent); }
.article-mast .am-row .stamp.amber { color: var(--accent-amber); }
.article-mast .am-row .stamp.red   { color: var(--accent-red); }
.article-mast .am-chip { margin-top: var(--s-24); }
.article-mast h1 {
  font-family: 'Outfit', sans-serif; font-weight: 700;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  letter-spacing: -0.03em; line-height: 1.02;
  max-width: 20ch;
  margin-top: var(--s-24);
}
.article-mast h1 em { font-style: normal; color: var(--accent); font-weight: 500; }
.article-mast .deck {
  font-family: 'Outfit', sans-serif; font-weight: 300;
  font-size: var(--t-sub);
  color: var(--text-body);
  max-width: 60ch;
  margin-top: var(--s-24);
  line-height: 1.3;
  text-wrap: pretty;
}
.article-mast .meta-strip {
  margin-top: var(--s-48);
  padding-top: var(--s-24);
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-24);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-micro);
  text-transform: uppercase; letter-spacing: 0.1em;
}
.article-mast .meta-strip .k { display: block; color: var(--text-muted); margin-bottom: 8px; }
.article-mast .meta-strip .v { display: block; color: var(--text-body); }
@media (max-width: 720px){
  .article-mast .meta-strip { grid-template-columns: repeat(2, 1fr); }
}

/* Article body grid */
.article-grid {
  max-width: 1060px; margin: 0 auto;
  padding: 0 var(--gutter) var(--s-80);
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--s-48);
  align-items: start;
}
.article-grid > aside { position: sticky; top: 80px; }
.article-grid > article { max-width: 68ch; min-width: 0; }
@media (max-width: 880px){
  .article-grid { grid-template-columns: 1fr; gap: var(--s-24); }
  .article-grid > aside { position: static; }
  .toc-disclosure { display: block; }
  .toc-desktop { display: none; }
}
@media (min-width: 881px){
  .toc-disclosure { display: none; }
}

/* TOC */
.toc-header {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-micro);
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--accent-dim);
  margin-bottom: var(--s-12);
}
.toc-list { list-style: none; margin: 0; padding: 0; }
.toc-list li { margin: 0; }
.toc-list a {
  display: block;
  padding: 4px 0 4px 10px;
  border-left: 1px solid transparent;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  line-height: 2;
  color: var(--text-muted);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: color 120ms ease, border-color 120ms ease, padding-left 120ms ease;
}
.toc-list a:hover { color: var(--text); }
.toc-list a.is-active {
  color: var(--accent);
  border-left-color: var(--accent);
  padding-left: 8px;
}
.toc-disclosure {
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  padding: 0;
  margin-bottom: var(--s-24);
}
.toc-disclosure summary {
  list-style: none;
  padding: var(--s-12) var(--s-16);
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-micro);
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-body);
}
.toc-disclosure summary::-webkit-details-marker { display: none; }
.toc-disclosure summary::after { content: " ▾"; color: var(--accent-dim); }
.toc-disclosure[open] summary::after { content: " ▴"; }
.toc-disclosure .toc-list { padding: 0 var(--s-16) var(--s-16); }

/* Article body typography */
.article-body h2.article-h2 {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-top: var(--s-64);
  margin-bottom: var(--s-24);
  color: var(--text);
  scroll-margin-top: 80px;
}
.article-body h2.article-h2::before {
  content: "// ";
  color: var(--accent-dim);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.5em;
  font-weight: 500;
  letter-spacing: 0.1em;
  vertical-align: 0.35em;
  margin-right: 4px;
}
.article-body h3.article-h3 {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin-top: var(--s-48);
  margin-bottom: var(--s-16);
  color: var(--text);
  scroll-margin-top: 80px;
}
.article-body p.article-p {
  font-family: 'Outfit', sans-serif;
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text-body);
  margin-bottom: var(--s-24);
  max-width: 68ch;
  text-wrap: pretty;
}
.article-body p.article-p em {
  font-style: normal;
  color: var(--accent);
  font-weight: 500;
}
.article-body p.article-p strong {
  color: var(--text);
  font-weight: 500;
}
.article-body a.article-link {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--border-2);
  text-decoration-thickness: 1px;
  text-underline-offset: 1px;
  transition: color 120ms, text-decoration-color 120ms;
}
.article-body a.article-link:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}
.article-body code.article-code-inline {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9em;
  color: var(--text-body);
  background: rgba(255,255,255,0.05);
  padding: 2px 6px;
  border-radius: var(--r);
}
.article-body hr.article-rule {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--s-48) 0;
}

/* Article lists */
.article-body ul.article-list,
.article-body ol.article-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s-24);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text-body);
}
.article-body ul.article-list li,
.article-body ol.article-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: var(--s-8);
}
.article-body ul.article-list li::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 0.75em;
  width: 4px; height: 4px;
  background: var(--accent);
}
.article-body ol.article-list {
  counter-reset: alist;
}
.article-body ol.article-list li {
  counter-increment: alist;
  padding-left: 36px;
}
.article-body ol.article-list li::before {
  content: counter(alist, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.1em;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8em;
  color: var(--accent-dim);
  font-weight: 500;
  letter-spacing: 0.05em;
}
.article-body ol.article-list li strong {
  color: var(--text);
  font-weight: 500;
}
.article-body ol.article-list li em {
  font-style: normal;
  color: var(--accent);
  font-weight: 500;
}

/* Pull quote */
.article-pullquote {
  position: relative;
  margin: var(--s-48) 0 var(--s-48) var(--s-32);
  padding: var(--s-8) var(--s-24);
  border-left: 1px solid var(--border);
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--text);
  text-wrap: pretty;
}
.article-pullquote::before {
  content: "«";
  position: absolute;
  left: -40px;
  top: -4px;
  color: var(--accent);
  font-size: 1.4em;
  line-height: 1;
  font-weight: 400;
}
@media (max-width: 720px){
  .article-pullquote { margin-left: var(--s-16); }
  .article-pullquote::before { left: -24px; }
}

/* Code block */
.article-code-block {
  margin: var(--s-32) 0;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  overflow: hidden;
}
.article-code-block .cb-head {
  padding: var(--s-12) var(--s-24);
  border-bottom: 1px solid var(--border-2);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-micro);
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-muted);
}
.article-code-block pre {
  margin: 0;
  padding: var(--s-24);
  overflow-x: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-body);
}
.article-code-block .tk-key { color: var(--accent); }
.article-code-block .tk-str { color: var(--accent-amber); }
.article-code-block .tk-com { color: var(--text-muted); }
.article-code-block .tk-pun { color: var(--text-muted); }

/* Callouts */
.article-callout {
  margin: var(--s-32) 0;
  padding: var(--s-24);
  border-left: 3px solid var(--text-muted);
  background: rgba(255,255,255,0.02);
  border-radius: 0 var(--r) var(--r) 0;
}
.article-callout .co-head {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-micro);
  font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-bottom: var(--s-8);
}
.article-callout p {
  margin: 0;
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-body);
}
.article-callout.note  { border-left-color: var(--accent); background: rgba(61,255,192,0.05); }
.article-callout.note  .co-head { color: var(--accent); }
.article-callout.warn  { border-left-color: var(--accent-amber); background: rgba(255,179,71,0.05); }
.article-callout.warn  .co-head { color: var(--accent-amber); }
.article-callout.stop  { border-left-color: var(--accent-red); background: rgba(255,107,107,0.05); }
.article-callout.stop  .co-head { color: var(--accent-red); }

/* Stats strip (CASE STUDY) */
.article-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: var(--s-48) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.article-stats > div {
  padding: var(--s-24) var(--s-16);
  border-right: 1px solid var(--border);
}
.article-stats > div:last-child { border-right: 0; }
.article-stats .k {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-micro);
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: var(--s-8);
}
.article-stats .n {
  display: block;
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--text);
}
.article-stats .n .u {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55em;
  font-weight: 500;
  color: var(--text-muted);
  margin-left: 4px;
  letter-spacing: 0.05em;
}
@media (max-width: 680px){
  .article-stats { grid-template-columns: repeat(2, 1fr); }
  .article-stats > div:nth-child(2) { border-right: 0; }
  .article-stats > div:nth-child(1),
  .article-stats > div:nth-child(2) { border-bottom: 1px solid var(--border); }
}

/* Figure */
.article-figure {
  margin: var(--s-32) 0;
}
.article-figure .ph {
  aspect-ratio: 16 / 9;
  background: var(--surface);
  border: 1px dashed var(--border-2);
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-micro);
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--text-muted);
}
.article-figure figcaption {
  margin-top: var(--s-12);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-micro);
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-muted);
}
.article-figure figcaption::before {
  content: "// ";
  color: var(--accent-dim);
}

/* Table */
.article-table {
  width: 100%;
  margin: var(--s-32) 0;
  border-collapse: collapse;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  line-height: 1.6;
}
.article-table th,
.article-table td {
  padding: var(--s-12);
  text-align: left;
  vertical-align: top;
}
.article-table thead th {
  color: var(--text);
  font-weight: 500;
  border-bottom: 1px solid var(--border-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--t-micro);
}
.article-table tbody td {
  color: var(--text-body);
  border-bottom: 1px solid var(--border);
}
.article-table tbody tr:hover { background: var(--surface); }
.article-table td.k { color: var(--text); font-weight: 500; }

/* Endnote */
.article-endnote {
  max-width: 1060px;
  margin: 0 auto;
  padding: var(--s-48) var(--gutter);
  border-top: 1px solid var(--border-2);
}
.article-endnote .rows {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s-24);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-micro);
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-muted);
}
.article-endnote .rows .k { color: var(--accent-dim); }
.article-endnote .rows .v { color: var(--text-body); display: block; }
.article-endnote .rows > div > div { margin-bottom: 6px; }
.article-endnote .rows .share { text-align: right; }
.article-endnote .rows .share a {
  color: var(--text-body);
  text-decoration: none;
  margin-left: var(--s-16);
  transition: color 120ms;
}
.article-endnote .rows .share a:first-child { margin-left: 0; }
.article-endnote .rows .share a:hover { color: var(--accent); }
.article-endnote .bio {
  margin-top: var(--s-24);
  max-width: 60ch;
  font-family: 'Outfit', sans-serif;
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--text-body);
}
@media (max-width: 680px){
  .article-endnote .rows { grid-template-columns: 1fr; }
  .article-endnote .rows .share { text-align: left; }
  .article-endnote .rows .share a { margin-left: 0; margin-right: var(--s-16); }
}

/* Related labs */
.article-related {
  max-width: 1060px; margin: 0 auto;
  padding: var(--s-48) var(--gutter) var(--s-96);
}
.article-related .rel-head {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-micro);
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--accent-dim);
  margin-bottom: var(--s-16);
}
.article-related .labs { border-top: 1px solid var(--border); }

/* Mode divider */
.mode-divider {
  background: var(--surface);
  border-top: 1px solid var(--border-2);
  border-bottom: 1px solid var(--border-2);
  padding: var(--s-96) var(--gutter);
  text-align: center;
}
.mode-divider .label {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--accent-amber);
  margin-bottom: var(--s-16);
}
.mode-divider .caption {
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  font-size: var(--t-small);
  color: var(--text-body);
  max-width: 50ch;
  margin: 0 auto;
  line-height: 1.5;
}