/* vv2667.info — Thanaka bench. Sandalwood cream, thanaka paste, bark, wet slate, leaf. */
:root{
  --paper:#F6EFDF;--paper-2:#EFE4CC;--paste:#E8CF8C;--paste-2:#F2E2B4;--ring:#B9924F;
  --bark:#4B3121;--bark-d:#2B1C12;--slate:#27302C;--slate-2:#323D38;--slate-3:#3E4A44;
  --leaf:#2D5C3A;--leaf-d:#214630;--leaf-l:#9CCBA2;--clay:#AE462B;
  --ink:#231A13;--text:#342A21;--muted:#66574A;--line:#DCCDAE;--line-2:#CDBB95;
  --font-head:"Solway","Noto Serif Myanmar",Georgia,serif;
  --font-body:"Ysabeau Office","Noto Sans Myanmar",system-ui,sans-serif;
  --gut:16px;--max:1240px;--r:18px;
  /* game tokens (GameCore reads these) */
  --primary:#E8CF8C;--primary-contrast:#231A13;--accent:#9CCBA2;--surface:#1F2723;--surface-2:#303B36;
  --border:rgba(232,207,140,.2);--heading:#F6EFDF;--muted-g:#CFC3AA;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--paper);color:var(--text);font:500 17px/1.7 var(--font-body);overflow-x:hidden;text-rendering:optimizeLegibility}
:lang(my) body,body:lang(my){line-height:1.85}
img,svg{max-width:100%}
a{color:var(--leaf);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--clay)}
:focus-visible{outline:3px solid var(--clay);outline-offset:3px;border-radius:6px}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
@media (min-width:600px){:root{--gut:28px}}
@media (min-width:1100px){:root{--gut:40px}}
h1,h2,h3{font-family:var(--font-head);color:var(--ink);margin:0;font-weight:800;text-wrap:balance}
:lang(en) h1,:lang(en) h2{letter-spacing:-.015em}
:lang(my) h1,:lang(my) h2,:lang(my) h3{line-height:1.7;font-weight:700}
.w{display:inline-block;max-width:100%}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:10px;text-decoration:none;font-weight:700}
.skip:focus{top:12px;color:var(--paper)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:12px 24px;border-radius:999px;font:700 16px/1.25 var(--font-body);text-decoration:none;border:2px solid transparent;transition:transform .15s,background .2s,color .2s,border-color .2s;text-align:center}
.btn:active{transform:translateY(1px)}
.btn-leaf{background:var(--leaf);color:#FBF6EA}
.btn-leaf:hover{background:var(--leaf-d);color:#fff}
.btn-line{border-color:var(--bark);color:var(--bark);background:transparent}
.btn-line:hover{background:var(--bark);color:var(--paper)}
.btn-paste{background:var(--paste);color:var(--ink)}
.btn-paste:hover{background:var(--paste-2);color:var(--ink)}

/* ---------- header ---------- */
.hd{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hd-in{display:grid;grid-template-columns:auto 1fr auto auto;grid-template-areas:"brand . lsw tog";align-items:center;gap:10px;min-height:68px}
.brand{grid-area:brand;display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);min-height:48px}
.brand .disc{width:42px;height:42px;flex:none;transition:transform .6s cubic-bezier(.3,.7,.2,1)}
.brand:hover .disc{transform:rotate(40deg)}
.bw{display:flex;flex-direction:column;line-height:1.05}
.bw b{font:italic 800 22px/1 "Solway",Georgia,serif;letter-spacing:-.01em;color:var(--ink)}
.bw small{font:600 12.5px/1.5 var(--font-body);color:var(--muted);margin-top:3px}
:lang(en) .bw small{text-transform:uppercase;letter-spacing:.14em;font-size:11px}
.nav-toggle{grid-area:tog;display:inline-flex;align-items:center;gap:8px;min-height:48px;min-width:48px;padding:0 14px 0 12px;border-radius:999px;border:2px solid var(--bark);background:var(--paper);color:var(--bark);font:700 15px/1 var(--font-body);cursor:pointer}
.strokes{display:grid;gap:4px;width:20px}
.strokes i{display:block;height:3px;border-radius:3px;background:currentColor;transition:transform .25s,opacity .2s}
.strokes i:nth-child(2){width:78%}
.strokes i:nth-child(3){width:56%}
.nav-open .strokes i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-open .strokes i:nth-child(2){opacity:0}
.nav-open .strokes i:nth-child(3){width:100%;transform:translateY(-7px) rotate(-45deg)}
.nav-open .nav-toggle{background:var(--bark);color:var(--paper)}
.nav{grid-column:1/-1;display:none}
.nav ul{list-style:none;margin:0;padding:0}
.nav a{display:flex;align-items:center;gap:12px;min-height:48px;text-decoration:none;color:var(--ink);font-weight:600}
.nn{display:inline-grid;place-items:center;width:30px;height:30px;flex:none;border-radius:50%;background:repeating-radial-gradient(circle,var(--paste) 0 3px,var(--paste-2) 3px 5px);border:2px solid var(--bark);font:700 13px/1 var(--font-head);color:var(--bark)}
.nav a[aria-current] .nn{background:var(--bark);color:var(--paste)}
.nav-open .nav{display:block;padding:6px 0 16px;border-top:1px dashed var(--line-2);animation:drop .25s ease}
.nav-open .nav li+li{border-top:1px solid var(--line)}
@keyframes drop{from{transform:translateY(-6px)}to{transform:none}}
.lsw{grid-area:lsw;display:inline-flex;padding:3px;border-radius:999px;background:var(--paper-2);border:1px solid var(--line-2)}
.lsw a{display:inline-flex;align-items:center;min-height:42px;min-width:44px;justify-content:center;padding:0 12px;border-radius:999px;text-decoration:none;color:var(--bark);font-weight:700;font-size:14px}
.lsw a[aria-current]{background:var(--bark);color:var(--paste)}
.readbar{position:absolute;left:0;bottom:-2px;height:3px;width:100%;background:linear-gradient(90deg,var(--paste),var(--ring));transform-origin:0 50%;transform:scaleX(var(--rp,0));border-radius:0 3px 3px 0}
@media (max-width:420px){.nav-toggle .tl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.nav-toggle{padding:0;justify-content:center}.lsw a{padding:0 9px;font-size:13px}.bw b{font-size:20px}.brand .disc{width:36px;height:36px}}
@media (max-width:359px){.bw small{display:none}}
@media (min-width:980px){
  .hd-in{grid-template-columns:auto 1fr auto;grid-template-areas:"brand nav lsw";gap:24px;min-height:76px}
  .nav-toggle{display:none}
  .nav{grid-area:nav;display:block;justify-self:center}
  .nav ul{display:flex;gap:4px}
  .nav a{padding:0 14px 0 8px;border-radius:999px;font-size:15.5px;gap:9px}
  .nav a:hover{background:var(--paper-2);color:var(--ink)}
  .nav a[aria-current]{background:var(--paste-2)}
  .nn{width:26px;height:26px;font-size:12px}
}

/* ---------- hero (home) ---------- */
.hero{position:relative;overflow:hidden;padding:28px 0 44px;background:
  radial-gradient(120% 70% at 100% 0,var(--paste-2) 0,transparent 60%),var(--paper)}
.hero-rings{position:absolute;width:640px;height:640px;left:-300px;bottom:-330px;opacity:.16;pointer-events:none}
.hero-g{position:relative;display:grid;gap:30px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 16px;font-weight:700;font-size:14.5px;color:var(--bark);background:var(--paper);border:1px solid var(--line-2);border-radius:999px;padding:6px 14px}
.eyebrow .dot{width:10px;height:10px;border-radius:50%;background:var(--clay);box-shadow:0 0 0 3px color-mix(in srgb,var(--clay) 25%,transparent)}
.hero h1{font-size:clamp(2rem,5.6vw,3.6rem);line-height:1.08}
:lang(my) .hero h1{font-size:clamp(1.6rem,4.2vw,2.55rem);line-height:1.7}
.swipe{background:linear-gradient(transparent 62%,var(--paste) 62%,var(--paste) 90%,transparent 90%) no-repeat 0 0/100% 100%;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .1em}
:lang(my) .swipe{background-image:linear-gradient(transparent 70%,var(--paste) 70%,var(--paste) 92%,transparent 92%)}
.hero .lead{margin-top:18px;max-width:60ch;font-size:1.06rem;color:var(--text)}
.hero .lead p{margin:0}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0}
.chips li{font-size:14px;font-weight:600;color:var(--bark);padding:6px 14px 6px 12px;border-radius:999px;background:var(--paper-2);display:inline-flex;align-items:center;gap:8px}
.chips li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--leaf)}
/* the bench: log resting on the slab */
.bench{position:relative;padding-top:22px;container-type:inline-size;min-width:0}
.log-rest{position:absolute;top:0;right:8%;width:min(58%,300px);height:34px;border-radius:17px 8px 8px 17px;z-index:2;
  background:repeating-linear-gradient(90deg,transparent 0 9px,rgba(0,0,0,.18) 9px 11px,transparent 11px 21px,rgba(255,255,255,.07) 21px 22px),
  linear-gradient(180deg,#6A4630,var(--bark) 55%,var(--bark-d));box-shadow:0 8px 16px -8px rgba(0,0,0,.5)}
.log-rest i{position:absolute;right:-6px;top:-1px;width:36px;height:36px;border-radius:50%;background:repeating-radial-gradient(circle at 48% 50%,var(--paste) 0 2.4px,var(--ring) 2.4px 3.4px);border:3px solid var(--bark-d)}
.slab{position:relative;border-radius:28px;padding:14px;background:
  radial-gradient(90% 60% at 20% 0,rgba(255,255,255,.07),transparent 60%),
  radial-gradient(circle at 70% 80%,rgba(232,207,140,.07),transparent 40%),var(--slate);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 -10px 30px rgba(0,0,0,.25),0 30px 50px -30px rgba(43,28,18,.6);color:var(--paper)}
.slab-top{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:4px 8px 12px;font-weight:700;font-size:14px;color:var(--paste)}
.st-r{font:700 12px/1 "Solway",serif;letter-spacing:.14em;color:#CFC3AA;border:1px solid rgba(232,207,140,.3);padding:6px 10px;border-radius:999px}
@media (max-width:559px){.bench{margin-inline:calc(var(--gut)*-1 + 6px)}.slab{padding:8px;border-radius:22px}.log-rest{right:10%}}
@media (min-width:1060px){
  .hero{padding:52px 0 72px}
  .hero-g{grid-template-columns:minmax(0,5fr) minmax(0,6.2fr);gap:56px;align-items:center}
  .hero-rings{width:820px;height:820px;left:-380px;bottom:-440px}
}

/* ---------- inner page head ---------- */
.phead{position:relative;background:var(--paste);padding:22px 0 26px;overflow:hidden}
.ph-log{position:absolute;right:-130px;top:-90px;width:360px;height:360px;opacity:.5;pointer-events:none}
.ph-log circle:first-child{fill:var(--ring)}
.phead-in{position:relative}
.phead h1{font-size:clamp(1.85rem,4.8vw,3.1rem);line-height:1.12;max-width:22ch;margin-top:10px}
:lang(my) .phead h1{font-size:clamp(1.45rem,3.6vw,2.3rem);line-height:1.7;max-width:28ch}
.phead .lead{margin-top:14px;max-width:66ch;color:var(--ink)}
.phead .lead p{margin:0}
.drip{position:absolute;left:0;bottom:-39px;width:100%;height:40px;display:block}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:14.5px;font-weight:600}
.crumbs li{display:inline-flex;align-items:center}
.crumbs li+li::before{content:"";width:14px;height:2px;border-radius:2px;background:var(--bark);margin:0 8px;opacity:.6}
.crumbs a{color:var(--bark);display:inline-flex;align-items:center;min-height:44px}
.crumbs [aria-current]{color:var(--ink)}
@media (min-width:900px){.phead{padding:40px 0 48px}.ph-log{width:520px;height:520px;right:-120px;top:-140px}}

/* ---------- layout: rail + article ---------- */
.layout{display:grid;gap:26px;padding-top:36px;padding-bottom:56px}
.page-inner .layout{padding-top:56px}
.rail{min-width:0;display:flex;flex-direction:column;gap:18px}
.rings{border:1px solid var(--line-2);border-radius:var(--r);background:var(--paper-2)}
.rings summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:52px;padding:6px 14px 6px 18px;cursor:pointer;font:700 15px/1.4 var(--font-head);color:var(--bark)}
.rings summary::-webkit-details-marker{display:none}
.rings ol{list-style:none;margin:0;padding:0 8px 10px}
.rings a{display:flex;align-items:flex-start;gap:12px;padding:9px 10px;min-height:44px;border-radius:12px;text-decoration:none;color:var(--text);font-size:15px;line-height:1.5}
:lang(my) .rings a{line-height:1.7}
.rings a:hover{background:var(--paper)}
.tr{flex:none;display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--ring);font:700 12px/1 var(--font-head);color:var(--bark);background:var(--paper);transition:background .25s,color .25s}
.rings a[aria-current] .tr{background:var(--bark);color:var(--paste);border-color:var(--bark)}
.rings a[aria-current]{color:var(--ink);font-weight:700}
.lid{flex:none;width:30px;height:30px;border-radius:50%;background:var(--paper);border:2px solid var(--bark);position:relative}
.lid::before,.lid::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:var(--bark);border-radius:2px;transition:transform .2s}
.lid::after{transform:rotate(90deg)}
details[open]>summary .lid::after{transform:none}
.mini-slab{position:relative;background:var(--slate);color:#E6DCC4;border-radius:var(--r);padding:22px 20px 20px;overflow:hidden}
.mini-slab strong{display:block;font:800 1.15rem/1.35 var(--font-head);color:var(--paste)}
:lang(my) .mini-slab strong{line-height:1.7}
.mini-slab p{margin:8px 0 16px;font-size:15px}
.mini-slab .btn{width:100%}
.mini-log{position:absolute;right:-26px;top:-26px;width:90px;height:90px;border-radius:50%;background:repeating-radial-gradient(circle,var(--paste) 0 3px,var(--ring) 3px 4.5px);border:6px solid var(--bark);opacity:.35}
@media (min-width:1000px){
  .layout{grid-template-columns:290px minmax(0,1fr);gap:56px;align-items:start}
  .rail{position:sticky;top:96px;max-height:calc(100vh - 110px);overflow:auto;scrollbar-width:thin}
  .rings summary{pointer-events:none}
  .rings summary .lid{display:none}
}

/* ---------- article ---------- */
.content{min-width:0;max-width:760px;container-type:inline-size}
.content p,.content ul,.content ol{margin:0 0 1.1em}
.content li{margin:.35em 0}
.content ul{padding-left:1.2em}
.content ul li::marker{color:var(--ring)}
.content ol{padding-left:1.4em}
.content ol li::marker{font-weight:700;color:var(--bark)}
.content strong{color:var(--ink)}
.content h3{font-size:1.22rem;line-height:1.35;margin:1.6em 0 .6em;color:var(--bark)}
:lang(my) .content h3{line-height:1.7;font-size:1.12rem}
.sec{padding:0 0 10px}
.sec+.sec,.faq{margin-top:34px}
.intro-rest{font-size:1.04rem}
.content h2{display:flex;align-items:flex-start;gap:14px;font-size:clamp(1.45rem,3vw,2rem);line-height:1.22;margin:0 0 18px;padding-top:26px;border-top:1px solid var(--line-2);scroll-margin-top:96px}
:lang(my) .content h2{font-size:clamp(1.22rem,2.4vw,1.55rem);line-height:1.7}
.rn{flex:none;display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;margin-top:-2px;font:800 15px/1 "Solway",var(--font-head);color:var(--bark);
  background:repeating-radial-gradient(circle,var(--paste) 0 4px,var(--paste-2) 4px 7px);border:3px solid var(--bark)}
.rn-q{background:var(--bark);color:var(--paste)}
.ht{min-width:0}
.content table{width:100%;border-collapse:collapse;font-size:15px;min-width:440px}
.tbl{overflow-x:auto;margin:0 0 1.2em;border:1px solid var(--line-2);border-radius:14px;background:#FBF7EC}
.content th,.content td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.content th{background:var(--paper-2);color:var(--bark);font-weight:700}
.content tr:last-child td{border-bottom:0}
.content blockquote{margin:1.2em 0;padding:14px 18px;border-left:4px solid var(--paste);background:var(--paper-2);border-radius:0 12px 12px 0}
.legal{max-width:720px}
/* FAQ as paste jars */
.faq-list{display:grid;gap:10px}
.faq details{border-radius:var(--r);background:#FBF7EC;border:1px solid var(--line-2);transition:background .2s}
.faq details[open]{background:var(--paper-2)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:56px;padding:12px 14px 12px 20px;cursor:pointer;font-weight:700;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq .a{padding:0 20px 8px}
/* cue */
.cue{margin-top:40px;padding:22px;border-radius:var(--r);background:var(--leaf);color:#EEF3E6;display:grid;gap:16px;align-items:center;position:relative;overflow:hidden}
.cue p{margin:0;font-weight:600;position:relative}
.cue .btn{position:relative;justify-self:start}
.cue::before{content:"";position:absolute;right:-60px;bottom:-60px;width:180px;height:180px;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 6px,rgba(255,255,255,.08) 6px 8px)}
@container (min-width:600px){.cue{grid-template-columns:1fr auto;padding:24px 28px}.cue .btn{justify-self:end}}

/* ---------- related: bark tags ---------- */
.related{padding:48px 0 60px;background:var(--paper-2);border-top:1px solid var(--line-2)}
.rel-t{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:22px}
.tags{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.tag{position:relative;display:flex;flex-direction:column;gap:6px;height:100%;padding:20px 20px 20px 36px;border-radius:14px;background:var(--paper);text-decoration:none;color:var(--text);border:1px solid var(--line-2);overflow:hidden;transition:transform .2s,box-shadow .2s}
.tag::before{content:"";position:absolute;left:0;top:0;bottom:0;width:16px;background:repeating-linear-gradient(180deg,transparent 0 7px,rgba(0,0,0,.22) 7px 9px,transparent 9px 16px),linear-gradient(90deg,#6A4630,var(--bark))}
.tag:hover{transform:translateY(-3px);box-shadow:0 14px 26px -18px rgba(43,28,18,.6);color:var(--text)}
.tag-n{font:800 13px/1 "Solway",var(--font-head);color:var(--ring)}
.tag strong{font:700 1.12rem/1.35 var(--font-head);color:var(--ink)}
:lang(my) .tag strong{line-height:1.7}
.tag-d{font-size:15px;color:var(--muted);line-height:1.55}
:lang(my) .tag-d{line-height:1.75}

/* ---------- footer ---------- */
.ft{position:relative;overflow:hidden;background:var(--bark-d);color:#D9CCB1;padding:52px 0 26px}
.ft-rings{position:absolute;right:-220px;top:-200px;width:560px;height:560px;opacity:.08;pointer-events:none}
.ft .wrap{position:relative}
.f-grid{display:grid;gap:30px}
.brand-f{color:var(--paste)}
.brand-f .bw b{color:var(--paste)}
.brand-f .bw small{color:#BFB093}
.disc{margin:16px 0 0;font-size:14.5px;line-height:1.7;max-width:52ch;color:#CDBFA2}
:lang(my) .disc{line-height:1.85}
.f-h{font:700 15px/1.5 var(--font-head);color:var(--paste);margin:0 0 8px}
:lang(en) .f-h{text-transform:uppercase;letter-spacing:.12em;font-size:12.5px}
.f-links{list-style:none;margin:0;padding:0}
.f-links a{display:inline-flex;align-items:center;min-height:44px;color:#E7DCC5;text-decoration:none}
.f-links a:hover{color:var(--paste);text-decoration:underline}
.f-bot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:34px;padding-top:20px;border-top:1px solid rgba(232,207,140,.18);font-size:14px}
.age{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--paste);color:var(--ink);font:800 15px/1 "Solway",serif}
.top{margin-left:auto;color:var(--paste);display:inline-flex;align-items:center;min-height:44px}
.top:hover{color:#fff}
@media (min-width:760px){.f-grid{grid-template-columns:1.5fr 1fr 1fr;gap:48px}}

/* ---------- 404 ---------- */
.nf{padding:60px var(--gut) 90px;text-align:left;max-width:720px}
.nf-n{font:800 clamp(5rem,20vw,9rem)/1 "Solway",serif;color:var(--paste);margin:0;-webkit-text-stroke:2px var(--bark)}
.nf h1{font-size:2rem;margin:10px 0}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:no-preference){
  .hero .swipe{background-size:0 100%;animation:swipe 1.1s .2s cubic-bezier(.3,.7,.2,1) forwards}
  .log-rest{animation:settle 1s .1s ease both}
}
@keyframes swipe{to{background-size:100% 100%}}
@keyframes settle{from{transform:translateX(18px) rotate(1.5deg)}to{transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.hd,.rail,.related,.ft,.bench{display:none}}