:root{
  --ink:#171717;
  --muted:#716f69;
  --paper:#f4f1ea;
  --card:#fffdf8;
  --line:#d8d0c1;
  --gold:#a17b35;
  --gold-soft:#eadcb8;
  --dark:#111111;
  --font:"Kanit","Noto Sans Thai","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:var(--paper);font-family:var(--font);line-height:1.5;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit}
a{color:inherit}
.page-shell{width:min(1440px,calc(100% - 36px));margin:0 auto}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 0 20px;border-bottom:1px solid rgba(23,23,23,.12)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--dark);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.08em}
.brand-copy{font-size:1rem;font-weight:600;letter-spacing:.12em}
.brand-copy span{display:block;margin-top:1px;color:var(--muted);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase}
.header-link,.language-link{padding:9px 15px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:.78rem;text-decoration:none;transition:.2s ease}
.header-link:hover,.language-link:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.hero{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:32px;padding:clamp(48px,8vw,104px) 0 42px}
.eyebrow{margin:0 0 13px;color:var(--gold);font-size:.76rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
h1{max-width:850px;margin:0;font-size:clamp(2.5rem,6vw,6.5rem);font-weight:600;line-height:.98;letter-spacing:-.045em}
h1 span{display:block;color:#77736b;font-size:.48em;font-weight:300;letter-spacing:-.02em;line-height:1.25}
.hero-copy{max-width:560px;margin:23px 0 0;color:var(--muted);font-size:clamp(.9rem,1.4vw,1.1rem);font-weight:300}
.hero-count{min-width:180px;padding:18px 20px;border:1px solid var(--line);border-radius:18px;background:rgba(255,253,248,.6);text-align:right}
.hero-count strong{display:block;font-size:2.8rem;line-height:1;font-weight:500}
.hero-count span{display:block;margin-top:8px;color:var(--muted);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.language-nav{display:flex;flex-wrap:wrap;gap:8px;padding:13px 0;border-bottom:1px solid rgba(23,23,23,.12)}
.language-link[aria-current="page"]{border-color:var(--dark);background:var(--dark);color:#fff}
.language-section{padding:34px 0 60px}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:20px}
.section-heading h2{margin:0;font-size:clamp(1.5rem,3vw,2.3rem);font-weight:500;line-height:1.1}
.section-heading p{margin:0;color:var(--muted);font-size:.82rem;text-align:right}
.poster-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.poster-card{margin:0;border:1px solid var(--line);border-radius:20px;background:var(--card);overflow:hidden;box-shadow:0 14px 38px rgba(75,57,28,.06)}
.poster-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 19px;border-bottom:1px solid var(--line)}
.poster-card-title{font-size:1rem;font-weight:500}
.poster-card-page{color:var(--gold);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.poster-button{display:block;width:100%;padding:0;border:0;background:#e9e8e5;cursor:zoom-in}
.poster-button:focus-visible,.language-link:focus-visible,.header-link:focus-visible,.lightbox-close:focus-visible,.lightbox-control:focus-visible,.language-card:focus-visible{outline:3px solid #4a90e2;outline-offset:3px}
.poster-image{display:block;width:100%;height:auto;aspect-ratio:4724 / 3307;object-fit:contain;transition:transform .35s ease}
.poster-button:hover .poster-image{transform:scale(1.015)}
.poster-card-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 19px;color:var(--muted);font-size:.74rem}
.zoom-hint{color:var(--gold)}
.site-footer{display:flex;justify-content:space-between;gap:20px;padding:23px 0 38px;border-top:1px solid rgba(23,23,23,.12);color:var(--muted);font-size:.72rem}
.language-directory{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;padding:10px 0 64px}
.language-card{display:flex;flex-direction:column;justify-content:space-between;min-height:190px;padding:20px;border:1px solid var(--line);border-radius:18px;background:var(--card);text-decoration:none;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.language-card:hover{border-color:var(--gold);box-shadow:0 16px 36px rgba(75,57,28,.1);transform:translateY(-4px)}
.language-card-code{color:var(--gold);font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.language-card h2{margin:36px 0 4px;font-size:1.4rem;font-weight:500;line-height:1.1}
.language-card p{margin:0;color:var(--muted);font-size:.74rem}
.language-card-arrow{align-self:flex-end;margin-top:18px;color:var(--gold);font-size:1.5rem;line-height:1}
.lightbox[hidden]{display:none}
.lightbox{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:24px;background:rgba(10,10,10,.93);backdrop-filter:blur(12px)}
.lightbox-figure{position:relative;display:grid;justify-items:center;gap:12px;width:min(1400px,100%);margin:0}
.lightbox-image{display:block;width:auto;max-width:min(92vw,1400px);height:auto;max-height:84vh;border:1px solid rgba(255,255,255,.24);box-shadow:0 24px 80px rgba(0,0,0,.4);object-fit:contain}
.lightbox-caption{margin:0;color:#fff;font-size:.8rem;text-align:center}
.lightbox-close{position:absolute;top:-12px;right:-12px;display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(255,255,255,.45);border-radius:50%;background:#fff;color:var(--ink);cursor:pointer;font-size:1.3rem;line-height:1;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.lightbox-close:hover{background:var(--gold-soft)}
.lightbox-control{position:fixed;top:50%;display:grid;place-items:center;width:46px;height:46px;border:1px solid rgba(255,255,255,.38);border-radius:50%;background:rgba(255,255,255,.09);color:#fff;cursor:pointer;font-size:1.4rem;transform:translateY(-50%);transition:.2s ease}
.lightbox-control:hover{background:#fff;color:var(--ink)}
.lightbox-control.prev{left:24px}.lightbox-control.next{right:24px}
body.is-lightbox-open{overflow:hidden}
@media (max-width:980px){.language-directory{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){
  .page-shell{width:min(100% - 28px,600px)}
  .site-header{padding-top:17px}
  .brand-copy{font-size:.88rem}
  .header-link{padding:8px 12px;font-size:.7rem}
  .hero{display:block;padding:54px 0 28px}
  h1{font-size:clamp(2.5rem,16vw,5rem)}
  .hero-count{display:flex;align-items:baseline;justify-content:space-between;margin-top:28px;padding:15px 17px}
  .hero-count strong{font-size:2.1rem}.hero-count span{margin-top:0}
  .language-nav{margin:0 -14px;padding:10px 14px;overflow-x:auto;flex-wrap:nowrap}
  .language-link{flex:0 0 auto;padding:8px 15px}
  .section-heading{align-items:start;display:block}
  .section-heading p{margin-top:8px;text-align:left}
  .poster-grid{grid-template-columns:1fr;gap:16px}
  .poster-card{border-radius:16px}
  .language-directory{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding-bottom:45px}
  .language-card{min-height:160px;padding:16px;border-radius:15px}
  .language-card h2{margin-top:26px;font-size:1.15rem}
  .lightbox{padding:14px}
  .lightbox-image{max-width:96vw;max-height:78vh}
  .lightbox-control{top:auto;bottom:22px;transform:none}
  .lightbox-control.prev{left:calc(50% - 60px)}.lightbox-control.next{right:calc(50% - 60px)}
  .lightbox-close{top:-10px;right:-5px}
  .site-footer{display:block}.site-footer span{display:block;margin-top:5px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}