/* ---------------------------------------------------------------------------
   ห้องของพี่หมอตอนจุดธูป
   ref ทั้งห้าชิ้นของลูกค้าเห็นตรงกัน: ภาพบรรยากาศ ตัวอักษร serif บางตัวใหญ่
   สีโกโก้ ครีม มะกอก ซุ้มโค้ง ปุ่มมน และเนื้อภาพที่มีเกรน
   มีสองโทนให้ลูกค้าเลือก โครงเดียวกันทุกอย่าง ต่างกันแค่แสง

   dusk  ค่ำ แสงเทียน พื้นโกโก้      (ค่าเริ่มต้น)
   dawn  รุ่ง แสงเช้า พื้นผ้าลินิน

   กติกา
   1. ทองเหลืองเป็นเส้นและตัวอักษรเท่านั้น ไม่เป็นพื้น
   2. ของที่ถูกเลือก "ถูกเติมเต็ม" เป็นก้อนสีเดียวทั้งชิ้น ไม่ใช่แค่เปลี่ยนสีขอบ
   3. มุมมนเสมอ ซุ้มโค้งใช้กับรูปคนและรูปบูชาเท่านั้น
   4. ตัวเลขทุกค่าผ่านการคำนวณ contrast แล้ว ห้ามเปลี่ยนสีโดยไม่คำนวณใหม่
--------------------------------------------------------------------------- */

:root,
:root[data-look='dusk'] {
  color-scheme: dark;

  --ground:        #1C1511;   /* โกโก้เข้ม ไม่ใช่ดำ */
  --raise:         #271E18;
  --edge:          #3A2D24;   /* เส้นตกแต่ง ไม่ใช้เป็นขอบของที่ต้องกด */
  --line:          #8C7562;   /* ขอบของที่กดได้ 4.1:1 */
  --desk:          #130E0B;

  --ink:           #F1E8DA;   /* 14.9:1 */
  --ink-soft:      #CFC1AE;   /* 10.2:1 */
  --ink-faint:     #A89684;   /* 6.3:1 */
  --brass:         #CDA86E;   /* 8.1:1 */

  --fill:          #EADFCB;   /* ก้อนของที่ถูกเลือกและปุ่มหลัก */
  --fill-ink:      #1C1511;
  --fill-ink-soft: #5A4838;

  --alarm:         #E58A6C;

  --shadow:        rgba(0, 0, 0, 0.55);
  --glow:          rgba(205, 168, 110, 0.16);
  --grain-opacity: 0.07;
  --photo-fade:    #1C1511;
}

:root[data-look='dawn'] {
  color-scheme: light;

  --ground:        #EFE6D7;   /* ผ้าลินิน */
  --raise:         #E2D4BE;   /* ต่างจากพื้น 1.18:1 การ์ดยังมองเห็นเป็นก้อน */
  --edge:          #D5C6AF;
  --line:          #836B56;   /* พื้น 4.0 · การ์ด 3.4 */
  --desk:          #E3D8C6;

  /* ทุกค่าวัดทั้งบนพื้นและบนการ์ด ตัวที่ต่ำสุดยังผ่าน 4.5:1 */
  --ink:           #2A1F18;   /* พื้น 13.0 · การ์ด 11.0 */
  --ink-soft:      #574638;   /* พื้น 7.3 · การ์ด 6.2 */
  --ink-faint:     #65523F;   /* พื้น 6.0 · การ์ด 5.1 */
  --brass:         #6A4F27;   /* พื้น 6.2 · การ์ด 5.2 */

  --fill:          #2A1F18;
  --fill-ink:      #F3EBDD;
  --fill-ink-soft: #CDBFAC;

  --alarm:         #93381F;   /* พื้น 6.0 · การ์ด 5.1 */

  --shadow:        rgba(42, 31, 24, 0.28);
  --glow:          rgba(126, 95, 49, 0.12);
  --grain-opacity: 0.05;
  --photo-fade:    #EFE6D7;
}

:root {
  /* ตารางเดียวทั้งเว็บ */
  --u: 4px;
  --gap-hair:  calc(var(--u) * 1);
  --gap-tight: calc(var(--u) * 2);
  --gap:       calc(var(--u) * 4);
  --gap-wide:  calc(var(--u) * 7);
  --gap-void:  calc(var(--u) * 14);
  --page-pad:  calc(var(--u) * 6);

  --r-soft: 20px;
  --r-chip: 16px;
  --r-pill: 999px;

  /* serif บางสำหรับหัวข้อไทย · Marcellus สำหรับตัวละตินกับตัวเลขเงิน · Anuphan สำหรับเนื้อความ
     ทั้ง Noto Serif Thai และ Anuphan ออกแบบสระลอยวรรณยุกต์ไทยมาครบ */
  --face-display: 'Noto Serif Thai', 'Trirong', Georgia, serif;
  --face-latin:   'Marcellus', 'Noto Serif Thai', Georgia, serif;
  --face-body:    'Anuphan', 'Sarabun', system-ui, -apple-system, sans-serif;

  --t-hero:    clamp(3.25rem, 16vw, 4.25rem);
  --t-title:   clamp(2.125rem, 10vw, 2.75rem);   /* หัวข้อขั้นงาน บรรทัดเดียวที่ 390 ขนาดใหญ่เก็บไว้ให้หน้าแรก */
  --t-display: clamp(3rem, 15vw, 4rem);
  --t-lead:    1.125rem;
  --t-body:    1rem;
  --t-small:   0.875rem;
  --t-micro:   0.8125rem;   /* 13px เล็กสุดที่ภาษาไทยยังอ่านสบายบนมือถือ */

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

/* จอแคบกว่า 384 (เช่น 360, 375, 380) ลดขอบข้าง ช่องวันในปฏิทิน 7 คอลัมน์จะยังกว้างอย่างน้อย 48px */
@media (max-width: 383px) {
  :root { --page-pad: calc(var(--u) * 3); }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--ground);
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  min-height: 100dvh;
  overflow-x: clip;
  background-color: var(--ground);
  /* แสงเทียนจากด้านบน เบาจนแทบไม่เห็น แต่ถ้าเอาออกพื้นจะแบนทันที */
  background-image: radial-gradient(90% 55% at 50% 0%, var(--glow), transparent 70%);
  background-repeat: no-repeat;
  color: var(--ink);
  font-family: var(--face-body);
  font-size: var(--t-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* เกรนเหมือนฟิล์ม ทับทั้งจอบางๆ ให้พื้นไม่ดูเป็นสีดิจิทัลเรียบ */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .42 0 0 0 0 .34 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--fill); color: var(--fill-ink); }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--ground); }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; }
* { scrollbar-width: thin; scrollbar-color: var(--line) var(--ground); }

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

input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: inherit; -webkit-tap-highlight-color: transparent; }

h1, h2, h3 {
  font-family: var(--face-display);
  font-weight: 300;
  line-height: 1.35;
  margin: 0;
  text-wrap: balance;
}

.latin { font-family: var(--face-latin); }
.tnum { font-variant-numeric: tabular-nums; }

/* ภาษาไทยไม่มีเว้นวรรคระหว่างคำ เบราว์เซอร์ตัดชื่อคนกลางคำได้ ครอบชื่อไว้ด้วยตัวนี้ */
.nw { white-space: nowrap; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.ico {
  width: 20px;
  height: 20px;
  flex: none;
  vertical-align: middle;
}
.ico--lg { width: 24px; height: 24px; }
.ico--xl { width: 32px; height: 32px; }

[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}