/*
Theme Name:   Tarot Child
Theme URI:    https://www.tarotthailand.com/
Description:  Child theme ของ ColorMag สำหรับ Payakorn Thailand — คงหน้าตาเว็บเดิม เพิ่มการอ่านภาษาไทยที่ดีขึ้น
Author:       อาจารย์เซิน
Template:     colormag
Version:      4.0.0
Text Domain:  tarot-child
*/

/* ============================================================================
   เป้าหมาย: ให้เหมือนเว็บเดิมที่สุด แล้วแก้เฉพาะจุดที่เดิมอ่านยาก

   ค่าสีทั้งหมดอ่านมาจาก CSS จริงของ tarotthailand.com (ColorMag 2.0.6):
     body.custom-background { background-color: #911e1e }   พื้นหลังแดงเข้ม
     #site-navigation       { border-top-color: #d62b1b }   เมนูดำ ขีดแดงบน
     #d62b1b                                                สีเน้น: ลิงก์ ปุ่ม หัวข้อ widget

   class ที่ใช้อ้างอิงจาก markup จริงของ ColorMag 4.2.2 (cm-* prefix)
   จุดที่พลาดง่าย 2 อย่าง:
     1. หน้าบทความเก็บเนื้อหาไว้ใน .cm-entry-summary ไม่ใช่ .entry-content
     2. สีเมนูอยู่ที่ #cm-primary-nav (ID) ซึ่งเป็นลูกของ #cm-header-2
        ตั้งสีที่พ่อไม่มีผล ต้องตั้งที่ลูก
   ============================================================================ */

:root {
  /* ทับตัวแปรของ ColorMag — ตัวนี้คุมลิงก์ ปุ่ม และเส้นเน้นทั้งเว็บ */
  --cm-color-1: #d62b1b;   /* สีเน้นหลัก (ธีมตั้งมาเป็นฟ้า #257BC1) */
  --cm-color-2: #a81f12;   /* เข้มขึ้นสำหรับ hover */

  --t-red:      #d62b1b;
  --t-red-deep: #a81f12;   /* ใช้กับตัวอักษรบนพื้นสว่าง ให้ contrast ผ่าน 4.5:1 */
  --t-maroon:   #911e1e;   /* พื้นหลังนอกกล่อง ตามเว็บเดิม */
  --t-ink:      #333333;
  --t-muted:    #6e6a76;
  --t-border:   #e4e4e7;
}

/* ============================================================================
   1. พื้นหลังและตัวอักษร

   กฎภาษาไทยที่ห้ามพลาด:
   ไทยมีสระบน-ล่าง จึงต้องการ line-height สูงกว่าอังกฤษมาก (1.9 ไม่ใช่ 1.5)
   และห้ามใส่ letter-spacing เด็ดขาด เพราะสระจะลอยหลุดจากพยัญชนะ
   ============================================================================ */
/* พื้นหลังนอกกล่องเนื้อหา — แดงเข้มตามเว็บเดิม
 *
 * ใช้ !important เฉพาะบรรทัดนี้ เพราะ ColorMag ทาสี #E4E4E7 ทับจากที่ที่
 * ไล่หาไม่เจอใน CSSOM (ไม่ใช่ inline style และไม่มีกฎไหนใน stylesheet ที่ match body)
 * ไม่ใช้พร่ำเพรื่อ — ที่อื่นในไฟล์นี้ไม่มี !important เลย */
html body,
body.custom-background {
  background-color: var(--t-maroon) !important;
}

body,
button, input, select, optgroup, textarea {
  font-family: 'Sarabun', 'IBM Plex Sans Thai', -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: 0;
  word-break: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-size: 17px;
  line-height: 1.9;
  color: var(--t-ink);
}

h1, h2, h3, h4, h5, h6,
.cm-entry-title, .cm-widget-title {
  font-family: 'Kanit', 'Sarabun', sans-serif;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
}

a { color: var(--t-red-deep); }
a:hover, a:focus { color: var(--t-red); }

/* ============================================================================
   2. เมนู — ดำ ขีดแดงด้านบน เหมือนเว็บเดิม

   ต้องตั้งที่ #cm-primary-nav (ID) ไม่ใช่ที่ #cm-header-2 ที่เป็นพ่อ
   ============================================================================ */
#cm-primary-nav {
  border-top: 4px solid var(--t-red);
}

/* ลิงก์ในเมนูต้องขาวทุกสถานะ
 *
 * กฎ a:hover { color: var(--t-red) } ที่เขียนไว้สำหรับลิงก์ในบทความ
 * ไปโดนลิงก์ในเมนูด้วย พอ hover ตัวอักษรเลยกลายเป็นแดงเข้มบนพื้นแดง
 * ของเมนูที่ active — มองแทบไม่เห็น
 *
 * เมนูย่อยพื้นเข้ม และตอน hover พื้นแดง ใช้ตัวอักษรขาวได้ทั้งคู่
 */
.cm-primary-nav a,
.cm-primary-nav li > a,
.cm-primary-nav a:hover,
.cm-primary-nav a:focus,
.cm-primary-nav a:active,
.cm-primary-nav li:hover > a,
.cm-primary-nav li.focus > a,
.cm-primary-nav li.current-menu-item > a,
.cm-primary-nav li.current-menu-ancestor > a,
.cm-primary-nav li.current_page_item > a,
.cm-primary-nav ul ul a,
.cm-primary-nav ul ul a:hover {
  color: #fff;
}

.cm-primary-nav a,
.cm-primary-nav li > a {
  font-family: 'Kanit', 'Sarabun', sans-serif;
  font-weight: 400;
  font-size: 15.5px;
  line-height: 1.6;
}

/* ============================================================================
   แถบเมนูติดหนึบตอนเลื่อน
   ============================================================================

   ColorMag มี option colormag_enable_sticky_menu แต่เวอร์ชันฟรีไม่ทำงาน
   (ในรายการ setting มี colormag_sticky_menu_upgrade = เป็นฟีเจอร์ Pro)

   ทำเองด้วย CSS ล้วน ไม่ใช้ JS เพราะเบากว่าและไม่กระตุกตอนเลื่อน
   มีสองอย่างที่ต้องแก้ก่อน sticky จะทำงาน:

   1. ธีมตั้ง body { overflow: hidden } ไว้กันหน้าเลื่อนแนวนอน
      ค่านี้ทำให้ body กลายเป็น scroll container และ sticky ตายทั้งหน้า
      เปลี่ยนเป็น overflow-x: clip ซึ่งกันแนวนอนได้เหมือนเดิม
      แต่ไม่สร้าง scroll container

   2. sticky ติดได้แค่ในกรอบของ "พ่อ" ถ้าใส่ที่ #cm-header-2 (แถบเมนู)
      มันจะติดอยู่ในกรอบ .cm-main-header ที่สูงแค่ 180px แล้วเลื่อนหายไปด้วย
      จึงใส่ที่ #cm-masthead (ทั้งหัวเว็บ) แทน แล้วดันขึ้นด้วย top ติดลบ
      = -(ความสูงหัวเว็บ - ความสูงแถบเมนู) โลโก้จึงเลื่อนพ้นจอ
      เหลือแถบเมนูปักอยู่ด้านบนพอดี
*/
html body,
html body.custom-background {
  overflow-x: clip;
  overflow-y: visible;
}

#cm-masthead {
  position: sticky;
  top: -128px;              /* หัวเว็บ ~180px ลบแถบเมนู 52px */
  z-index: 999;
}

#cm-header-2 {
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}

/* จอเล็ก หัวเว็บเตี้ยลงอยู่แล้ว ให้ปักทั้งก้อนไปเลย */
@media (max-width: 860px) {
  #cm-masthead {
    top: 0;
  }
}

/* คนที่ตั้งค่าลดการเคลื่อนไหวไว้ ไม่ต้องมีแถบตามมา */
@media (prefers-reduced-motion: reduce) {
  #cm-masthead { position: static; }
}

/* เมนูย่อยพื้นขาว อ่านง่ายกว่าดำซ้อนดำของเดิม */
.cm-primary-nav ul ul,
.cm-primary-nav .sub-menu {
  border-top: 3px solid var(--t-red);
}

/* ============================================================================
   3. เนื้อบทความ — จุดที่คนใช้เวลานานที่สุด
   ============================================================================ */
.cm-entry-summary,
.single .cm-entry-summary,
.page .cm-entry-summary {
  font-size: 18px;
  line-height: 1.95;
  color: var(--t-ink);
}

.cm-entry-summary p {
  margin: 0 0 1.35em;
}

.cm-entry-summary li {
  margin-bottom: 0.5em;
  line-height: 1.9;
}

.single .cm-entry-title,
.page .cm-entry-title {
  font-size: 1.95rem;
  line-height: 1.42;
}

.cm-entry-summary h2 {
  font-size: 1.45rem;
  margin: 2em 0 0.7em;
  padding-bottom: 0.4em;
  border-bottom: 2px solid var(--t-red);
}
.cm-entry-summary h3 {
  font-size: 1.2rem;
  margin: 1.7em 0 0.55em;
  color: var(--t-red-deep);
}
.cm-entry-summary h4 {
  font-size: 1.06rem;
  margin: 1.4em 0 0.5em;
}

.cm-entry-summary img { height: auto; max-width: 100%; }

.cm-entry-summary blockquote {
  border-left: 3px solid var(--t-red);
  background: #faf7f6;
  padding: 1em 1.3em;
  margin: 1.7em 0;
}
.cm-entry-summary blockquote p:last-child { margin-bottom: 0; }

/* วิดีโอ YouTube ที่แปลงมาจาก iframe เดิม ให้ได้สัดส่วน 16:9 บนทุกจอ */
.cm-entry-summary iframe,
.wp-block-embed iframe {
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
}

/* ============================================================================
   4. ตาราง — เว็บนี้มีตารางคอร์สและตารางเวลาเรียนเยอะมาก
   ของเดิมล้นออกนอกจอบนมือถือ อันนี้คือสิ่งที่แก้ให้ดีกว่าเดิมจริง ๆ
   ============================================================================ */
.cm-entry-summary table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.7em 0;
  font-size: 15.5px;
  border: 1px solid var(--t-border);
}
.cm-entry-summary table th {
  background: var(--t-red);
  color: #fff;
  font-family: 'Kanit', sans-serif;
  font-weight: 500;
  padding: 0.7em 0.9em;
  text-align: left;
  white-space: nowrap;
}
.cm-entry-summary table td {
  border-top: 1px solid var(--t-border);
  padding: 0.7em 0.9em;
  vertical-align: top;
}
.cm-entry-summary table tr:nth-child(even) td { background: #fbf9f8; }

@media (max-width: 860px) {
  /* ห่อให้เลื่อนแนวนอนได้ ไม่ดันหน้าเว็บกว้างเกินจอ */
  .cm-entry-summary table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
}

/* ============================================================================
   5. ไซด์บาร์ — หัวข้อขีดแดงเหมือนเว็บเดิม
   ============================================================================ */
.cm-widget-title {
  font-size: 1rem;
  border-bottom: 2px solid var(--t-red);
  padding-bottom: 0.5rem;
  margin-bottom: 0.9rem;
}

aside.widget ul li {
  padding: 0.45rem 0;
  border-bottom: 1px dashed var(--t-border);
  font-size: 15px;
  line-height: 1.75;
}
aside.widget ul li:last-child { border-bottom: 0; }

aside.widget .textwidget p {
  font-size: 15px;
  line-height: 1.85;
}

/* ============================================================================
   6. รายการบทความหน้าแรก
   ============================================================================ */
.cm-posts .cm-entry-title { font-size: 1.2rem; line-height: 1.5; }
.cm-posts .cm-entry-summary { font-size: 15.5px; line-height: 1.85; }

.cm-post-date, .cm-author, .cm-below-entry-meta {
  color: var(--t-muted);
  font-size: 13.5px;
}

/* ============================================================================
   7. จอเล็ก
   ============================================================================ */
@media (max-width: 860px) {
  body { font-size: 16px; }
  .cm-entry-summary { font-size: 17px; }
  .single .cm-entry-title,
  .page .cm-entry-title { font-size: 1.45rem; }
  .cm-entry-summary h2 { font-size: 1.25rem; }
  .cm-entry-summary h3 { font-size: 1.1rem; }
}

/* ============================================================================
   8. แถบค้นหาความหมายไพ่ — แทน slider บนหน้าแรก
   ============================================================================ */
.tarot-finder {
  background: var(--t-surface, #fff);
  border: 1px solid var(--t-border);
  border-top: 3px solid var(--t-red);
  border-radius: 4px;
  padding: 1.5rem 1.6rem 1.4rem;
  margin-bottom: 1.6rem;
}

.tarot-finder__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 1rem;
}
.tarot-finder__title {
  font-family: 'Kanit', 'Sarabun', sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0;
  color: var(--t-ink);
}
.tarot-finder__all {
  font-size: 14px;
  white-space: nowrap;
}

/* ช่องค้นหา */
.tarot-finder__form {
  display: flex;
  gap: 8px;
  margin-bottom: 1.15rem;
}
.tarot-finder__form input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--t-border);
  border-radius: 3px;
  padding: 0.62rem 0.9rem;
  font-size: 15.5px;
  background: #fbf9f8;
}
.tarot-finder__form input[type="search"]:focus {
  outline: none;
  border-color: var(--t-red);
  background: #fff;
}
.tarot-finder__form button {
  flex: 0 0 auto;
  background: var(--t-red);
  color: #fff;
  border: 0;
  border-radius: 3px;
  font-family: 'Kanit', 'Sarabun', sans-serif;
  font-size: 15px;
  padding: 0.62rem 1.3rem;
  cursor: pointer;
  transition: background-color .18s ease;
}
.tarot-finder__form button:hover {
  background: var(--t-red-deep);
}

/* ปุ่มลัดไปหน้าไพ่ — เรียงตามเลขไพ่จริง ไม่ใช่ตามตัวอักษร */
.tarot-finder__cards {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tarot-finder__cards li {
  margin: 0;
  padding: 0;
  border: 0;
}
.tarot-finder__cards a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Kanit', 'Sarabun', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--t-ink);
  background: #f6f2f1;
  border: 1px solid var(--t-border);
  border-radius: 999px;
  padding: 0.32rem 0.85rem 0.32rem 0.5rem;
  transition: all .16s ease;
}
.tarot-finder__cards a:hover,
.tarot-finder__cards a:focus {
  background: var(--t-red);
  border-color: var(--t-red);
  color: #fff;
}

/* เลขไพ่โรมัน — ช่วยให้กวาดตาหาใบที่ต้องการได้เร็ว */
.tarot-finder__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 20px;
  padding: 0 4px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--t-border);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--t-muted);
}
.tarot-finder__cards a:hover .tarot-finder__num,
.tarot-finder__cards a:focus .tarot-finder__num {
  background: rgba(255, 255, 255, .92);
  border-color: transparent;
  color: var(--t-red-deep);
}

.tarot-finder__note {
  margin: 0.9rem 0 0;
  font-size: 13.5px;
  color: var(--t-muted);
}

@media (max-width: 860px) {
  .tarot-finder { padding: 1.2rem 1.1rem; }
  .tarot-finder__form { flex-wrap: wrap; }
  .tarot-finder__form input[type="search"] { flex-basis: 100%; }
  .tarot-finder__form button { width: 100%; }
}

/* ============================================================================
   9. ไอคอนโซเชียลบนหัวเว็บ
   ============================================================================ */
.tarot-social {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
  justify-content: flex-end;
}
.tarot-social li {
  margin: 0;
  padding: 0;
  border: 0;
}
.tarot-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #1c1a20;          /* ดำ — เจ้าของเลือกเอง */
  color: #fff;
  font-size: 16px;
  line-height: 1;
  transition: background-color .18s ease, transform .18s ease;
}
.tarot-social a:hover,
.tarot-social a:focus {
  background: var(--t-red);      /* hover เป็นแดงแบรนด์ */
  color: #fff;
  transform: translateY(-2px);
}
.tarot-social a i {
  line-height: 1;
}

/* ในไซด์บาร์หัวเว็บ ไม่ต้องมีกรอบการ์ดแบบ widget อื่น */
.widget_colormag_header_sidebar,
.cm-header-builder .widget.widget_custom_html {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
}

@media (max-width: 860px) {
  .tarot-social { justify-content: center; margin-top: 10px; }
  .tarot-social a { width: 34px; height: 34px; font-size: 15px; }
}

/* ============================================================================
   10. ท้ายเว็บ 3 คอลัมน์
   ============================================================================ */
.tarot-foot {
  font-size: 15px;
  line-height: 1.95;
}
.tarot-foot strong {
  display: block;
  font-family: 'Kanit', 'Sarabun', sans-serif;
  font-weight: 500;
  font-size: 16px;
  margin-bottom: 6px;
}
.tarot-foot p { margin: 0 0 0.9em; }
.tarot-foot a { text-decoration: none; }

/* QR ให้พอดีมือ ไม่ใหญ่จนกินพื้นที่ */
.tarot-qr {
  max-width: 190px;
  height: auto;
  border-radius: 8px;
  background: #fff;
  padding: 8px;
  display: block;
}
.tarot-qr-cap {
  font-size: 13.5px;
  margin-top: 8px;
  opacity: .85;
}

/* ไอคอนโซเชียลชุดท้ายเว็บ — ใหญ่กว่าบนหัวเว็บเล็กน้อยเพราะพื้นหลังเข้ม */
.tarot-social--footer {
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 10px;
}
.tarot-social--footer a {
  width: 40px;
  height: 40px;
  font-size: 17px;
  background: rgba(255, 255, 255, .12);
}
.tarot-social--footer a:hover,
.tarot-social--footer a:focus {
  background: var(--t-red);
}

@media (max-width: 860px) {
  .tarot-social--footer { justify-content: center; }
  .tarot-qr { margin: 0 auto; }
  .tarot-foot { text-align: center; }
}

/* ============================================================================
   11. หัวเรื่องหลักของหน้าแรก
   ============================================================================ */
.tarot-home-intro {
  background: #fff;
  border: 1px solid var(--t-border);
  border-top: 3px solid var(--t-red);
  border-radius: 4px;
  padding: 1.4rem 1.6rem 1.2rem;
  margin-bottom: 1.6rem;
}

.tarot-home-intro h1 {
  margin: 0 0 .6rem;
  font-size: 1.5rem;
  line-height: 1.45;
  color: var(--t-ink);
}

.tarot-home-intro p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.9;
  color: var(--t-muted);
}

@media (max-width: 860px) {
  .tarot-home-intro { padding: 1.2rem 1.1rem 1rem; }
  .tarot-home-intro h1 { font-size: 1.28rem; }
  .tarot-home-intro p { font-size: 16px; }
}

/* ============================================================================
   12. เส้นทางนำทาง (breadcrumb)

   markup มาจาก Rank Math: <nav class="rank-math-breadcrumb"><p>...</p></nav>
   ห่อด้วย .tarot-breadcrumb > .inner-wrap ในธีมลูก เพื่อให้กว้างเท่าเนื้อหา
   ============================================================================ */
.tarot-breadcrumb {
  background: #fff;
  border-bottom: 1px solid var(--t-border);
  margin-bottom: 1.4rem;
}

.tarot-breadcrumb .rank-math-breadcrumb p {
  margin: 0;
  padding: .7rem 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--t-muted);
  /* เส้นทางไทยยาวได้ ปล่อยให้ตัดบรรทัดแทนดันหน้าเว็บให้กว้างเกิน */
  overflow-wrap: anywhere;
}

.tarot-breadcrumb .rank-math-breadcrumb a {
  color: var(--t-red-deep);
  text-decoration: none;
}

.tarot-breadcrumb .rank-math-breadcrumb a:hover,
.tarot-breadcrumb .rank-math-breadcrumb a:focus-visible {
  text-decoration: underline;
}

/* ชื่อหน้าปัจจุบันไม่ใช่ลิงก์ ทำให้จางลงเพื่อไม่แย่งสายตาจากหัวเรื่อง */
.tarot-breadcrumb .rank-math-breadcrumb .last {
  color: var(--t-ink);
}

.tarot-breadcrumb .rank-math-breadcrumb .separator {
  color: #b9b5c0;
  padding: 0 .15rem;
}

@media (max-width: 860px) {
  .tarot-breadcrumb .rank-math-breadcrumb p { font-size: 13px; }
}

/* ============================================================================
   13. กล่องลิงก์ท้ายบทความไพ่
   ============================================================================ */
.tarot-related {
  margin-top: 2.2rem;
  padding-top: 1.4rem;
  border-top: 3px solid var(--t-red);
}

.tarot-related h2 {
  margin: 0 0 .7rem;
  font-size: 1.08rem;
  color: var(--t-ink);
}

.tarot-related h2 + ul { margin: 0 0 1.5rem; padding-left: 1.15rem; }
.tarot-related li { margin-bottom: .45rem; line-height: 1.75; }
.tarot-related a { color: var(--t-red-deep); }

.tarot-related-tag {
  color: var(--t-muted);
  font-size: 13px;
  white-space: nowrap;
}

/* ไพ่ใบก่อนหน้า / ถัดไป — สองช่องเท่ากัน ใบถัดไปชิดขวาเสมอ */
.tarot-card-nav {
  display: flex;
  gap: .8rem;
  margin: 0 0 1.6rem;
}

.tarot-card-nav a {
  /* ครึ่งแถวพอดี ไม่ยืดเต็ม — ไพ่ใบแรกกับใบสุดท้ายมีปุ่มเดียว
     ถ้าปล่อยให้ยืด ปุ่มเดียวจะกินเต็มแถวแล้วข้อความลอยอยู่คนละมุม */
  flex: 0 1 calc(50% - .4rem);
  display: block;
  padding: .7rem .9rem;
  border: 1px solid var(--t-border);
  border-radius: 4px;
  text-decoration: none;
  color: var(--t-ink);
  font-size: 15px;
  line-height: 1.5;
}

.tarot-card-nav a:hover,
.tarot-card-nav a:focus-visible {
  border-color: var(--t-red);
  background: rgba(214, 43, 27, .04);
}

.tarot-card-nav a span {
  display: block;
  font-size: 12.5px;
  color: var(--t-muted);
  margin-bottom: .15rem;
}

/* ถ้ามีแต่ใบถัดไป (ไพ่ใบแรกของสำรับ) ให้ดันไปชิดขวา */
.tarot-card-nav-next { text-align: right; margin-left: auto; }

@media (max-width: 560px) {
  .tarot-card-nav { flex-direction: column; }
  .tarot-card-nav a { flex-basis: auto; }
  .tarot-card-nav-next { text-align: left; margin-left: 0; }
}

/* ============================================================================
   14. รายละเอียดเล็ก ๆ
   ============================================================================ */

/* โฟกัสด้วยคีย์บอร์ดต้องเห็นชัด — จำเป็นกับคนที่ใช้ปุ่ม Tab */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--t-red);
  outline-offset: 2px;
}

::selection {
  background: rgba(214, 43, 27, .16);
  color: var(--t-ink);
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}