/* ===========================================
       DESIGN TOKENS เฉดเดียวกับชุดสไลด์ "Delphic"
       (bronze/stone/patina) แต่เป็นหน้า scroll ปกติ
       =========================================== */
    :root {
      /* ── ระบบ Taxonomy Grid ชุดเดียวกับสไลด์ทั้งสี่ชุด ──
         ชื่อโทเคนคงเดิมทุกตัว เปลี่ยนเฉพาะค่า จึงไม่ต้องแก้ CSS ส่วนอื่นเลย */
      --stone: #f6f4ec;
      --stone-deep: #ece8d9;
      --stone-card: #ffffff;
      --stone-line: rgba(20, 32, 60, 0.22);
      --ink: #14203c;
      --ink-soft: #5a6377;
      --ink-faint: #7a8296;
      --bronze: #1F49C7;
      --bronze-deep: #17389a;
      --bronze-soft: rgba(31, 73, 199, 0.10);
      --bronze-line: rgba(31, 73, 199, 0.38);
      --patina: #1E9E6A;
      --patina-soft: rgba(30, 158, 106, 0.12);
      --danger: #b0272e;

      /* ── สีประจำรายวิชา คู่เข้มไว้ใช้กับข้อความขนาดปกติ ── */
      --cobalt: #1F49C7;
      --cobalt-deep: #17389a;
      --green: #1E9E6A;
      --green-deep: #146f4b;
      --red: #E8555A;
      --red-deep: #b0272e;
      --amber: #C77E00;
      --amber-deep: #8f5a00;

      --grid-line: rgba(31, 73, 199, 0.06);
      --grid-line-major: rgba(31, 73, 199, 0.13);

      --font-display: 'Bai Jamjuree', sans-serif;
      --font-body: 'IBM Plex Sans Thai', sans-serif;
      --font-mono: 'JetBrains Mono', monospace;

      --ease: cubic-bezier(0.16, 1, 0.3, 1);
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: var(--font-body);
      background: var(--stone);
      color: var(--ink);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    a {
      color: inherit;
    }

    img,
    svg {
      display: block;
      max-width: 100%;
    }

    .skip-link {
      position: absolute;
      left: -999px;
      top: 0;
      background: var(--ink);
      color: var(--stone);
      padding: 10px 18px;
      border-radius: 0 0 8px 0;
      z-index: 10000;
    }

    .skip-link:focus {
      left: 0;
    }

    /* ===========================================
       TOP BAR
       =========================================== */
    .topbar {
      position: sticky;
      top: 0;
      z-index: 500;
      background: var(--ink);
      color: var(--stone);
      padding: 14px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      border-bottom: 3px solid var(--bronze);
    }

    .topbar-brand {
      font-family: var(--font-display);
      font-weight: 600;
      font-size: 16px;
      letter-spacing: .02em;
    }

    /* สีเน้นทึบวางบนพื้นหมึกไม่ได้ คอนทราสต์ตกเหลือ 2.1:1
       ตาม DESIGN.md ส่วน 12.1 บนแถบหัวใช้ได้แต่สีกระดาษหรือกระดาษโปร่งแสง */
    .topbar-brand span {
      color: rgba(246, 244, 236, 0.72);
    }

    /* เดิมเป็น var(--stone-line) ซึ่งเป็นหมึกโปร่งแสง วางบนพื้นหมึกจึงล่องหน */
    .topbar-meta {
      font-size: 12.5px;
      color: rgba(246, 244, 236, 0.72);
      text-align: right;
    }

    /* ===========================================
       HERO
       =========================================== */
    .hero {
      position: relative;
      padding: 88px 24px 64px;
      text-align: center;
      background:
        radial-gradient(ellipse 900px 420px at 50% -10%, var(--bronze-soft), transparent 70%),
        var(--stone);
      overflow: hidden;
    }

    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 13px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--bronze-deep);
      font-weight: 600;
      margin-bottom: 22px;
    }

    .hero-eyebrow::before,
    .hero-eyebrow::after {
      content: '';
      width: 28px;
      height: 1px;
      background: var(--bronze-line);
    }

    .hero h1 {
      font-family: var(--font-display);
      font-weight: 600;
      font-size: clamp(30px, 5vw, 52px);
      line-height: 1.18;
      color: var(--ink);
      max-width: 820px;
      margin: 0 auto 20px;
    }

    .hero h1 em {
      font-style: italic;
      color: var(--bronze-deep);
    }

    .hero p.lede {
      font-size: clamp(15px, 2vw, 18px);
      color: var(--ink-soft);
      max-width: 620px;
      margin: 0 auto;
    }

    .hero-divider {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin: 34px auto 0;
      max-width: 300px;
    }

    .hero-divider .line {
      flex: 1;
      height: 1px;
      background: var(--bronze-line);
    }

    .hero-divider .dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--bronze);
      transform: rotate(45deg);
    }

    /* ===========================================
       SECTION HEADINGS
       =========================================== */
    .section {
      max-width: 1140px;
      margin: 0 auto;
      padding: 12px 24px 96px;
    }

    .section-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 32px;
      padding-bottom: 18px;
      border-bottom: 1.5px solid var(--stone-line);
    }

    .section-head h2 {
      font-family: var(--font-display);
      font-weight: 600;
      font-size: clamp(22px, 3vw, 28px);
    }

    .section-head p {
      font-size: 13.5px;
      color: var(--ink-faint);
      max-width: 360px;
    }

    /* ===========================================
       CARD GRID
       =========================================== */
    .card-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
    }

    @media (max-width: 760px) {
      .card-grid {
        grid-template-columns: 1fr;
      }
    }

    .deck-card {
      position: relative;
      display: flex;
      flex-direction: column;
      background: var(--stone-card);
      border: 1.5px solid var(--stone-line);
      border-radius: 16px;
      padding: 30px 28px 26px;
      text-decoration: none;
      color: var(--ink);
      transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
      overflow: hidden;
    }

    .deck-card::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 5px;
      background: var(--bronze);
      transform: scaleY(0);
      transform-origin: top;
      transition: transform .3s var(--ease);
    }

    .deck-card.primary::before {
      background: var(--patina);
    }

    .deck-card:hover,
    .deck-card:focus-visible {
      transform: translateY(-4px);
      box-shadow: 0 20px 44px rgba(43, 38, 32, .14);
      border-color: var(--bronze-line);
      outline: none;
    }

    .deck-card:hover::before,
    .deck-card:focus-visible::before {
      transform: scaleY(1);
    }

    .deck-card-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 18px;
    }

    .deck-card-index {
      font-family: var(--font-display);
      font-size: 13px;
      font-weight: 600;
      color: var(--ink-faint);
      letter-spacing: .06em;
    }

    .badge-row {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: flex-end;
    }

    .badge {
      font-size: 11px;
      font-weight: 600;
      padding: 4px 10px;
      border-radius: 999px;
      white-space: nowrap;
      letter-spacing: .02em;
    }

    .badge-ai {
      background: var(--patina-soft);
      color: var(--patina);
      border: 1px solid rgba(79, 116, 102, .3);
    }

    .badge-count {
      background: var(--bronze-soft);
      color: var(--bronze-deep);
      border: 1px solid var(--bronze-line);
    }

    .deck-card h3 {
      font-family: var(--font-display);
      font-weight: 600;
      font-size: 22px;
      line-height: 1.3;
      margin-bottom: 4px;
    }

    .deck-card .en-name {
      font-size: 12.5px;
      color: var(--ink-faint);
      font-style: italic;
      margin-bottom: 14px;
    }

    .deck-card p.desc {
      font-size: 14px;
      color: var(--ink-soft);
      flex: 1;
      margin-bottom: 20px;
    }

    .deck-card .cta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 13.5px;
      font-weight: 600;
      color: var(--ink);
    }

    .deck-card .cta svg {
      width: 15px;
      height: 15px;
      transition: transform .2s var(--ease);
    }

    .deck-card:hover .cta svg,
    .deck-card:focus-visible .cta svg {
      transform: translateX(4px);
    }

    /* ===========================================
       FOOTER
       =========================================== */
    footer {
      padding: 40px 24px 56px;
      text-align: center;
      color: var(--ink-faint);
      font-size: 12.5px;
      border-top: 1px solid var(--stone-line);
    }

    footer p+p {
      margin-top: 6px;
    }

    /* ===========================================
       ไวยากรณ์องค์ประกอบตามสเปก Taxonomy Grid
       กรอบหมึกหนา เงาทึบแบบ offset ไม่มีมุมโค้ง
       บล็อกนี้เขียนทับสไตล์เดิมที่มาจากผิว Delphic
       =========================================== */
    body {
      background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
        linear-gradient(var(--grid-line-major) 1.5px, transparent 1.5px),
        linear-gradient(90deg, var(--grid-line-major) 1.5px, transparent 1.5px);
      background-size: 32px 32px, 32px 32px, 160px 160px, 160px 160px;
    }

    :focus-visible {
      outline: 3px solid var(--cobalt);
      outline-offset: 3px;
    }

    .skip-link {
      border-radius: 0;
    }

    .topbar-brand {
      font-family: var(--font-mono);
      font-size: 15px;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .topbar-meta {
      font-family: var(--font-mono);
      font-size: 13px;
    }

    .hero {
      background: none;
    }

    .hero-eyebrow {
      font-family: var(--font-mono);
      font-weight: 700;
      letter-spacing: .2em;
    }

    .hero h1 em {
      font-style: normal;
      font-weight: 700;
      color: var(--cobalt);
    }

    .hero-divider .dot {
      border-radius: 0;
      transform: none;
      width: 10px;
      height: 10px;
    }

    .section-head {
      border-bottom: 3px solid var(--ink);
    }

    /* ── ตารางการ์ด ปรับให้รองรับ 1 ถึง 4 ใบต่อแถว ── */
    .card-grid {
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    }

    /* ── การ์ดชุดสไลด์ ── */
    .deck-card {
      --c: var(--cobalt);
      --c-deep: var(--cobalt-deep);
      --c-soft: rgba(31, 73, 199, 0.10);
      background: var(--stone-card);
      border: 2.5px solid var(--ink);
      border-radius: 0;
      box-shadow: 6px 6px 0 rgba(20, 32, 60, 0.16);
      padding: 34px 28px 26px;
    }

    .deck-card.c-green {
      --c: var(--green);
      --c-deep: var(--green-deep);
      --c-soft: rgba(30, 158, 106, 0.10);
    }

    .deck-card.c-red {
      --c: var(--red);
      --c-deep: var(--red-deep);
      --c-soft: rgba(232, 85, 90, 0.12);
    }

    .deck-card.c-amber {
      --c: var(--amber);
      --c-deep: var(--amber-deep);
      --c-soft: rgba(199, 126, 0, 0.12);
    }

    /* แถบสีประจำวิชา แสดงตลอดเวลาที่ขอบบน ไม่ใช่เฉพาะตอนชี้ */
    .deck-card::before {
      left: 0;
      right: 0;
      top: 0;
      bottom: auto;
      width: auto;
      height: 10px;
      background: var(--c);
      transform: none;
    }

    /* คลาส primary เดิมกำหนดสีแถบไว้ตายตัว ต้องเขียนทับให้ใช้สีประจำวิชาแทน */
    .deck-card.primary::before {
      background: var(--c);
    }

    .deck-card-index {
      white-space: nowrap;
    }

    .deck-card:hover,
    .deck-card:focus-visible {
      transform: translate(-2px, -2px);
      box-shadow: 10px 10px 0 rgba(20, 32, 60, 0.18);
      border-color: var(--ink);
    }

    .deck-card:hover::before,
    .deck-card:focus-visible::before {
      transform: none;
    }

    .deck-card-index {
      font-family: var(--font-mono);
      font-size: 14px;
      font-weight: 700;
      color: var(--c-deep);
      letter-spacing: .12em;
    }

    .badge {
      font-family: var(--font-mono);
      font-size: 12.5px;
      font-weight: 700;
      border-radius: 0;
      border: 2px solid var(--ink);
      background: var(--stone);
      color: var(--ink);
      letter-spacing: .04em;
    }

    .badge-ai {
      background: var(--c-soft);
      border-color: var(--c);
      color: var(--c-deep);
    }

    .badge-count {
      background: var(--stone);
      color: var(--ink-soft);
    }

    .deck-card h3 {
      font-family: var(--font-display);
      font-weight: 700;
    }

    .deck-card .en-name {
      font-family: var(--font-mono);
      font-size: 13px;
      letter-spacing: .02em;
      color: var(--ink-faint);
    }

    .deck-card .cta {
      font-family: var(--font-display);
      font-weight: 600;
      color: var(--c-deep);
    }

    footer {
      border-top: 3px solid var(--ink);
    }

    @media (prefers-reduced-motion: reduce) {

      *,
      *::before,
      *::after {
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }

    @media print {

      .topbar,
      .hero-divider {
        display: none;
      }

      body {
        background: #fff;
      }

      .deck-card {
        box-shadow: none;
      }
    }