@font-face{font-family:Charmonman;src:url('fonts/Charmonman-Regular.ttf') format('truetype');font-weight:400;font-display:swap}@font-face{font-family:Charmonman;src:url('fonts/Charmonman-Bold.ttf') format('truetype');font-weight:700;font-display:swap}@font-face{font-family:Chonburi;src:url('fonts/Chonburi-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
:root{--gold:#edcc92;--paper:#f8f2e6;--ink:#16334e}body{background:#071b2c;font-size:16px}header{height:86px;padding-inline:max(3%,calc((100vw - 1500px)/2));background:linear-gradient(110deg,#051625,#102d43);box-shadow:0 4px 22px #0003;border-bottom:1px solid #bb945b66}.brand{font-family:Chonburi,serif;font-size:27px;font-weight:400}.brand>span{font-size:62px;color:#e9c38a}nav{gap:26px}nav a{padding:28px 5px}nav a.active{background:linear-gradient(0deg,#e8bd6e15,transparent);box-shadow:0 2px #efd8a6}h1,h2,h3{font-family:Chonburi,'Noto Serif Thai',serif;font-weight:400}h2{font-size:26px}h3{font-size:20px}
.hero,.page-title{position:relative;isolation:isolate;overflow:hidden}.hero{min-height:440px;padding:48px max(5%,calc((100vw - 1400px)/2));background:linear-gradient(90deg,#061727ee 0%,#061727b8 40%,#06172708 78%),url('hero.png') right center/cover}.hero:after,.page-title:after,.story-strip:after,footer:after{content:'';position:absolute;pointer-events:none;inset:auto 0 0;height:68px;background:url('gold-waves.svg') bottom/480px 100px repeat-x;opacity:.8;z-index:-1}.hero-copy{max-width:650px;padding-left:0}.hero h1{font-size:clamp(48px,4.4vw,72px);line-height:1.55;text-shadow:0 4px 24px #0008;margin:10px 0 15px}.hero h1 span{font-family:Charmonman,serif;font-size:.56em;color:#f4e3c2}.hero-copy p{font-size:17px;line-height:1.95}.hero .eyebrow{font-size:12px}.hero .button{padding:12px 26px;box-shadow:0 3px 12px #0002}.artist-line{margin-top:20px}.page-title{min-height:245px;text-align:center;padding:40px 15% 55px;background:linear-gradient(90deg,#07192be8,#07192bb0 50%,#07192b60),url('hero.png') center 48%/cover}.page-title h1{font-size:clamp(28px,3vw,44px)}.page-title p{color:#e2e4e5}.page-title .eyebrow{letter-spacing:2px}.stats{padding:18px max(3%,calc((100vw - 1460px)/2));background:linear-gradient(120deg,#102d42,#061a2e);gap:15px}.stat{border:1px solid #a6b9c54a;background:linear-gradient(125deg,#21415955,#071c3088);box-shadow:inset 0 1px #ffffff12,0 4px 12px #0002;padding:16px 22px;gap:18px}.stat b{font:38px Georgia,serif;color:#f1d49d}.stat small{font-size:12px;color:#b8c9d8}.stat:before{content:'♫';font-size:37px;color:#e9c990}.stat:nth-child(2):before{content:'▤'}.stat:nth-child(3):before{content:'❖'}.stat:nth-child(4):before{content:'♙'}
.paper,.reading-layout{background-color:#f8f2e6;background-image:url('paper-ornament.svg'),radial-gradient(ellipse at 15% 10%,#fffef9 0,transparent 70%);background-size:460px 460px,auto;color:#16334e}.paper{padding:32px max(3%,calc((100vw - 1460px)/2))}.intro-panels{background-color:#f8f2e6!important;background-image:url('paper-ornament.svg'),linear-gradient(110deg,#fffbf1,#f1e7d5)!important;color:#16334e!important;gap:48px;padding-block:30px}.intro-panels>div+div{border-left:1px solid #ceb78a;padding-left:36px}.intro-panels h2{color:#102e49}.intro-panels p{font-size:15px}.bio-intro img{width:140px;height:176px;border:5px solid #fffcf3;outline:1px solid #d5bd92;box-shadow:0 6px 18px #172c4520}.intro-panels>div:last-child{background:linear-gradient(90deg,#faf5e9,#faf5e9b0),url('hero.png') center/cover}.story-strip{position:relative;isolation:isolate;padding:30px 4% 42px;background:radial-gradient(ellipse at center,#173d54,#071b2f);color:#eef1f1}.story-strip h2{font-size:27px}.story-strip .eyebrow{margin:0;font-size:11px}.story-strip .button{margin-top:12px}.section-head h2{margin-bottom:8px}.section-head p{font-size:13px}.song-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.song-card{min-height:83px;padding:9px;gap:10px;border-color:#d9cbb4;background:linear-gradient(115deg,#fffef9,#f8f3ea);box-shadow:0 3px 9px #18304c0b}.song-card strong{font-size:14px}.song-card .thumb{width:45px;min-width:45px;height:60px;border:1px solid #baa279}.song-card small{font-size:11px}.play-small{width:27px;height:27px;min-width:27px;background:#08263d;color:#ffedc7}.text-link{color:#8b6024}.mini-note{color:#5e7081}
.arc-grid{gap:16px}.arc-card,.character,.episode-card{border:1px solid #cdbb99;box-shadow:0 4px 14px #152f4610;background:linear-gradient(120deg,#fffdf5,#f5edde);border-radius:10px}.arc-card .scene{border:6px solid #fffaf0;border-radius:10px 10px 0 0;aspect-ratio:1.85}.arc-card>div:last-child{padding:15px 17px}.arc-card h3{font-size:19px;color:#15334e}.arc-card small,.episode-card small{color:#88642e}.episode-card{position:relative;padding:23px}.episode-card h3{font-size:18px}.episode-card:hover,.character:hover{border-color:#b58947;box-shadow:0 7px 20px #142d4920}.continuation-card{background:linear-gradient(110deg,#0a263c,#214658);color:#fff3d5;border-color:#c7a46b;box-shadow:0 5px 18px #102b4220}.continuation-card .content-type{background:#f2dfb8}.continuation-card h2{font-size:24px}.character-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}.character{padding:6px;text-align:center}.character>.portrait{border-radius:6px;outline:1px solid #ddc89f;outline-offset:2px}.character .details{padding:14px 6px}.character h3{font-size:18px;margin-bottom:5px}.character .details p{font-size:13px;line-height:1.75}.character .details .mini-note{margin-top:8px;color:#957744}.character-profile>.portrait{box-shadow:0 8px 24px #10283f30;border:6px solid #fffcf4;outline:1px solid #bea06c}.about-hero{padding:25px;background:linear-gradient(100deg,#fffdf6,#eee3cb);border:1px solid #d5bf98;border-radius:12px}.about-hero img{border:5px solid #fff9ed;box-shadow:0 4px 20px #122c4320}.timeline{margin:30px 0;padding-left:35px;border-color:#b9985f}.timeline h3{position:relative;color:#14334e}.timeline h3:before{content:'◆';position:absolute;left:-46px;color:#c09a59;background:#f8f2e6;padding:0 4px}.filters{padding:16px 0}.search,.filters select{background:#fffcf5;border-color:#d6c3a2;box-shadow:inset 0 2px 5px #15314b05}.table-wrap{box-shadow:0 5px 25px #0d2c4110}thead{background:linear-gradient(100deg,#08233a,#17425b);color:#f6e6c8}th{padding-block:17px}td{padding-block:11px}.theme{min-width:100px;text-align:center}.block{background:#fffaf0;box-shadow:0 4px 18px #19334d0a}.block-head{background:linear-gradient(100deg,#efe0c4,#fffaf0);border-color:#dac7a5}.block.title pre{font-family:Chonburi,serif}.lyrics pre{font-family:Charmonman,serif;font-size:25px;line-height:2.1}.original-heading{text-align:center}.original-heading h2{font-size:29px}.original-reader{max-width:1100px}.original-reader .original.verse-layout{background:#fffcf4;border:1px solid #dac7a7;box-shadow:0 5px 26px #5c452c0b;padding:36px 24px}.verse-table{min-width:840px}.verse-table td{font:400 25px/2.05 Charmonman,'Noto Serif Thai',serif;padding:0 22px 18px;color:#17334b}.verse-evidence{font-family:Charmonman,serif;font-size:24px;line-height:2}.source-prose{font-family:'Noto Serif Thai',serif}.attribution-note{background:#f2e7d2;border-color:#d4bf98;box-shadow:none}.article{max-width:1100px}footer{position:relative;isolation:isolate;background:linear-gradient(100deg,#092239,#061625);padding:28px 4% 38px;align-items:center}footer b{font:25px Chonburi,serif}footer:after{opacity:.35}footer span{line-height:1.8}.player{background:#061a2ff5}
@media(min-width:1700px){body{max-width:1700px;margin:auto;box-shadow:0 0 100px #0005}.hero{min-height:470px}.paper{padding-inline:50px}header{padding-inline:50px}}
@media(max-width:1150px){.song-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.stat{padding:14px;gap:12px}.stat:before{font-size:27px}.stat b{font-size:32px}.character-grid{grid-template-columns:repeat(4,minmax(0,1fr))}nav{gap:15px}.brand{font-size:24px}.hero-copy{max-width:580px}}
@media(max-width:800px){header{height:auto;padding:15px 4% 0}.brand{font-size:26px}nav{gap:16px}nav a{padding:12px 0}.hero{min-height:420px;padding:30px 6% 45px;background-position:70% center}.hero h1{font-size:49px}.hero-copy p{font-size:15px}.hero-copy{max-width:490px}.intro-panels>div+div{padding-left:0;border-left:0;border-top:1px solid #d2bd99;padding-top:22px}.song-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stat:before{font-size:28px}.character-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.page-title{padding:30px 5% 48px;min-height:215px}.page-title h1{font-size:31px}.paper{padding:26px 4%}.original-reader .original.verse-layout{padding:26px 4px}.verse-table{min-width:760px}.verse-table td{font-size:23px;padding-inline:17px}.about-hero{padding:18px}.original-heading h2{font-size:24px}}
@media(max-width:480px){.hero{background-image:linear-gradient(90deg,#061727e8,#0617279a),url('hero.png');min-height:440px}.hero h1{font-size:43px}.hero h1 span{font-size:28px}.hero .button{padding:10px 17px}.hero-copy .eyebrow{letter-spacing:1px}.brand small{font-size:9px}.stats{gap:9px}.stat{padding:12px 9px;gap:9px}.stat:before{display:none}.stat b{font-size:30px}.stat{font-size:13px}.stat small{font-size:10px}.song-grid{grid-template-columns:1fr}.song-card{min-height:80px}.song-card strong{font-size:16px}.song-card small{font-size:12px}.character-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.character h3{font-size:16px}.character .details p{font-size:12px}.story-strip h2{font-size:23px}.page-title h1{font-size:27px}.continuation-card h2{font-size:21px}.arc-card h3{font-size:17px}.bio-intro img{width:110px;height:160px}.intro-panels h2{font-size:24px}.about-hero{padding:16px}.lyrics pre{font-size:22px}.verse-evidence{font-size:22px}footer b{font-size:22px}}
/* Reference composition: centered title, flanking literary imagery, balanced verse. */
.hero{justify-content:center;min-height:420px;background-image:linear-gradient(90deg,#06172755,#061727c9 30%,#061727ba 62%,#06172708),url('hero.png');background-position:center,right center;padding:34px 23% 52px}.hero:before{content:'';position:absolute;z-index:-1;left:0;bottom:0;width:26%;height:96%;background:url('poet.png') center 15%/cover no-repeat;mask-image:linear-gradient(90deg,#000 60%,transparent);opacity:.85}.hero-copy{text-align:center;max-width:760px;padding:0}.hero h1{font-size:clamp(43px,4vw,64px);margin:6px 0;line-height:1.55}.hero h1 span{font-size:.6em}.hero-copy p{font-size:16px;margin:10px 0}.hero .artist-line{justify-content:center;margin-top:15px}.hero .eyebrow{font-size:11px}.hero .button{margin-top:8px}.hero .artist-line img{width:35px;height:35px}.hero .artist-line span{text-align:left;font-size:12px}.page-title:before{content:'';position:absolute;z-index:-1;left:0;bottom:0;width:21%;height:100%;background:url('poet.png') center 20%/cover;mask-image:linear-gradient(90deg,#000,transparent);opacity:.75}
.original-reader{width:100%;max-width:1040px;margin-inline:auto}.original-reader .original.verse-layout{width:100%;margin:22px auto;padding:32px 16px}.verse-scroll{width:100%;text-align:center}.verse-table{width:auto;min-width:0;max-width:100%;table-layout:auto;margin-inline:auto}.verse-table td{width:auto;text-align:center;white-space:nowrap;padding:0 30px 18px;font-size:25px;line-height:2.05}.verse-table td:first-child{padding-left:12px}.verse-table td:last-child{padding-right:12px}.original-heading{text-align:center}.original-heading h2{max-width:850px;margin-inline:auto}.verse-evidence{text-align:center}.lyrics pre{text-align:center}
@media(max-width:1100px){.hero{padding-inline:18%}.hero:before{width:24%;opacity:.6}.hero h1{font-size:48px}.hero-copy p{font-size:15px}.verse-table td{font-size:23px;padding-inline:19px}}
@media(max-width:800px){.hero{padding:35px 6% 50px;min-height:425px}.hero:before{opacity:.25;width:40%}.hero-copy{max-width:580px}.hero h1{font-size:45px}.page-title:before{opacity:.3;width:35%}.verse-table td{font-size:22px;padding-inline:15px}.original-reader .original.verse-layout{padding:25px 5px}}
@media(max-width:480px){.hero h1{font-size:40px}.hero-copy p{font-size:14px}.verse-table td{font-size:20px;padding-inline:12px}.verse-scroll{text-align:left}.verse-table{margin-inline:auto}.verse-table td:first-child{padding-left:8px}.verse-table td:last-child{padding-right:8px}}
/* Reference page density and panel topology. */
header{height:65px;padding-inline:2.5%}.brand{font:25px 'Noto Serif Thai',serif;font-weight:600}.brand>span{font-size:49px}.brand small{font-size:8px}nav{font-size:13px;gap:24px}nav a{padding:20px 4px}.hero{min-height:300px;padding-top:22px;padding-bottom:36px}.hero h1{font-family:'Noto Serif Thai',serif;font-size:48px;font-weight:600}.hero h1 span{font-size:31px;line-height:1.7}.hero-copy p{font-size:14px;line-height:1.65}.hero .artist-line{display:none}.hero:before{background-size:cover;background-position:center 12%}.page-title{min-height:178px;padding-block:25px 38px}.page-title h1{font-family:'Noto Serif Thai',serif;font-size:37px}.page-title .eyebrow{display:none}.page-title p{font-size:17px}.stats{padding-block:12px}.stat{padding:12px 17px}.ref-home .intro-panels{padding-block:22px;gap:30px}.ref-home .intro-panels h2{font-family:'Noto Serif Thai';font-size:26px}.ref-home .intro-panels p{font-size:14px;line-height:1.8}.ref-home .bio-intro img{height:163px;width:125px}.ref-structure{text-align:left;padding:17px 2.5% 25px}.ref-structure h2{font-size:24px;margin:0}.ref-structure>p{font-size:12px;color:#b4c7d9;margin:2px 0 12px}.ref-features{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.ref-features>a{display:flex;gap:15px;align-items:center;padding:16px 14px;background:linear-gradient(120deg,#17374e,#0a243a);border:1px solid #8197a75c;border-radius:8px;box-shadow:inset 0 1px #fff1}.ref-features>a>span{font-size:35px;color:#edce99}.ref-features strong{font-size:14px;font-weight:500;color:#fff3d8}.ref-features small{display:block;color:#b8c9d7;font-size:11px;margin-top:6px}.ref-home .song-card{min-height:54px;padding:5px 8px}.ref-home .song-card .thumb{height:38px;width:33px;min-width:33px}.ref-home .song-card small:last-child{display:none}.ref-home .song-card>a{display:flex;align-items:center;gap:10px}.ref-home .song-card strong{font-size:13px}.ref-home .song-grid{gap:7px}.ref-home .section-head{margin-bottom:15px}.ref-home .section-head h2{font-size:23px}.ref-home>.paper:last-child{padding-block:18px 25px}.ref-episodes{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;padding:24px 2%}.ref-episode-main{min-width:0}.ref-episodes .arc-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:18px}.ref-episodes .arc-card h3{font-size:17px}.ref-episodes .arc-card p{font-size:13px}.ref-episodes .arc-card>div:last-child{padding:12px}.ref-episodes .continuation-card{padding:15px 20px}.ref-episodes .continuation-card h2{font-size:19px;margin:6px 0}.ref-episodes .continuation-card p{font-size:12px;margin:4px 0}.ref-cast-rail{border-left:1px solid #dcc8a5;padding-left:15px}.ref-cast-rail h2{font-size:22px;margin-bottom:8px}.ref-person{display:flex;align-items:center;gap:12px;border:1px solid #ddcdb1;border-radius:7px;background:#fffaf1;margin:7px 0;padding:6px}.ref-person .portrait{width:65px;height:57px;flex-shrink:0;border-radius:5px}.ref-person span{flex:1}.ref-person strong{font-size:14px}.ref-person small{display:block;font-size:10px;color:#637586}.ref-person b{margin-right:8px}.ref-sea-panel{min-height:290px;border-radius:8px;background:linear-gradient(#061b2a33,#061b2aaa),url('hero.png') 67% center/cover;color:#f5e4c6;text-align:center;padding:32px 15px;margin-top:22px;border:1px solid #b99a62}.ref-sea-panel span{font:21px Charmonman,serif}.ref-sea-panel p{font:22px/2 Charmonman,serif;color:#ebedec}.ref-character-layout{padding:0;display:grid;grid-template-columns:220px minmax(0,1fr)}.ref-character-side{padding:22px 14px;background:linear-gradient(115deg,#0d2b43,#061a2c);color:#e9d1a6}.ref-character-side h3{font-size:19px}.ref-character-side button{display:flex;justify-content:space-between;width:100%;padding:17px 12px;border:0;border-bottom:1px solid #526e823d;background:none;color:#d3dfec;font-size:14px}.ref-character-side button.active{background:#17374e;border:1px solid #6a899958;border-radius:6px;color:#ffe7b7}.ref-character-main{min-width:0;padding:22px 17px}.ref-character-main .character-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.ref-character-main .character h3{font:600 17px 'Noto Serif Thai',serif}.ref-character-main .character .details p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:12px}.ref-character-main .character .mini-note{font-size:10px}.ref-character-main .character .details{padding:10px 4px}.ref-about-layout{display:grid;grid-template-columns:200px minmax(0,1fr) 230px;gap:20px;padding:22px 2%}.ref-about-layout>.article{min-width:0}.ref-about-menu,.ref-about-aside{padding:12px;border:1px solid #dbc8a7;border-radius:8px;background:#fffcf455;align-self:start}.ref-about-menu h3,.ref-about-aside h3{font-size:21px}.ref-about-menu>a,.ref-about-aside>a{display:block;padding:15px 8px;border-bottom:1px solid #ddcfb7;font-size:14px}.ref-about-layout .about-hero{grid-template-columns:190px 1fr;gap:20px;padding:14px}.ref-about-layout .about-hero img{height:240px}.ref-about-layout .about-hero h2{font-size:25px}.ref-about-layout .about-hero p{font-size:14px}.ref-about-layout .article>p{font-size:14px}.ref-about-layout .timeline{display:grid;grid-template-columns:repeat(5,1fr);gap:0 12px;border:0;padding:0}.ref-about-layout .timeline h3{grid-row:1;font-size:15px;border-top:2px solid #b49760;padding-top:17px}.ref-about-layout .timeline h3:before{left:0;top:-15px;font-size:15px}.ref-about-layout .timeline p{grid-row:2;font-size:12px;line-height:1.8}.ref-about-layout .story-steps{grid-template-columns:repeat(2,1fr)}.ref-song-cover{display:block;width:49px;height:31px;background-size:cover;border:1px solid #c2ae86;border-radius:4px}.table-wrap td{font-size:13px;padding:7px 12px}.table-wrap .song-name{font-size:15px}.table-wrap .table-sub{font-size:10px}.table-wrap th{padding:12px}.track-cell{gap:11px}.filters{padding-top:0}.table-wrap .theme{padding:2px 12px}.paper h2{font-family:'Noto Serif Thai',serif;font-weight:600}
@media(max-width:1150px){.ref-episodes{grid-template-columns:minmax(0,1fr) 235px}.ref-episodes .arc-grid{grid-template-columns:repeat(3,1fr)}.ref-character-layout{grid-template-columns:185px minmax(0,1fr)}.ref-character-main .character-grid{grid-template-columns:repeat(4,1fr)}.ref-about-layout{grid-template-columns:165px minmax(0,1fr)}.ref-about-aside{display:none}.ref-features{gap:8px}.ref-features>a{padding:11px;gap:9px}.ref-features strong{font-size:12px}.ref-features>a>span{font-size:27px}.ref-about-layout .timeline{grid-template-columns:repeat(3,1fr)}.ref-about-layout .timeline h3,.ref-about-layout .timeline p{grid-row:auto}.ref-about-layout .timeline{display:block}}
@media(max-width:800px){header{height:auto}.hero{min-height:360px}.ref-features{grid-template-columns:repeat(2,1fr)}.ref-episodes{display:block}.ref-cast-rail{display:none}.ref-episodes .arc-grid{grid-template-columns:repeat(2,1fr)}.ref-character-layout{display:block}.ref-character-side{padding:14px;display:flex;gap:7px;overflow:auto}.ref-character-side h3,.ref-character-side .ref-sea-panel{display:none}.ref-character-side button{min-width:150px;padding:11px}.ref-character-main .character-grid{grid-template-columns:repeat(3,1fr)}.ref-about-layout{display:block}.ref-about-menu{display:flex;overflow:auto;margin-bottom:18px;gap:10px}.ref-about-menu h3,.ref-about-menu .ref-sea-panel{display:none}.ref-about-menu>a{min-width:150px}.ref-about-layout .about-hero{grid-template-columns:150px 1fr}.ref-home .song-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.hero h1{font-size:40px}.hero h1 span{font-size:28px}.ref-character-main .character-grid{grid-template-columns:repeat(2,1fr)}.ref-home .song-grid{grid-template-columns:1fr}.ref-about-layout .about-hero{grid-template-columns:1fr}.ref-about-layout .about-hero img{width:160px;height:200px}.page-title h1{font-size:27px}.ref-features{grid-template-columns:1fr}.ref-home .song-card strong{font-size:15px}}
.page-title:before{background-size:auto 100%;background-repeat:no-repeat;background-position:left bottom}.hero:before{background-size:auto 100%;background-repeat:no-repeat;background-position:left bottom}.ref-character-side h3{font-family:'Noto Serif Thai',serif;font-weight:600;font-size:18px}.ref-character-main .character{align-self:start}.ref-character-main .character .details .mini-note{display:block;line-height:1.7}.ref-character-main .character .details{min-height:122px}.ref-home .intro-panels>div:last-child{border-radius:8px}