:root{
  /* Colours taken from Chin handwoven cloth */
  --madder:#8E1B23;
  --indigo:#23264A;
  --turmeric:#E0A526;
  --leaf:#2F6B3A;
  --cotton:#FFFFFF;

  /* TSD dark green */
  --bg:#0E3B24;
  --bg-2:#134B2F;
  --text:#F4F2EC;
  --text-2:#B9D2C2;
  --mark:var(--turmeric);
  --warp:rgba(244,242,236,.22);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{
  background:var(--bg);color:var(--text);
  font-family:"Familjen Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;display:flex;flex-direction:column;
}
html[lang="my"] body{font-family:"Noto Sans Myanmar","Myanmar Text","Padauk",sans-serif}

.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 clamp(16px,5vw,56px)}

/* Header */
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:16px;padding-bottom:16px;flex-wrap:wrap}
.name{display:flex;align-items:center;gap:14px;font-weight:700;font-size:1.05rem;letter-spacing:-.01em;color:var(--text);text-decoration:none;min-width:0}
.name span{font-weight:400;color:var(--text-2)}
.name:focus-visible{outline:2px solid var(--mark);outline-offset:4px;border-radius:4px}
.logo{width:80px;height:80px;flex:none;object-fit:contain;display:block}
@media (max-width:560px){.name span{display:none}.logo{width:60px;height:60px}}

.lang{display:flex;gap:4px}
.lang button{
  appearance:none;background:none;border:0;cursor:pointer;
  font:500 .95rem/1.6 "Familjen Grotesk",sans-serif;color:var(--text-2);
  min-height:44px;display:flex;align-items:center;padding:0 12px;border-bottom:2px solid transparent;
}
.lang button[data-l="my"]{font-family:"Noto Sans Myanmar",sans-serif}
.lang button:hover{color:var(--text)}
.lang button[aria-pressed="true"]{color:var(--text);border-bottom-color:var(--mark)}
.lang button:focus-visible{outline:2px solid var(--mark);outline-offset:2px;border-radius:2px}

/* The cloth */
.loom{position:relative;height:clamp(200px,40vh,400px);background:var(--bg-2)}
.loom canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* Content */
main{flex:1}
main .wrap{padding-top:clamp(36px,6vh,64px);padding-bottom:clamp(40px,7vh,72px)}
h1{
  font-weight:600;font-size:clamp(2.2rem,6vw,4.5rem);line-height:1.05;letter-spacing:-.03em;
  max-width:14ch;overflow-wrap:anywhere;
}
html[lang="my"] h1{font-size:clamp(1.8rem,4.4vw,3rem);line-height:1.5;letter-spacing:0;max-width:20ch}
.lead{font-size:clamp(1.08rem,1.6vw,1.22rem);max-width:46ch}
.work{margin-top:18px;max-width:52ch;color:var(--text-2)}
html[lang="my"] .lead,html[lang="my"] .work{line-height:2}

.text{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,5vw,72px);align-items:end}
@media (max-width:820px){.text{grid-template-columns:1fr}}

/* Footer */
footer{border-top:1px solid rgba(244,242,236,.14)}
footer .wrap{display:flex;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;padding-top:18px;padding-bottom:26px;font-size:.88rem;color:var(--text-2)}