/*
 * เว็บของ RootLiu Studio
 *
 * ใช้ร่วมกันทั้ง index.html และ privacy.html
 * โทนเดียวกับธีม Inkwell ในเกม กระดาษอุ่นกับหมึกเข้ม เพราะสตูดิโอกับเกมควรดูเป็นชุดเดียวกัน
 *
 * โลโก้เป็นภาพสีเดียว จึงวางด้วย CSS mask แทน <img>
 * ทำให้เปลี่ยนสีตามธีมได้จากไฟล์เดียว ไม่ต้องเก็บฉบับขาวกับฉบับดำแยกกัน
 */

:root{
  --paper:#F3EDE1;
  --card:#FBF7EF;
  --rule:#D9CDB6;
  --ink:#1B1713;
  --ink-2:#4A4139;
  --muted:#857868;
  --brand:#BE111F;
  --brand-soft:#F3E3E0;
  --f-d:"Bai Jamjuree","Noto Sans Thai","Trebuchet MS",system-ui,sans-serif;
  --f-m:"Chivo Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#12100D;
    --card:#1B1814;
    --rule:#332C24;
    --ink:#EFE7D8;
    --ink-2:#C3B8A6;
    --muted:#8A7D6C;
    --brand:#E8505C;
    --brand-soft:#2A1A19;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-d);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
.wrap{
  max-width:720px;
  margin:0 auto;
  padding:clamp(2rem,7vw,4.5rem) clamp(1.25rem,5vw,2rem) 3rem;
}

/* ── โลโก้ ─────────────────────────────────── */
/*
 * โลโก้เป็นภาพสีเดียว จึงวางด้วย CSS mask แทน <img>
 * ได้สีตามธีมจากไฟล์เดียว ไม่ต้องเก็บฉบับขาวกับฉบับดำแยกกัน
 * ต้องใส่ aspect-ratio ให้ตรงกับ viewBox ของไฟล์ ไม่งั้นกล่องจะสูงเป็นศูนย์
 */
.wordmark,
.mark{
  display:block;
  background-color:currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:left center; mask-position:left center;
  -webkit-mask-size:contain; mask-size:contain;
}
/*
 * ประกอบเองจากสองชิ้นแทนที่จะใช้ไฟล์โลโก้รวม
 * เพราะไฟล์รวมเป็นสีเดียวทั้งก้อน พอเอามาใช้จะได้เครื่องหมายสีดำ
 * ซึ่งทิ้งสีแดงอันเป็นตัวจำของแบรนด์ไป แยกชิ้นแล้วให้สีคนละค่าได้
 */
.wordmark{
  width:clamp(150px,36vw,190px);
  aspect-ratio:675/150;
  color:var(--ink);
  -webkit-mask-image:url("rootliu-wordmark.svg");
  mask-image:url("rootliu-wordmark.svg");
}
.mark{
  width:clamp(52px,12vw,66px);
  aspect-ratio:384/392;
  color:var(--brand);
  -webkit-mask-image:url("rootliu-mark.svg");
  mask-image:url("rootliu-mark.svg");
}

/* ซ่อนจากตาแต่ยังอ่านได้ด้วยโปรแกรมอ่านหน้าจอและเครื่องมือค้นหา */
.sr{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* ── หัวเว็บ ────────────────────────────────── */
.hero{display:flex; flex-direction:column; gap:1.5rem; margin-bottom:3.4rem}
h1{margin:0; display:flex; align-items:center; gap:1rem; flex-wrap:wrap}
.lede{
  font-size:clamp(1.06rem,3.2vw,1.22rem);
  color:var(--ink-2);
  margin:0;
  max-width:36ch;
  text-wrap:balance;
}
.lede-th{font-size:.95rem; color:var(--muted); margin:.2rem 0 0}

/* ── หัวข้อส่วน ─────────────────────────────── */
section{margin-bottom:3.2rem}
h2{
  font-family:var(--f-m); font-size:.7rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
  margin:0 0 1.2rem; padding-bottom:.6rem; border-bottom:1px solid var(--rule);
}

/* ── สิ่งที่เราทำ ────────────────────────────── */
.what{display:grid; gap:1.5rem}
@media(min-width:620px){ .what{grid-template-columns:1fr 1fr; gap:2.2rem} }
.what h3{font-size:1.08rem; font-weight:600; margin:0 0 .35rem}
.what p{margin:0; color:var(--ink-2); font-size:.97rem}

/* ── การ์ดผลงาน ────────────────────────────── */
.work{
  display:flex; gap:1.25rem; align-items:flex-start;
  padding:1.35rem; border:1px solid var(--rule); border-radius:16px;
  background:var(--card);
}
.work img{
  flex:0 0 auto; width:72px; height:72px;
  border-radius:17px; display:block;
  border:1px solid var(--rule);
}
.work .meta{min-width:0}
.tag{
  font-family:var(--f-m); font-size:.65rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brand);
  display:inline-block; margin-bottom:.4rem;
  padding:.18rem .5rem; border:1px solid var(--brand); border-radius:999px;
}
.work h3{margin:0 0 .35rem; font-size:1.15rem; font-weight:600; letter-spacing:-.01em}
.work p{margin:0; color:var(--ink-2); font-size:.96rem}
.work p + p{margin-top:.4rem; color:var(--muted); font-size:.9rem}

/* ── ติดต่อ ─────────────────────────────────── */
.contact p{margin:0 0 .5rem; color:var(--ink-2); font-size:.97rem}
.mail{font-family:var(--f-m); font-size:.95rem; word-break:break-all}

a{
  color:var(--ink);
  text-decoration-color:var(--brand);
  text-decoration-thickness:1.5px;
  text-underline-offset:4px;
}
a:hover{color:var(--brand)}
a:focus-visible{outline:2px solid var(--brand); outline-offset:3px; border-radius:2px}

/* ── ท้ายเว็บ ───────────────────────────────── */
.foot-brand{display:inline-flex; align-items:center; gap:.55rem}
.foot-brand .mark{width:16px}
footer{
  border-top:1px solid var(--rule); padding-top:1.4rem; margin-top:3.5rem;
  font-family:var(--f-m); font-size:.72rem; color:var(--muted);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}

/* ── หน้านโยบายความเป็นส่วนตัว ─────────────────── */
.doc h1{
  font-size:clamp(1.6rem,5vw,2.1rem); font-weight:700;
  letter-spacing:-.02em; margin:0 0 .3rem; line-height:1.15;
}
.doc .updated{
  font-family:var(--f-m); font-size:.74rem; color:var(--muted);
  margin:0 0 2.4rem;
}
.doc h2{
  font-family:var(--f-d); font-size:1.05rem; font-weight:600;
  letter-spacing:0; text-transform:none; color:var(--ink);
  margin:2.4rem 0 .6rem; padding:0; border:none;
}
.doc p, .doc li{color:var(--ink-2); font-size:.98rem}
.doc ul{padding-left:1.15rem; margin:.6rem 0}
.doc li{margin-bottom:.4rem}
.doc .back{
  display:inline-block; margin-bottom:2rem;
  font-family:var(--f-m); font-size:.78rem; text-decoration:none;
  color:var(--muted);
}
.doc .back:hover{color:var(--brand)}

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