/* Stem Cells Bangkok, guides and page styles v2 (2026-10-11).
   Same tokens, type and hairline system as site-v2.css: Literata for display, Wix Madefor Text for reading,
   1px rules instead of boxes, the accent used for marks and actions only. */

/* ---------- Guides index ---------- */
.index-head {
  display: grid; grid-template-columns: var(--cols); column-gap: var(--gap); align-items: baseline;
  padding-block: clamp(56px, 8vw, 120px) clamp(48px, 6vw, 96px);
}
.index-head .note { grid-column: 1 / 4; }
.index-head h1 { grid-column: 4 / 13; }
.index-intro { grid-column: 4 / 11; max-width: 30em; margin-top: 28px; font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); }
@media (max-width: 799px) {
  .index-head { display: block; }
  .index-head .note { margin-bottom: 12px; }
  .index-intro { margin-top: 20px; }
}

/* The newest guide: photo on the left, the copy set on a rule at its foot. */
.featured-guide { position: relative; display: grid; grid-template-columns: var(--cols); column-gap: var(--gap); row-gap: 28px; align-items: end; }
.featured-media { grid-column: 1 / 8; overflow: hidden; background: var(--paper-2); }
.featured-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.featured-copy { grid-column: 8 / 13; display: grid; justify-items: start; gap: 18px; padding-top: 20px; border-top: 1px solid var(--ink); }
.featured-copy h2 { font-size: clamp(1.875rem, 1.3rem + 1.9vw, 3rem); line-height: 1.08; letter-spacing: -0.018em; }
.featured-copy h2 a { text-decoration: none; }
.featured-copy > p:not(.kicker):not(.guide-meta) { max-width: 30em; color: var(--ink-2); }
@media (max-width: 899px) { .featured-media, .featured-copy { grid-column: 1 / -1; } }
@media (max-width: 599px) {
  .featured-media { margin-inline: calc(-1 * var(--gutter)); }
  .featured-media img { aspect-ratio: 4 / 3; }
}

/* Same quiet label as "Newest guide" above it, so the guide titles stay the largest type in the list. */
.index-grid-h { margin-top: clamp(72px, 8vw, 128px); font-style: italic; font-weight: 400; font-size: 1.125rem; line-height: 1.4; letter-spacing: 0; color: var(--ink-2); }
.guide-grid { margin-top: 18px; border-top: 1px solid var(--ink); }
.guide-tile {
  position: relative; display: grid; grid-template-columns: var(--cols); column-gap: var(--gap); align-items: start;
  padding-block: clamp(24px, 2.6vw, 36px); border-bottom: 1px solid var(--line);
}
.guide-tile-media { grid-column: 1 / 4; overflow: hidden; background: var(--paper-2); }
.guide-tile-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.guide-tile-copy { grid-column: 4 / 12; display: grid; justify-items: start; gap: 12px; }
.guide-tile h3 { font-size: clamp(1.5rem, 1.25rem + .9vw, 2.125rem); font-weight: 340; line-height: 1.15; letter-spacing: -0.014em; }
.guide-tile h3 a { text-decoration: none; }
.guide-tile h3 a::after { content: ""; position: absolute; inset: 0; }
.guide-tile-copy > p:not(.guide-meta) { max-width: 34em; color: var(--ink-2); }
.guide-meta { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: var(--t-meta); line-height: 1.5; color: var(--ink-2); }
@media (max-width: 699px) {
  .guide-tile { grid-template-columns: minmax(0, 1fr) 88px; grid-template-areas: "title media" "desc desc" "meta meta"; column-gap: 16px; row-gap: 10px; }
  .guide-tile-copy { display: contents; }
  .guide-tile h3 { grid-area: title; font-size: 1.3125rem; line-height: 1.25; }
  .guide-tile-media { grid-area: media; }
  .guide-tile-media img { aspect-ratio: 1; }
  .guide-tile-copy > p:not(.guide-meta) { grid-area: desc; }
  .guide-tile .guide-meta { grid-area: meta; }
}
@media (hover: hover) {
  .featured-media img, .guide-tile-media img { transition: transform .7s var(--ease); }
  .featured-guide:hover img, .guide-tile:hover img { transform: scale(1.03); }
  .featured-guide:hover h2 a, .guide-tile:hover h3 a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .16em; }
}
.index-guides { padding-bottom: var(--section); }

/* ---------- Article ---------- */
/* Reading progress thickens the header's hairline upward, so nothing hangs into the page (width set by blog-v1.js). */
.reading-progress {
  position: fixed; top: calc(var(--header-h) - 1px); left: 0; right: 0; z-index: 55; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
}
body:has(.mobile-menu[open]) .reading-progress { visibility: hidden; }

.breadcrumb { display: flex; align-items: center; gap: 10px; min-width: 0; padding-top: clamp(24px, 3vw, 40px); font-size: var(--t-meta); line-height: 1.4; color: var(--ink-2); }
.breadcrumb a { display: inline-flex; flex: none; align-items: center; min-height: 32px; text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; }
.breadcrumb > span[aria-hidden] { flex: none; opacity: .6; }
.breadcrumb > span[aria-current] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Head: the title, a full-width rule, then the facts under the rail and the standfirst over the text column. */
.article-head {
  display: grid; grid-template-columns: var(--cols); column-gap: var(--gap); align-items: baseline;
  padding-block: clamp(32px, 5vw, 80px) clamp(48px, 6vw, 88px);
}
.article-head h1 { grid-column: 1 / 12; grid-row: 1; font-size: clamp(2.125rem, 1.4rem + 2.9vw, 4.5rem); line-height: 1.04; }
.article-head::after { content: ""; grid-column: 1 / -1; grid-row: 2; margin-top: clamp(32px, 4vw, 56px); border-top: 1px solid var(--ink); }
.article-meta { grid-column: 1 / 4; grid-row: 3; display: grid; gap: 4px; padding-top: 22px; font-size: var(--t-meta); line-height: 1.5; color: var(--ink-2); }
.article-deck {
  grid-column: 5 / 12; grid-row: 3; max-width: 32em; padding-top: 22px;
  font-family: var(--f-display); font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem); font-weight: 300; line-height: 1.4; letter-spacing: -0.006em;
}
@media (min-width: 1000px) and (max-width: 1199px) {
  .article-meta { grid-column: 1 / 5; }
  .article-deck { grid-column: 5 / 13; }
}
@media (max-width: 999px) {
  .article-head { grid-template-columns: minmax(0, 1fr); }
  .article-head h1, .article-head::after, .article-meta, .article-deck { grid-column: 1; }
  .article-deck { grid-row: 3; padding-top: 20px; }
  .article-meta { grid-row: 4; display: flex; flex-wrap: wrap; gap: 4px 18px; padding-top: 16px; }
}

/* Layout: contents rail on the left (sticky from 1000 px), reading column on the right. */
.article-layout { display: grid; grid-template-columns: var(--cols); column-gap: var(--gap); padding-bottom: var(--section); }
.contents-rail { grid-column: 1 / 4; min-width: 0; }
.article-body { grid-column: 5 / 12; min-width: 0; font-size: var(--t-body); line-height: 1.7; }
@media (min-width: 1000px) and (max-width: 1199px) {
  .contents-rail { grid-column: 1 / 5; }
  .article-body { grid-column: 5 / 13; }
}
@media (min-width: 1000px) {
  .rail-stick { position: sticky; top: calc(var(--header-h) + 32px); display: flex; flex-direction: column; max-height: calc(100svh - var(--header-h) - 64px); }
  .rail-stick .contents { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .contents summary { pointer-events: none; cursor: default; }
  .contents summary::after { display: none; }
  /* The list scrolls, so a focus ring drawn outside a link would be cut off at its edges. */
  .rail-stick .contents a:focus-visible { outline-offset: -3px !important; }
}

.contents { border-top: 1px solid var(--ink); }
.contents summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px;
  list-style: none; cursor: pointer;
  font-family: var(--f-display); font-style: italic; font-size: 1.125rem; line-height: 1.4; color: var(--ink-2);
}
.contents summary::-webkit-details-marker { display: none; }
.contents summary::after {
  content: ""; flex: none; width: 16px; height: 16px; transition: transform .3s var(--ease);
  background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
              linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
}
.contents[open] summary::after { transform: rotate(45deg); }
.contents ol { margin: 0; padding: 0 0 8px; list-style: none; }
.contents a {
  display: block; padding: 8px 0 8px 14px; font-size: var(--t-meta); line-height: 1.45; color: var(--ink-2); text-decoration: none;
  box-shadow: inset 1px 0 0 var(--line); transition: color .2s var(--ease), box-shadow .2s var(--ease);
}
.contents a:hover { color: var(--ink); }
.contents a[aria-current] { color: var(--ink); box-shadow: inset 2px 0 0 var(--accent); }

.rail-cta { flex: none; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.rail-cta p { font-family: var(--f-display); font-size: 1.125rem; font-weight: 380; line-height: 1.35; }
.rail-cta .btn { width: 100%; min-height: 48px; margin-top: 16px; padding-inline: 16px; font-size: .9375rem; }
@media (max-width: 999px) {
  .article-layout { display: block; }
  .contents-rail { margin-bottom: clamp(32px, 6vw, 48px); }
  .contents { border-bottom: 1px solid var(--line); }
  .rail-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 0; padding-block: 16px; border-top: 0; border-bottom: 1px solid var(--line); }
  .rail-cta p { font-size: 1.0625rem; }
  .rail-cta .btn { width: auto; min-height: 44px; margin-top: 0; padding-inline: 18px; }
}
@media (max-width: 599px) { .rail-cta .btn { width: 100%; } }

.article-figure { margin-bottom: clamp(40px, 5vw, 64px); background: var(--paper-2); }
.article-figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
@media (max-width: 599px) { .article-figure { margin-inline: calc(-1 * var(--gutter)); } }

.takeaways { margin-bottom: clamp(40px, 5vw, 64px); padding-top: 18px; border-top: 1px solid var(--ink); }
.takeaways h2 { font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: 1.125rem; line-height: 1.4; letter-spacing: 0; color: var(--ink-2); }
.takeaways ul { margin: 10px 0 0; padding: 0; list-style: none; }
.takeaways li {
  position: relative; padding: 14px 0 14px 28px; border-bottom: 1px solid var(--line);
  font-family: var(--f-display); font-size: clamp(1.125rem, 1.05rem + .3vw, 1.3125rem); font-weight: 380; line-height: 1.4; letter-spacing: -0.004em;
}
.takeaways li::before { content: ""; position: absolute; left: 2px; top: calc(14px + .84em - 3px); width: 7px; height: 7px; background: var(--accent); }

/* ---------- Article text ---------- */
.prose > * + * { margin-top: 1.25em; }
.prose p, .prose ul, .prose ol { max-width: var(--measure); }
.prose h2 { max-width: 20em; margin-top: clamp(56px, 6vw, 96px); font-size: clamp(1.75rem, 1.35rem + 1.4vw, 2.5rem); font-weight: 300; line-height: 1.12; letter-spacing: -0.016em; }
.prose > h2:first-child { margin-top: 0; }
.prose h2 + * { margin-top: 20px; }
.prose h3 { margin-top: 2em; font-size: 1.375rem; font-weight: 400; line-height: 1.3; letter-spacing: -0.008em; }
.prose h3 + * { margin-top: 10px; }
.prose a { text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .2em; transition: text-decoration-color .2s var(--ease); }
.prose a:hover { text-decoration-color: currentColor; }
.prose strong { font-weight: 650; }
.prose ul, .prose ol { padding: 0; list-style: none; }
.prose li { position: relative; padding-left: 26px; }
.prose li + li { margin-top: .5em; }
.prose ul > li::before { content: ""; position: absolute; left: 2px; top: calc(.92em - 3px); width: 6px; height: 6px; background: var(--accent); }
.prose ol { counter-reset: item; }
.prose ol > li { counter-increment: item; }
.prose ol > li::before { content: counter(item) "."; position: absolute; left: 0; top: 0; font-family: var(--f-display); font-weight: 500; color: var(--ink-2); font-variant-numeric: lining-nums tabular-nums; }
.prose blockquote { padding-left: 24px; border-left: 2px solid var(--accent); font-family: var(--f-display); font-style: italic; font-size: 1.25rem; line-height: 1.5; }
.prose code { padding: .1em .3em; background: var(--paper-2); font-size: .9em; }
.prose pre { overflow-x: auto; padding: 16px 20px; background: var(--paper-2); font-size: .875rem; line-height: 1.6; }
.prose pre code { padding: 0; background: none; }

/* Tables: rule on top, hairlines between rows; on phones each row stacks with its column names. */
.prose > .table-scroll { max-width: none; margin-block: 36px; }
.table-scroll { overflow-x: auto; border-top: 1px solid var(--ink); }
.table-scroll table { width: 100%; min-width: 36rem; border-collapse: collapse; font-size: var(--t-small); line-height: 1.5; font-variant-numeric: lining-nums tabular-nums; }
.table-scroll th, .table-scroll td { padding: 14px 20px 14px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.table-scroll th:last-child, .table-scroll td:last-child { padding-right: 0; }
.table-scroll th { font-size: var(--t-meta); font-weight: 650; line-height: 1.4; color: var(--ink-2); }
.table-scroll td:first-child { font-weight: 600; }
@media (max-width: 599px) {
  .table-scroll { overflow: visible; }
  .table-scroll table { min-width: 0; }
  .table-scroll thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .table-scroll tr, .table-scroll td { display: block; }
  .table-scroll tr { padding-block: 16px; border-bottom: 1px solid var(--line); }
  .table-scroll td { padding: 0; border: 0; }
  .table-scroll td:first-child { font-family: var(--f-display); font-size: 1.1875rem; font-weight: 400; line-height: 1.3; }
  .table-scroll td + td { margin-top: 10px; }
  .table-scroll td + td::before { content: attr(data-label); display: block; font-size: var(--t-meta); color: var(--ink-2); }
}

/* In-text call to action: a typeset line between two rules, not a box. */
.prose > .inline-cta { max-width: none; margin-block: clamp(48px, 5vw, 72px); }
.inline-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 20px 32px; padding-block: 28px 32px; border-block: 1px solid var(--ink); }
.inline-cta p { max-width: 22em; font-family: var(--f-display); font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem); font-weight: 300; line-height: 1.3; letter-spacing: -0.01em; }
@media (max-width: 699px) {
  .inline-cta { grid-template-columns: minmax(0, 1fr); }
  .inline-cta .btn { width: 100%; }
}

/* ---------- Checklist, questions, sources ---------- */
/* The checklist offer sits on the dark field of the closing band, so it reads as the guide's one offer. */
.checklist-box { --focus: var(--on-field); margin-top: clamp(56px, 6vw, 88px); padding: clamp(24px, 3.5vw, 48px); background: var(--field); color: var(--on-field); }
.checklist-box ::selection { background: var(--mark-on-field); color: var(--field); }
.checklist-box h2 { max-width: 20em; font-size: var(--t-d3); font-weight: 340; line-height: 1.15; letter-spacing: -0.012em; }
.checklist-box > p { max-width: 32em; margin-top: 14px; color: var(--on-field-2); }
.checklist-form { max-width: 32em; margin-top: 28px; }
.checklist-box .field input { background: var(--paper); }
.checklist-box .consent input { accent-color: var(--mark-on-field); }
/* Buttons on the dark field share the homepage button's colours and hover in every colour way. */
.checklist-box .btn { background: var(--photo-btn); color: var(--photo-btn-ink); }
.checklist-box .btn:hover { background: var(--photo-btn-hover); }
.checklist-form .privacy-link { margin-top: 16px; }
.checklist-box .privacy-link a { color: var(--on-field-2); }
.checklist-error { margin-top: 20px; padding: 14px 18px; border: 1px solid var(--error); background: var(--error-bg); color: var(--ink); font-size: var(--t-small); font-weight: 600; line-height: 1.5; }
.checklist-status { margin-top: 24px; font-family: var(--f-display); font-size: 1.375rem; font-weight: 380; line-height: 1.35; }
@media (max-width: 599px) {
  .checklist-box { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .checklist-form .btn { width: 100%; }
}

.article-faq, .article-sources { margin-top: clamp(56px, 6vw, 96px); }
.article-faq h2, .article-sources h2 { margin-bottom: 24px; font-size: clamp(1.75rem, 1.35rem + 1.4vw, 2.5rem); font-weight: 300; line-height: 1.12; letter-spacing: -0.016em; }
.article-faq .qs summary { font-size: clamp(1.125rem, 1.05rem + .35vw, 1.375rem); padding-block: 18px; }
.article-faq .qs .a { padding-right: 0; }

.article-sources ol { margin: 0; padding: 0; list-style: none; counter-reset: source; border-top: 1px solid var(--ink); }
.article-sources li {
  position: relative; padding: 14px 0 14px 2.25em; border-bottom: 1px solid var(--line); counter-increment: source;
  font-size: var(--t-small); line-height: 1.5; overflow-wrap: anywhere;
}
.article-sources li::before { content: counter(source); position: absolute; left: 0; top: 14px; font-family: var(--f-display); font-weight: 500; color: var(--ink-2); font-variant-numeric: lining-nums tabular-nums; }
.article-sources a { text-decoration-color: var(--line); }
.article-sources a:hover { text-decoration-color: currentColor; }
.source-meta { display: block; margin-top: 2px; font-size: var(--t-meta); color: var(--ink-2); }

.article-disclaimer { padding-right: max(0px, calc(100% - 44em)); margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); font-size: var(--t-meta); line-height: 1.55; color: var(--ink-2); }

/* ---------- Related guides and closing band ---------- */
.related-guides { padding-bottom: var(--section); }
.related-guides h2 { font-size: var(--t-d2); line-height: 1.08; letter-spacing: -0.018em; }

/* The closing band sits on the dark field and runs into the footer; a hairline keeps the two apart. */
.end-cta { --focus: var(--on-field); padding-block: clamp(72px, 8vw, 136px); background: var(--field); color: var(--on-field); border-bottom: 1px solid var(--on-field-line); }
.end-cta ::selection { background: var(--mark-on-field); color: var(--field); }
.end-cta .in { display: grid; grid-template-columns: var(--cols); column-gap: var(--gap); row-gap: 32px; align-items: end; }
.end-cta .in > div { grid-column: 1 / 8; }
.end-cta h2 { font-size: var(--t-d2); line-height: 1.08; letter-spacing: -0.018em; }
.end-cta p { max-width: 30em; margin-top: 20px; font-size: var(--t-lead); line-height: 1.5; color: var(--on-field-2); }
.end-cta .btn { grid-column: 9 / 13; justify-self: end; white-space: nowrap; background: var(--photo-btn); color: var(--photo-btn-ink); }
.end-cta .btn:hover { background: var(--photo-btn-hover); }
@media (max-width: 899px) {
  .end-cta .in > div, .end-cta .btn { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 599px) { .end-cta .btn { width: 100%; white-space: normal; } }

/* ---------- Privacy notice ---------- */
/* Section names sit on the left, the text on the right; one rule runs across both, split at the gutter. */
.plain-page:not(.short-page) .article-body { display: grid; grid-template-columns: var(--cols); column-gap: var(--gap); align-items: start; margin-top: clamp(32px, 4vw, 56px); }
.plain-page:not(.short-page) .article-body > p { grid-column: 4 / 11; max-width: var(--measure); }
.plain-page:not(.short-page) .article-body > p + p { margin-top: 1.1em; }
.plain-page:not(.short-page) .article-body > h2 { grid-column: 1 / 4; font-size: clamp(1.25rem, 1.1rem + .5vw, 1.625rem); font-weight: 380; line-height: 1.25; letter-spacing: -0.01em; }
.plain-page:not(.short-page) .article-body > h2,
.plain-page:not(.short-page) .article-body > h2 + p { margin-top: clamp(40px, 5vw, 72px); padding-top: 20px; border-top: 1px solid var(--ink); }
.plain-page .article-body a { text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .2em; }
@media (max-width: 799px) {
  .plain-page:not(.short-page) .article-body { display: block; }
  .plain-page:not(.short-page) .article-body > h2 { margin-top: 48px; padding-top: 16px; }
  .plain-page:not(.short-page) .article-body > h2 + p { margin-top: 12px; padding-top: 0; border-top: 0; }
}

/* ---------- Short pages: thank you, checklist sent, not found ---------- */
.short-page { display: grid; align-content: center; justify-items: start; min-height: min(72svh, 820px); padding-block: clamp(56px, 8vw, 120px); }
.short-page .page-head { gap: clamp(28px, .75rem + 2.5vw, 48px); max-width: none; margin-bottom: 32px; }
/* The homepage headline's size (.hero h1 in site-v3.css), never larger: the same top tier on every page. */
.short-page h1 { font-size: min(var(--t-hero), calc((100vw - 2 * var(--gutter)) / 7.9), max(2.75rem, calc(((min(100vw, var(--max)) - 2 * var(--gutter)) * 7 - var(--gap) * 17) / 85.92))); line-height: .96; letter-spacing: -0.035em; }
.short-page .page-head p { max-width: 30em; }
/* fix11: the dark footer always reaches the bottom of the window, so no paper shows under it on a tall screen,
   and the message sits in the middle of the space between header and footer at every width. Below laptop width,
   when the window is shorter than the page, the footer follows the message at the normal spacing (fix10). */
body:has(> main.short-page) { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body:has(> main.short-page) > main.short-page { flex: 1 0 auto; }
@media (max-width: 999px) { .short-page { min-height: 0; } }

/* ---------- Print ---------- */
@media print {
  .reading-progress, .breadcrumb, .contents-rail, .inline-cta, .checklist-box, .related-guides, .end-cta { display: none !important; }
  .article-head, .article-layout { display: block; }
  .article-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; }
  .table-scroll { overflow: visible; }
  .table-scroll table { min-width: 0; }
}