/* TFStudio blog — extends the main visual system without changing marketing pages. */

.blog-page {
  background: var(--bg);
}
.blog-page::before,
.blog-page::after,
.blog-page main section::after { content: none; }

.blog-page main { min-height: 60vh; }
.blog-page .foot-grid-simple { grid-template-columns: 2fr 1fr 1fr 1fr; }
.blog-footer-brand { margin-bottom: 14px; }
.blog-footer-copy { color: #8c8c88; font-size: 12.5px; max-width: 32ch; margin: 0; }

.blog-eyebrow,
.post-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font: 600 11px/1 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}

.blog-eyebrow::before,
.post-kicker::before {
  content: "";
  width: 24px;
  height: 1px;
  background: currentColor;
}

/* Blog index */
.blog-hero {
  position: relative;
  overflow: hidden;
  padding: 66px 0 60px;
  border-bottom: 1px solid var(--line-2);
}

.blog-hero::after {
  content: "";
  position: absolute;
  right: clamp(-150px, -5vw, -40px);
  top: 50%;
  width: 340px;
  height: 340px;
  transform: translateY(-50%);
  border: 1px solid rgba(143, 151, 162, 0.22);
  border-radius: 50%;
  box-shadow:
    0 0 0 48px rgba(143, 151, 162, 0.055),
    0 0 0 96px rgba(143, 151, 162, 0.035);
  pointer-events: none;
}

.blog-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
  gap: 52px;
  align-items: end;
}

.blog-hero h1 {
  max-width: 760px;
  margin: 17px 0 0;
  font-size: clamp(36px, 4.8vw, 58px);
  line-height: 1.04;
  letter-spacing: -0.045em;
}

.blog-hero-copy { padding-bottom: 5px; }
.blog-hero-copy p {
  max-width: 38ch;
  margin: 0 0 20px;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.6;
}

.rss-link,
.read-link {
  color: var(--text);
  font: 600 12px/1 var(--sans);
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
}
.rss-link span,
.read-link span { color: var(--accent); margin-left: 6px; }
.rss-link:hover,
.read-link:hover { color: var(--accent); }

.blog-list-section { padding: 52px 0 76px; }
.blog-section-heading { align-items: end; margin-bottom: 24px; }
.blog-section-heading h2 { font-size: clamp(23px, 2.7vw, 32px); }
.article-count {
  color: var(--muted);
  font: 600 11px/1 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.article-grid { display: grid; gap: 24px; }
.article-card {
  display: grid;
  grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.18fr);
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 18px 48px -38px rgba(12, 18, 34, 0.5);
}

.article-card-visual {
  min-height: 304px;
  position: relative;
  overflow: hidden;
  background: #f2f4f7;
  border-right: 1px solid var(--line-2);
}

.article-card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(30px, 3.6vw, 46px);
}

.article-card-meta,
.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  color: var(--muted);
  font: 600 11px/1.5 var(--sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.article-card h3 {
  max-width: 700px;
  margin: 14px 0 13px;
  font-size: clamp(24px, 2.7vw, 34px);
  line-height: 1.12;
  letter-spacing: -0.035em;
}
.article-card h3 a { color: inherit; text-decoration: none; }
.article-card h3 a:hover { color: var(--accent); }
.article-card-body > p {
  max-width: 58ch;
  margin: 0 0 22px;
  color: var(--text-2);
  font-size: 14.5px;
  line-height: 1.58;
}

/* Simple coating cross-section used on the article card. */
.coating-diagram { position: absolute; inset: 0; }
.coating-diagram::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.55;
  background-image:
    linear-gradient(rgba(105,116,132,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(105,116,132,.08) 1px, transparent 1px);
  background-size: 40px 40px;
}
.coating-diagram svg {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  font-family: var(--sans);
}
.diagram-overline,
.result-label { letter-spacing: .09em; }
.diagram-overline { fill: #58616e; font-size: 13px; font-weight: 700; }
.result-panel { fill: #fff; stroke: #c9cfd8; stroke-width: 1; }
.result-label { fill: #6a7380; font-size: 9px; font-weight: 700; }
.diagram-result { fill: #11151b; font-size: 20px; font-weight: 700; }
.diagram-medium { fill: #151a21; font-size: 15px; font-weight: 650; }
.diagram-index { fill: #66707d; font-size: 13px; }
.ray {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}
.ray-incident { stroke: #2477b3; }
.ray-one { stroke: #a43a7d; }
.ray-two { stroke: #b87913; }
.ray-two-inside { stroke: #b87913; stroke-width: 3.25; }
.arrow-fill-incident { fill: #2477b3; }
.arrow-fill-one { fill: #a43a7d; }
.arrow-fill-two { fill: #b87913; }
.ray-label { font-size: 13px; font-weight: 600; }
.ray-label-incident { fill: #185d8f; }
.ray-label-one,
.ray-label-two { font-size: 17px; font-weight: 700; }
.ray-label-one { fill: #8b2f69; }
.ray-label-two { fill: #94610d; }
.interface { stroke-width: 1.5; }
.interface-top { stroke: #7c6ac7; }
.interface-bottom { stroke: #889ead; }
.film-layer { fill: #dcd5f5; }
.glass-layer { fill: #d8e6ee; }
.layer-name { fill: #1b2027; font-size: 15px; font-weight: 700; }
.layer-detail { fill: #4f5965; font-size: 12px; font-weight: 500; }
.glass-name { fill: #21313d; }
.glass-detail { fill: #4e6372; }

.vcoat-axis {
  stroke: #aeb5bf;
  stroke-width: 1;
}
.vcoat-guide {
  stroke: #9da6b2;
  stroke-width: 1;
  stroke-dasharray: 4 5;
}
.vcoat-curve {
  fill: none;
  stroke: #be3855;
  stroke-width: 4;
  stroke-linecap: round;
}
.vcoat-dot { fill: #be3855; }
.vcoat-label,
.vcoat-tick {
  fill: #66707d;
  font-size: 11px;
  font-weight: 500;
}
.vcoat-design-tick { fill: #91283f; font-weight: 700; }
.vcoat-silica { fill: #d8e9f4; }
.vcoat-zirconia { fill: #f0dfc4; }
.vcoat-interface { stroke: #ad8a52; stroke-width: 1.5; }
.vcoat-layer-name { fill: #352b1e; font-size: 13px; font-weight: 700; }
.vcoat-layer-detail { fill: #6b5941; font-size: 11px; font-weight: 500; }

/* Compact tutorial-library index. */
.blog-hero { padding: 48px 0 44px; }
.blog-hero::after { display: none; }
.blog-hero-grid {
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr);
  gap: 40px;
}
.blog-hero h1 {
  margin-top: 13px;
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1.08;
}
.blog-hero-copy { padding: 0; }
.blog-hero-copy p { max-width: 46ch; margin-bottom: 14px; }
.blog-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
}

.start-section { padding: 42px 0 46px; border-bottom: 1px solid var(--line-2); }
.tutorial-section-heading,
.tutorial-library-header,
.series-heading {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: end;
}
.tutorial-section-heading { margin-bottom: 18px; }
.blog-section-label {
  display: block;
  margin-bottom: 7px;
  color: var(--accent);
  font: 600 10px/1.3 var(--sans);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.tutorial-section-heading h2,
.tutorial-library-header h2 {
  margin: 0;
  font-size: clamp(22px, 2.5vw, 28px);
  line-height: 1.18;
  letter-spacing: -.025em;
}
.tutorial-section-heading > p {
  max-width: 42ch;
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.5;
}

.start-grid,
.tutorial-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.start-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.start-card,
.tutorial-row {
  color: var(--text);
  text-decoration: none;
}
.start-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  background: rgba(255,255,255,.62);
}
.start-card-main {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: start;
  flex: 1;
  padding: 18px;
}
.tutorial-number {
  color: var(--muted);
  font: 600 12px/1.3 var(--sans);
  letter-spacing: .05em;
}
.start-card-copy,
.tutorial-row-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.tutorial-meta {
  margin-bottom: 6px;
  color: var(--muted);
  font: 600 9.5px/1.35 var(--sans);
  letter-spacing: .065em;
  text-transform: uppercase;
}
.start-card-copy strong,
.tutorial-row-copy strong {
  font-size: 16px;
  line-height: 1.32;
  letter-spacing: -.012em;
}
.start-card-copy > span:last-child,
.tutorial-row-copy > span:last-child {
  margin-top: 7px;
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 1.48;
}
.tutorial-arrow {
  color: var(--accent);
  font-size: 16px;
  line-height: 1;
}
.start-card:hover,
.tutorial-row:hover {
  border-color: var(--line-3);
  background: rgba(255,255,255,.9);
}
.start-card:hover strong,
.tutorial-row:hover strong { color: var(--accent); }

.tutorial-library { padding: 46px 0 72px; }
.tutorial-library-header {
  margin-bottom: 30px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line-2);
}
.topic-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.topic-links a {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  padding: 7px 10px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--text-2);
  background: rgba(255,255,255,.45);
  font-size: 11px;
  line-height: 1;
  text-decoration: none;
}
.topic-links a:hover { border-color: var(--line-3); color: var(--text); }
.topic-links span { color: var(--muted); font-size: 9.5px; }

.tutorial-series { scroll-margin-top: 86px; }
.tutorial-series + .tutorial-series { margin-top: 42px; }
.series-heading { margin-bottom: 12px; align-items: start; }
.series-heading h3 {
  margin: 0 0 5px;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -.015em;
}
.series-heading p {
  max-width: 66ch;
  margin: 0;
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 1.5;
}
.series-heading > span {
  flex: 0 0 auto;
  padding-top: 3px;
  color: var(--muted);
  font: 600 10px/1.3 var(--sans);
  letter-spacing: .065em;
  text-transform: uppercase;
}
.tutorial-list { border-top: 1px solid var(--line-2); }
.tutorial-list > li { border-bottom: 1px solid var(--line-2); }
.tutorial-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 145px 18px;
  gap: 16px;
  align-items: center;
  padding: 17px 10px 17px 6px;
  border: 0;
}
.tutorial-row-copy > span:last-child { max-width: 68ch; }
.tutorial-row-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.35;
  text-align: right;
}

/* Article */
.post-header {
  padding: 54px 0 48px;
  border-bottom: 1px solid var(--line-2);
  background: rgba(255,255,255,.34);
}
.post-header-inner { width: min(940px, calc(100% - 48px)); margin: 0 auto; }
.post-series-line {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 14px;
  align-items: center;
}
.post-series-line > span {
  color: var(--muted);
  font: 600 10px/1.3 var(--sans);
  letter-spacing: .065em;
  text-transform: uppercase;
}
.post-header h1 {
  max-width: 860px;
  margin: 18px 0 17px;
  font-size: clamp(34px, 4.5vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.042em;
}
.post-deck {
  max-width: 760px;
  margin: 0 0 21px;
  color: var(--text-2);
  font-size: clamp(16px, 1.7vw, 18px);
  line-height: 1.55;
}

.post-layout {
  display: grid;
  grid-template-columns: 190px minmax(0, 760px) minmax(0, 1fr);
  gap: 42px;
  align-items: start;
  padding-top: 48px;
  padding-bottom: 72px;
}
.post-aside {
  position: sticky;
  top: 92px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}
.back-link { color: var(--text); font: 600 11px/1.4 var(--sans); text-decoration: none; }
.back-link:hover { color: var(--accent); }
.post-aside-rule { height: 1px; margin: 22px 0; background: var(--line-2); }
.post-aside p { margin: 0 0 10px; }
.post-toc { margin: 0; }
.post-toc .toc-title,
.post-series-nav .toc-title {
  margin: 0 0 11px;
  color: var(--text);
  font: 600 10px/1.3 var(--sans);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.series-nav-list { margin: 0; padding: 0; list-style: none; }
.series-nav-list li { margin: 0; padding: 0; }
.series-nav-list a {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 5px;
  padding: 5px 0;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.35;
  text-decoration: none;
}
.series-nav-list a > span:first-child {
  color: var(--dim);
  font-size: 9.5px;
  letter-spacing: .04em;
}
.series-nav-list a.active,
.series-nav-list a:hover { color: var(--text); }
.series-nav-list a.active > span:first-child { color: var(--accent); }
.toc-list { margin: 0; padding: 0; list-style: none; }
.toc-list li { margin: 0; padding: 0; }
.toc-list a {
  display: block;
  padding: 5px 0 5px 10px;
  border-left: 1px solid var(--line-2);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  text-decoration: none;
}
.toc-list a:hover {
  border-left-color: var(--accent);
  color: var(--text);
}
.toc-level-3 a { padding-left: 20px; color: var(--dim); font-size: 10.5px; }

.post-content { min-width: 0; color: #171a20; font-size: 16px; line-height: 1.72; }
.post-content > p:first-of-type { font-size: 18px; line-height: 1.62; color: var(--text); }
.post-content p { margin: 0 0 21px; }
.post-content h2 {
  margin: 54px 0 19px;
  color: var(--text);
  font-size: clamp(26px, 2.6vw, 32px);
  line-height: 1.16;
  letter-spacing: -0.03em;
}
.post-content h3 { margin: 34px 0 13px; font-size: 20px; letter-spacing: -0.02em; }
.post-content .heading-anchor { color: inherit; text-decoration: none; }
.post-content .heading-anchor:hover { color: var(--accent); }
.post-content a { color: var(--accent-2); text-underline-offset: 3px; }
.post-content a:hover { color: var(--accent); }
.post-content strong { color: var(--text); }
.post-lead-visual {
  margin: 0 0 34px;
}
.post-content .post-lead-visual img {
  width: 100%;
  max-width: none;
  margin: 0;
  border-radius: 10px;
}
.post-content img {
  display: block;
  width: auto;
  max-width: min(100%, 465px);
  height: auto;
  margin: 28px auto 32px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
}
.post-content p:has(> img:only-child) { margin: 0; }
.post-content table {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 28px 0 32px;
  overflow-x: auto;
  border: 1px solid var(--line-2);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 8px;
  background: rgba(255,255,255,.72);
  font-size: 14px;
  line-height: 1.45;
  -webkit-overflow-scrolling: touch;
}
.post-content th,
.post-content td {
  min-width: 88px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.post-content th {
  color: var(--text);
  background: rgba(238,240,243,.8);
  font: 650 11px/1.35 var(--sans);
  letter-spacing: .035em;
  white-space: nowrap;
}
.post-content tbody tr:nth-child(even) td {
  background: rgba(245,246,248,.55);
}
.post-content tbody tr:last-child td { border-bottom: 0; }
.post-content td code { white-space: nowrap; }
.post-content ul,
.post-content ol { margin: 0 0 28px; padding-left: 24px; }
.post-content li { margin-bottom: 10px; padding-left: 5px; }
.post-content blockquote {
  margin: 28px 0;
  padding: 18px 21px;
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  background: rgba(255,255,255,.68);
  color: var(--text-2);
}
.post-content blockquote p:last-child { margin-bottom: 0; }
.post-content hr {
  width: 72px;
  height: 1px;
  margin: 42px 0;
  border: 0;
  background: var(--line-2);
}
.post-content .katex-display {
  margin: 26px 0;
  padding: 18px 14px;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.72);
}
.post-content .katex { font-size: 1em; }
.post-content th .katex { font-size: 1.18em; }
.post-content .katex .sizing.reset-size6.size3,
.post-content .katex .fontsize-ensurer.reset-size6.size3 { font-size: .7em; }
.post-content .katex .sizing.reset-size6.size1,
.post-content .katex .fontsize-ensurer.reset-size6.size1 { font-size: .5em; }

.post-pagination {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 52px;
  padding-top: 24px;
  border-top: 1px solid var(--line-2);
}
.post-pagination-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: rgba(255,255,255,.55);
  color: var(--text) !important;
  text-decoration: none;
}
.post-pagination-link-next { grid-column: 2; text-align: right; }
.post-pagination-label {
  color: var(--muted);
  font: 600 10px/1.3 var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.post-pagination-title { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.post-pagination-link:hover { border-color: var(--line-3); background: rgba(255,255,255,.9); }
.post-pagination-link:hover .post-pagination-label { color: var(--accent); }

@media (max-width: 980px) {
  .blog-hero { padding: 54px 0 50px; }
  .blog-hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .blog-hero-copy p { max-width: 52ch; }
  .article-card { grid-template-columns: 1fr; }
  .article-card-visual { min-height: 290px; border-right: 0; border-bottom: 1px solid var(--line-2); }
  .tutorial-row { grid-template-columns: 38px minmax(0, 1fr) 130px 18px; }
  .post-layout { grid-template-columns: minmax(0, 760px); justify-content: center; }
  .post-aside { position: static; display: flex; justify-content: space-between; align-items: center; }
  .post-aside-rule,
  .post-aside p,
  .post-toc,
  .post-series-nav { display: none; }
}

@media (max-width: 700px) {
  .blog-page .foot-grid-simple { grid-template-columns: 1fr 1fr; }
  .blog-hero { padding: 40px 0 38px; }
  .blog-hero::after { width: 280px; height: 280px; opacity: .6; }
  .blog-list-section { padding: 42px 0 62px; }
  .blog-section-heading { align-items: flex-start; gap: 18px; }
  .article-card-visual { min-height: 245px; }
  .article-card-body { padding: 26px 22px 29px; }
  .start-section { padding: 34px 0 38px; }
  .tutorial-section-heading,
  .tutorial-library-header,
  .series-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
  .tutorial-section-heading > p { max-width: 50ch; }
  .start-grid { grid-template-columns: 1fr; }
  .tutorial-library { padding: 38px 0 58px; }
  .tutorial-library-header { margin-bottom: 26px; }
  .topic-links { justify-content: flex-start; }
  .series-heading > span { padding-top: 0; }
  .tutorial-row { grid-template-columns: 30px minmax(0, 1fr) 16px; gap: 11px; padding: 16px 3px; }
  .tutorial-row-details { display: none; }
  .tutorial-row-copy > span:last-child { font-size: 12px; }
  .post-header { padding: 42px 0 38px; }
  .post-header-inner { width: min(100% - 36px, 940px); }
  .post-layout { width: min(100% - 36px, var(--max)); padding-top: 38px; padding-bottom: 58px; }
  .post-content { font-size: 15.5px; line-height: 1.7; }
  .post-content > p:first-of-type { font-size: 17px; }
  .post-lead-visual { margin-bottom: 28px; }
  .post-content table { margin: 24px 0 28px; font-size: 13.5px; }
  .post-content th,
  .post-content td { min-width: 76px; padding: 10px 12px; }
  .post-content h2 { margin-top: 46px; }
  .post-content .katex-display { margin-left: -8px; margin-right: -8px; padding: 18px 10px; }
  .post-pagination { grid-template-columns: 1fr; margin-top: 44px; }
  .post-pagination-link-next { grid-column: 1; text-align: left; }
}

@media (prefers-reduced-motion: no-preference) {
  .article-card { transition: transform .25s ease, box-shadow .25s ease; }
  .article-card:hover { transform: translateY(-3px); box-shadow: 0 26px 60px -38px rgba(12,18,34,.62); }
}