/* M.O.M. Portal V1. Local/system fonts only; no network imports. */
:root {
  color-scheme: dark;
  --obsidian: #111315;
  --graphite: #22272b;
  --bone: #f4f1ea;
  --steel: #a8afb5;
  --lime: #c7ff3d;
  --blue: #36a9e1;
  --orange: #ff6b35;
  --line: rgb(168 175 181 / 23%);
  --grid-line: rgb(168 175 181 / 5%);
  --font-body: "IBM Plex Sans Thai", "Thonburi", "Leelawadee UI", "Noto Sans Thai", system-ui, sans-serif;
  --font-display: "League Spartan", "Arial Black", "Avenir Next", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --text-meta: .75rem;
  --text-ui: .875rem;
  --text-body: 1.0625rem;
  --text-lead: 1.375rem;
  --text-card: clamp(1.625rem, 1.2rem + 1.7vw, 2rem);
  --text-resource: clamp(1.875rem, 1.4rem + 2vw, 3.25rem);
  --text-hero: clamp(2.625rem, 1rem + 7.5vw, 5.5rem);
  --text-philosophy: clamp(2rem, 1rem + 4.5vw, 4.5rem);
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-18: 4.5rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --gutter: var(--space-5);
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--obsidian); scroll-padding-top: var(--space-6); -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--steel); background: var(--obsidian); font-family: var(--font-body); font-size: var(--text-body); line-height: 1.7; overflow-wrap: anywhere; }
body, button { font-synthesis: none; }
h1, h2, h3, p, blockquote { margin: 0; }
h1, h2, h3 { color: var(--bone); }
a { color: inherit; text-underline-offset: .25em; }
a, button { -webkit-tap-highlight-color: rgb(199 255 61 / 15%); }
button { font: inherit; }
button, a { touch-action: manipulation; }
button[hidden], [hidden] { display: none !important; }
::selection { background: var(--lime); color: var(--obsidian); }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 5px; }
main:focus { outline: none; }
.container { width: min(100% - var(--gutter) * 2, 1160px); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: absolute; top: var(--space-3); left: var(--space-5); z-index: 10; padding: var(--space-3) var(--space-4); background: var(--lime); color: var(--obsidian); transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
.eyebrow { font-family: var(--font-mono); font-size: var(--text-meta); line-height: 1.65; font-weight: 400; letter-spacing: .055em; }
.display { font-family: var(--font-display); font-weight: 900; letter-spacing: -.045em; }
.blue-text { color: var(--blue); }
.orange-text { color: var(--orange); }
.muted { color: var(--steel); }
.keep-word { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
.site-header { border-bottom: 1px solid var(--line); background: var(--obsidian); }
.header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; min-height: 76px; gap: var(--space-3); padding-block: var(--space-4); }
.brand { display: inline-flex; flex-direction: column; align-items: flex-start; color: var(--bone); text-decoration: none; }
/* Shared M / circle / O / circle / M pattern.
   V1 normalized reference: mean of four visible ink gaps = 2.875px at 32px.
   Controlled gap = 0.08984375em × 1.12 = 0.100625em.
   The 12% applies to this normalized spacing token, not overall logo width. */
.wordmark {
  --mom-logo-gap-base: .08984375em;
  --mom-logo-gap: calc(var(--mom-logo-gap-base) * 1.12);
  --mom-logo-dot-size: .158125em;
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--mom-logo-gap);
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
  font-weight: 900;
  white-space: nowrap;
  color: var(--bone);
}
.mom-logo-letter { display: block; flex: 0 0 auto; color: var(--bone); }
.mom-logo-dot {
  display: block;
  flex: 0 0 var(--mom-logo-dot-size);
  width: var(--mom-logo-dot-size);
  height: var(--mom-logo-dot-size);
  border-radius: 50%;
  background-color: var(--lime);
}
@supports (width: 1cap) {
  .wordmark { --mom-logo-dot-size: .22cap; }
}
.brand-name { font-family: var(--font-mono); font-size: var(--text-meta); letter-spacing: .025em; line-height: 1.5; margin-top: var(--space-1); }
.menu-toggle { width: 48px; height: 48px; display: grid; place-items: center; padding: var(--space-3); color: var(--bone); background: transparent; border: 1px solid var(--line); border-radius: 0; cursor: pointer; }
.menu-icon { position: relative; width: 20px; height: 12px; border-block: 1px solid currentColor; }
.menu-icon::after { content: ""; position: absolute; top: 5px; inset-inline: 0; border-top: 1px solid currentColor; }
.menu-toggle[aria-expanded="true"] .menu-icon { height: 20px; border: 0; }
.menu-toggle[aria-expanded="true"] .menu-icon::before, .menu-toggle[aria-expanded="true"] .menu-icon::after { content: ""; position: absolute; top: 9px; inset-inline: 0; border-top: 1px solid currentColor; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-icon::after { transform: rotate(-45deg); }
.site-nav { display: flex; flex-direction: column; width: 100%; padding: var(--space-3) var(--space-4); background: var(--graphite); gap: var(--space-1); border-top: 1px solid var(--line); }
.site-nav a { display: flex; align-items: center; flex-wrap: wrap; column-gap: .35em; min-height: 48px; width: fit-content; max-width: 100%; padding-block: var(--space-3); text-decoration: none; font-family: var(--font-mono); font-size: var(--text-ui); line-height: 1.65; overflow-wrap: anywhere; color: var(--bone); }
.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: .6em; }
.hero { padding-block: var(--space-12) var(--space-14); }
.grid-surface { background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 72px 72px; }
.hero-label { display: flex; align-items: baseline; gap: var(--space-3); max-width: 40rem; color: var(--steel); }
.hero-label::before { content: ""; flex: 0 0 6px; width: 6px; height: 6px; background: var(--lime); }
.library-hero .hero-label::before { background: var(--blue); }
.hero-title { font-size: var(--text-hero); line-height: .99; margin-block: var(--space-6); max-width: 100%; }
.hero-title span { display: block; }
.lead { font-size: var(--text-lead); line-height: 1.52; max-width: 43rem; color: var(--steel); }
.wide-break { display: none; }
.button { min-height: 52px; width: 100%; display: flex; align-items: center; justify-content: center; gap: var(--space-3); border: 1px solid transparent; border-radius: 0; padding: var(--space-4); font-family: var(--font-mono); font-size: var(--text-ui); font-weight: 500; line-height: 1.55; text-align: center; text-decoration: none; overflow-wrap: anywhere; transition: border-color .15s ease, background-color .15s ease, color .15s ease; }
.button > span[aria-hidden] { flex-shrink: 0; }
.button-primary { background: var(--lime); color: var(--obsidian); }
.hero-cta { margin-top: var(--space-8); }
.hero-micro { margin-top: var(--space-4); letter-spacing: .015em; }
.button-quiet { border-color: var(--line); color: var(--bone); background: transparent; }
.section { padding-block: var(--space-14); }
.section-label { margin-bottom: var(--space-6); }
.about-section { border-block: 1px solid var(--line); }
.prose { max-width: 44rem; }
.prose p + p { margin-top: var(--space-6); }
.three-grid { display: grid; gap: var(--space-4); }
.card { min-width: 0; padding: var(--space-5); background: var(--graphite); border: 1px solid var(--line); }
.card-title { display: block; font-family: var(--font-display); font-size: var(--text-card); font-weight: 900; line-height: 1.1; letter-spacing: -.025em; overflow-wrap: anywhere; }
.index { display: block; margin-bottom: var(--space-5); color: var(--lime); }
.principle p { margin-top: var(--space-5); }
.work-section { padding-top: var(--space-4); }
.work-card { display: flex; flex-direction: column; gap: var(--space-5); border-top: 2px solid var(--bone); }
.work-card.training { border-top-color: var(--lime); }
.work-card.recovery { border-top-color: var(--blue); }
.training .category-label { color: var(--lime); }
.recovery .category-label { color: var(--blue); }
.science .category-label { color: var(--bone); }
.metadata { color: var(--steel); letter-spacing: .015em; }
.work-card .button { margin-top: auto; }
.featured-section { padding-top: var(--space-4); }
.resource-card { border-top: 2px solid var(--blue); }
.resource-title { font-family: var(--font-display); font-size: var(--text-resource); line-height: 1.06; letter-spacing: -.03em; font-weight: 900; margin-block: var(--space-6); }
.resource-main > .metadata { margin-top: var(--space-6); }
.resource-action { margin-top: var(--space-8); }
.resource-status { margin-bottom: var(--space-3); }
.resource-cta--unavailable { color: var(--steel); background: transparent; border-color: var(--steel); cursor: default; }
/* Future active state uses a real <a>, never a placeholder href. See README. */
.resource-card--available .resource-status { color: var(--blue); }
.resource-cta--available { background: var(--lime); color: var(--obsidian); border-color: var(--lime); }
.resource-quote { margin-top: var(--space-8); padding-top: var(--space-8); border-top: 1px solid var(--line); font-family: var(--font-display); font-size: 1.625rem; line-height: 1.35; font-weight: 700; letter-spacing: -.02em; color: var(--bone); }
.philosophy { padding-block: var(--space-14) var(--space-20); }
.accent-rule { width: 48px; height: 2px; background: var(--lime); margin-bottom: var(--space-8); }
.philosophy-title { font-size: var(--text-philosophy); line-height: 1.08; }
.philosophy-support { margin-top: var(--space-8); max-width: 43rem; }
.site-footer { border-top: 1px solid var(--line); padding-block: var(--space-12) var(--space-8); }
.footer-grid { display: grid; gap: var(--space-8); }
.footer-brand .wordmark { font-size: 2.5rem; }
.footer-promise { margin-top: var(--space-6); margin-bottom: var(--space-3); color: var(--bone); font-family: var(--font-mono); font-size: var(--text-ui); line-height: 1.65; }
.footer-nav { display: flex; flex-direction: column; align-items: flex-start; }
.footer-nav a { display: flex; align-items: center; min-height: 48px; padding-block: var(--space-3); font-family: var(--font-mono); font-size: var(--text-ui); color: var(--bone); text-decoration: none; }
.footer-contact { display: flex; flex-direction: column; font-size: var(--text-body); }
.footer-contact p { margin-bottom: var(--space-2); }
.footer-contact a { display: block; padding-block: var(--space-3); min-height: 48px; overflow-wrap: anywhere; text-decoration: none; }
.footer-bottom { border-top: 1px solid var(--line); padding-top: var(--space-6); margin-top: var(--space-8); display: grid; gap: var(--space-6); }
.disclaimer { font-size: var(--text-body); max-width: 43rem; }
.copyright { font-size: var(--text-meta); font-family: var(--font-mono); line-height: 1.7; }
.status-badge { display: inline-block; border: 1px solid var(--blue); padding: var(--space-3) var(--space-4); margin-top: var(--space-8); color: var(--bone); }
.archive-categories { padding-top: var(--space-6); }
.category-scroll-wrap { position: relative; }
.category-scroll-wrap::after { content: ""; pointer-events: none; position: absolute; right: 0; top: 0; bottom: 0; width: 28px; background: linear-gradient(90deg, transparent, var(--obsidian)); }
.category-scroll { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--steel) var(--obsidian); padding-bottom: var(--space-2); }
.category-list { list-style: none; display: flex; gap: var(--space-6); width: max-content; padding: 0 var(--space-8) 0 0; margin: 0; font-family: var(--font-mono); font-size: var(--text-meta); line-height: 1.7; }
.category-list li { padding-block: var(--space-4); white-space: nowrap; border-bottom: 2px solid transparent; }
.category-list .category-current { color: var(--bone); border-bottom-color: var(--lime); font-weight: 700; }
.category-list .category-recovery { color: var(--blue); }
.archive-note { margin-top: var(--space-4); }
.library-featured { padding-top: var(--space-10); }
.resource-features { margin-top: var(--space-8); }
.planned-note { margin-bottom: var(--space-4); }
.resource-features h3 { color: var(--bone); }
.feature-list { padding-left: var(--space-5); margin-block: var(--space-4) 0; }
.feature-list li { padding-left: var(--space-1); }
.feature-list li + li { margin-top: var(--space-3); }
.feature-list li::marker { color: var(--blue); }
.resource-support { margin-top: var(--space-4); letter-spacing: .01em; }
.resource-safety { border-top: 1px solid var(--line); padding-top: var(--space-6); margin-top: var(--space-6); }
.how-section { padding-top: var(--space-4); }
.workflow-note { margin-bottom: var(--space-8); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-8); }
.steps li { min-width: 0; border-top: 1px solid var(--line); padding-top: var(--space-6); }
.steps h3 { display: flex; flex-direction: column; gap: var(--space-3); }
.step-title { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.2; font-weight: 900; letter-spacing: -.025em; }
.steps p { margin-top: var(--space-4); }
.important-section { padding-top: var(--space-4); }
.important-card { border-left: 2px solid var(--orange); }
.important-card h2 { margin-block: var(--space-5); }
.coming-section { padding-top: var(--space-4); padding-bottom: var(--space-20); }
.future-card { background: transparent; display: flex; flex-direction: column; gap: var(--space-5); }
.future-status { margin-top: auto; padding-top: var(--space-3); }
.follow-cta { margin-top: var(--space-8); }
.error-actions { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-8); }
@media (hover: hover) {
  a:not(.button):hover { color: var(--bone); text-decoration: underline; }
  .brand:hover { text-decoration: none !important; }
  .button-primary:hover, .resource-cta--available:hover { background: var(--bone); border-color: var(--bone); }
  .button-quiet:hover, .menu-toggle:hover { border-color: var(--steel); }
}
@media (min-width: 390px) {
  :root { --gutter: var(--space-6); }
  .card { padding: var(--space-6); }
}
@media (min-width: 700px) {
  .hero { padding-block: var(--space-16); }
  .hero-title { margin-block: var(--space-8); }
  .wide-break { display: initial; }
  .hero-cta, .follow-cta { width: fit-content; min-width: 340px; }
  .hero-cta { margin-top: var(--space-10); }
  .section { padding-block: var(--space-16); }
  .work-section, .featured-section, .how-section, .important-section, .coming-section { padding-top: var(--space-4); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; column-gap: var(--space-12); }
  .footer-brand-block { grid-column: 1 / -1; max-width: 35rem; }
  .footer-contact { justify-content: flex-start; }
  .resource-card, .important-card { padding: var(--space-10); }
  .error-actions { flex-direction: row; }
  .error-actions .button { width: fit-content; }
  .category-scroll-wrap::after { display: none; }
}
@media (min-width: 1000px) {
  .header-inner { min-height: 88px; flex-wrap: nowrap; }
  .menu-toggle { display: none; }
  .site-nav { width: auto; flex-direction: row; align-items: center; gap: var(--space-8); padding: 0; background: transparent; border: 0; }
  .site-nav a { font-size: var(--text-meta); }
  .site-nav .nav-contact { display: none; }
  .hero { padding-block: var(--space-20); }
  .hero-title { max-width: 58rem; }
  .hero .lead { max-width: 45rem; }
  .about-layout { display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-12); }
  .about-layout .section-label { margin: var(--space-1) 0 0; }
  .three-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
  .card-title { font-size: 1.75rem; }
  .work-card .card-title { min-height: 3.3em; }
  .home-resource { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-12); }
  .home-resource .resource-action { max-width: 26rem; }
  .resource-quote { border-top: 0; border-left: 1px solid var(--line); padding: var(--space-4) 0 var(--space-4) var(--space-10); margin: 0; display: flex; align-items: center; font-size: 2rem; }
  .philosophy { padding-block: var(--space-20) var(--space-24); }
  .library-resource { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: var(--space-12); row-gap: var(--space-8); align-items: start; }
  .library-resource .resource-main { grid-column: 1; grid-row: 1; }
  .library-resource .resource-features { grid-column: 2; grid-row: 1; margin-top: 0; }
  .library-resource .resource-action { grid-column: 1; grid-row: 2; margin: 0; }
  .library-resource .resource-safety { grid-column: 2; grid-row: 2; margin: 0; }
  .footer-grid { grid-template-columns: minmax(0, 1.3fr) minmax(100px, .5fr) minmax(0, 1fr); gap: var(--space-10); }
  .footer-brand-block { grid-column: auto; }
  .footer-bottom { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: end; }
  .copyright { text-align: right; }
}
@media (min-width: 1200px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}