@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@400;450;500;600;700&display=swap');
/* The overview stays mounted beneath a single, independently scrolling reader. */
:root{--paper:#f4f1e9;--ink:#242721;--red:#b62e20;--olive:#d6d7b6;--line:#cbc9be;font-family:'IBM Plex Sans Thai',Tahoma,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}*{box-sizing:border-box}body{margin:0}a{color:inherit}button{font:inherit}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #2358cd;outline-offset:5px}a{text-decoration:none}[hidden]{display:none!important}.masthead,main,footer{max-width:1320px;margin:auto}.masthead{padding:28px 40px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.brand{display:flex;gap:12px;align-items:center;font-size:1.375rem;font-weight:600;line-height:1.3}.brand small{display:block;font-size:0.75rem;letter-spacing:2px;font-weight:500;margin-top:3px}.brand-mark{display:grid;place-items:center;background:var(--red);color:white;width:44px;height:44px;font-size:2rem}.edition{text-align:right;font-size:0.875rem;line-height:1.65}.edition>span{color:#66685e}main{padding:0 40px}.intro{display:grid;grid-template-columns:1.6fr 1fr;align-items:end;gap:16px 48px;padding:52px 0 44px}.eyebrow{font-size:0.875rem;margin:0;grid-column:1/-1;color:var(--red);font-weight:600}.intro h1{font-size:clamp(1.875rem,3.5vw,3rem);line-height:1.45;letter-spacing:-1px;font-weight:500;margin:0}.intro-copy{font-size:1.0625rem;line-height:1.85;margin:0;color:#62645b}.mobile-break{display:none}.index-heading{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--ink);padding:17px 0}.index-heading h2{font-size:1rem;font-weight:500;margin:0}.index-heading>span{font-size:0.875rem;letter-spacing:2px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.tile{position:relative;padding:25px;display:flex;flex-direction:column;min-height:320px;overflow:hidden;transition:filter .2s,transform .2s}.tile:hover{filter:brightness(1.045);transform:translateY(-3px)}.tile-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.number{font-family:Arial,sans-serif;font-size:2.6875rem;font-weight:400;letter-spacing:-2px;line-height:1}.type{font-size:0.75rem}.tile-body{margin:auto 0;padding:35px 0 26px}.tile h2{font-size:clamp(1.5625rem,2.4vw,2.125rem);font-weight:500;line-height:1.48;margin:0 0 12px;letter-spacing:-.4px}.tile p{font-size:0.9375rem;line-height:1.7;margin:0}.tile-bottom{border-top:1px solid currentColor;padding-top:14px;font-size:0.875rem;display:flex;justify-content:space-between;align-items:center}.tile-bottom>span{font-family:Arial,sans-serif;font-size:1.5rem;line-height:1}.tile-one{grid-column:span 2;background:var(--red);color:#fff9ed}.tile-one h2{font-size:clamp(2.375rem,4.4vw,3.875rem);line-height:1.24}.tile-one .tile-body{padding-top:24px}.tile-one .type{font-size:0.875rem}.tile-two{background:#dedccf}.tile-three{background:var(--olive)}.tile-four{background:#293b36;color:#faf7e9}.tile-five{background:#e5bd64}.tile-six{background:#e5e1d7}.tile-seven{grid-column:span 2;grid-row:span 2;min-height:540px;color:#fff}.tile-seven img{position:absolute;width:100%;height:100%;inset:0;object-fit:cover;object-position:center 43%}.tile-seven:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.48),transparent 35%,rgba(0,0,0,.85))}.tile-seven>div,.tile-seven>span{position:relative;z-index:1}.tile-seven .tile-body{margin-top:auto;margin-bottom:0;padding-top:210px}.tile-seven h2{font-size:2.5rem}.tile-eight{grid-column:span 2;background:#bfc8c0;min-height:250px}.tile-eight .tile-body{display:flex;align-items:center;justify-content:space-between;gap:24px}.closing{display:flex;justify-content:space-between;gap:24px;padding:35px 0 50px;align-items:center}.closing>span{font-size:1.5rem}.closing p{font-size:0.9375rem;line-height:1.8;margin:0;color:#62645b}footer{border-top:1px solid var(--line);padding:26px 40px 32px;display:flex;justify-content:space-between;gap:40px;font-size:0.8125rem;line-height:1.8}footer>span{white-space:nowrap}footer p{max-width:640px;margin:0;color:#62645b;font-size:0.75rem}footer strong{font-weight:500}.detail-nav{display:flex;justify-content:space-between;align-items:center;padding:25px 0;border-bottom:1px solid var(--line);font-size:0.9375rem}.back{padding:8px 0}.detail-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:70px;padding:50px 0 60px}.detail-label{display:flex;align-items:center;gap:20px;font-size:0.875rem;color:var(--red)}.detail-label .number{font-size:5rem}.detail-title{font-size:clamp(2.1875rem,4vw,3.5rem);line-height:1.4;font-weight:500;margin:26px 0 24px;letter-spacing:-.5px}.detail-intro{font-size:1.375rem;line-height:1.8;margin:0;max-width:530px}.detail-side{border-top:5px solid var(--red);padding-top:25px}.detail-side h2{font-size:1.3125rem;font-weight:500;margin:0 0 14px}.detail-side p,.detail-side li{font-size:1.125rem;line-height:1.95}.look{padding:26px;background:var(--olive);margin:28px 0}.look .eyebrow{color:var(--ink);margin-bottom:10px}.look p{margin:0;font-size:1.25rem;line-height:1.8}.detail-figure{margin:28px 0}.detail-figure img{display:block;width:100%;max-height:560px;object-fit:contain;background:#e6e2d8}.detail-figure figcaption{font-size:0.75rem;color:#65665e;line-height:1.7;margin-top:10px}details{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0}summary{cursor:pointer;font-size:1.125rem;font-weight:500}details p{margin-bottom:0}.detail-next{display:flex;justify-content:space-between;gap:20px;align-items:center;border-top:1px solid var(--ink);padding:28px 0 40px}.next{background:var(--ink);color:var(--paper);padding:17px 24px;font-size:1rem}.detail-next>span{font-size:0.875rem;color:#62645b}.detail-note{font-size:0.75rem!important;color:#62645b}.back:hover,.brand:hover{text-decoration:underline;text-underline-offset:5px}@media(min-width:1000px){.tile-four{grid-column:1}.tile-five{grid-column:2}.tile-seven{grid-column:3 / 5;grid-row:2 / 4}.tile-six{grid-column:1;grid-row:3}.tile-eight{grid-column:2;grid-row:3}.tile-eight .tile-body{display:block}.tile-eight{min-height:320px}.tile-eight p br{display:none}}
@media(max-width:999px){.grid{grid-template-columns:repeat(2,1fr)}.tile-one{grid-column:span 2}.tile-seven{grid-row:auto;min-height:520px}.tile-one .tile-body{display:flex;align-items:center;justify-content:space-between;gap:20px}.tile-one h2{font-size:3rem}.tile h2{font-size:2rem}.detail-layout{gap:35px}.intro{grid-template-columns:1fr}.intro-copy br{display:none}.intro h1{font-size:2.5rem}.tile-seven .tile-body{padding-top:220px}.closing>span{font-size:1.3125rem}}
@media(max-width:600px){.masthead{padding:20px}.brand{font-size:1.1875rem}.brand small{font-size:0.625rem}.brand-mark{width:38px;height:38px}.edition{font-size:0.75rem}main{padding:0 18px}.intro{padding:32px 0 28px;gap:12px}.intro h1{font-size:2.125rem;letter-spacing:-.5px}.mobile-break{display:block}.intro-copy{font-size:1rem;max-width:310px}.intro-copy br{display:block}.eyebrow{font-size:0.8125rem}.index-heading{padding:15px 0}.index-heading h2{font-size:0.9375rem}.grid{gap:8px}.tile{padding:18px;min-height:282px}.tile-top{display:block}.number{font-size:2.25rem}.type{display:block;margin-top:9px;line-height:1.7;font-size:0.75rem}.tile-body{padding:23px 0}.tile h2{font-size:1.5rem;line-height:1.55;letter-spacing:-.4px}.tile p{font-size:0.875rem}.tile-bottom{font-size:0.8125rem;padding-top:12px;gap:5px}.tile-one .tile-top{display:flex;align-items:center}.tile-one .type{margin:0;font-size:0.8125rem}.tile-one .tile-body{display:block;padding-top:22px}.tile-one h2{font-size:2.75rem}.tile-one p{font-size:1rem}.tile-one{min-height:330px}.tile-seven{min-height:490px}.tile-seven .tile-top{display:flex}.tile-seven h2{font-size:2rem}.tile-eight .tile-body{display:block}.tile-eight{min-height:285px}.tile-eight h2 br{display:none}.tile-eight p br{display:none}.closing{display:block;padding:30px 0}.closing>span{font-size:1.3125rem}.closing p{margin-top:10px}footer{padding:22px 18px;display:block}footer p{margin-top:12px}.detail-nav{font-size:0.875rem;padding:14px 0}.detail-layout{display:block;padding:30px 0}.detail-label .number{font-size:4rem}.detail-title{font-size:2.3125rem;margin:22px 0 18px}.detail-intro{font-size:1.25rem}.detail-side{margin-top:30px}.detail-side p,.detail-side li{font-size:1.0625rem}.look{padding:22px}.look p{font-size:1.1875rem}.detail-next{align-items:stretch;flex-direction:column;padding:24px 0 32px}.next{display:block;text-align:center}.detail-next>span{text-align:center}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Mobile reader: a continuous surface, with persistent top and bottom controls. */
html{scrollbar-gutter:stable;-webkit-text-size-adjust:100%}
body.reader-open{position:fixed;left:0;right:0;width:100%;overflow:hidden}
a,button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{color:inherit}
.tile{min-width:0;transition:transform 180ms ease,filter 180ms ease}
.tile:hover{transform:none;filter:none}
@media(hover:hover) and (pointer:fine){.tile:hover{transform:translateY(-3px);filter:brightness(1.045)}}
.tile:active{transform:scale(.98);filter:brightness(.96)}
.tile h2,.detail-title{overflow-wrap:anywhere;letter-spacing:normal}
#detail{position:fixed;inset:0;z-index:20;width:100%;max-width:none;height:100%;height:100dvh;margin:0;padding:0;background:var(--paper);overflow:hidden;outline:none}
.reader-shell{height:100%;max-width:1100px;margin:auto;display:flex;flex-direction:column}
.reader-top{display:flex;flex-shrink:0;justify-content:space-between;align-items:center;padding:calc(8px + env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) 8px max(24px,env(safe-area-inset-left));gap:16px;background:var(--paper)}
.reader-close{min-height:48px;display:flex;gap:12px;align-items:center;font-size:1rem}
.reader-close>span{font-family:Arial,sans-serif;font-size:1.5rem}
.reader-count{font-family:Arial,sans-serif;font-size:0.875rem;white-space:nowrap;letter-spacing:2px}
.reading-progress{height:2px;flex-shrink:0;background:var(--line);overflow:hidden}
.reading-progress>span{display:block;height:100%;background:var(--red);transform:scaleX(0);transform-origin:left center}
.reader-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;touch-action:pan-y pinch-zoom;scrollbar-width:thin;outline-offset:-3px;scroll-padding-top:24px}
.reader-story{max-width:100%;min-height:100%;overflow-wrap:anywhere}
.story-heading{padding:40px 48px 36px;background:var(--section-color);color:var(--ink)}
#detail[data-section="1"] .story-heading,#detail[data-section="4"] .story-heading,#detail[data-section="7"] .story-heading{color:#fff9ed}
.story-heading .detail-label{color:inherit;font-size:0.9375rem;gap:22px}
.story-heading .number{font-size:4.125rem}
.story-heading .detail-title{font-size:clamp(2rem,4vw,3rem);line-height:1.5;margin:20px 0 16px;outline:none}
.story-heading .detail-intro{font-size:1.3125rem;max-width:800px;line-height:1.85}
.story-body{padding:36px 48px 24px;max-width:850px;margin:auto}
.story-copy h2{font-size:1.3125rem;font-weight:500;margin:0 0 12px}
.story-copy>p,.more-content p{font-size:1.125rem;line-height:1.95;margin:0}
.story-body .look{margin:28px 0}
.story-body .look h2{font-size:0.9375rem;margin-bottom:12px}
.story-body .look p{font-size:1.25rem;line-height:1.9}
.story-body .detail-figure{margin:28px 0}
.story-body .detail-figure img{height:auto;max-height:none;object-fit:contain}
.story-body .detail-figure figcaption{font-size:0.8125rem}
.more{border-block:1px solid var(--line);margin:28px 0 20px}
.more-toggle{display:flex;width:100%;border:0;background:transparent;text-align:left;align-items:center;justify-content:space-between;gap:20px;min-height:64px;padding:16px 0;font-size:1.125rem;cursor:pointer}
.more-icon{font-family:Arial,sans-serif;font-size:1.75rem;font-weight:400;transition:transform 260ms ease}
.more-toggle[aria-expanded="true"] .more-icon{transform:rotate(45deg)}
.more-content{overflow:hidden}
.more-content p{padding:0 0 24px}
.reader-pause{font-size:0.9375rem;line-height:1.8;text-align:center;margin:32px 0 10px;color:#62645b}
.reader-dock{flex-shrink:0;display:flex;align-items:stretch;gap:16px;border-top:1px solid var(--line);background:var(--paper);padding:10px max(24px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left))}
.reader-prev{display:flex;align-items:center;gap:8px;font-size:0.9375rem;min-height:52px;min-width:80px}
.dock-divider{width:1px;background:var(--line);align-self:center;height:32px;flex-shrink:0}
.reader-next{display:flex;align-items:center;justify-content:space-between;gap:16px;flex:1;min-width:0;font-size:1.0625rem;min-height:56px;padding:10px 18px;background:var(--ink);color:var(--paper)}
.reader-next>span:first-child{min-width:0}.reader-next>span:last-child{flex-shrink:0;font-size:1.5rem}
.reader-next small{display:block;font-size:0.75rem;line-height:1.6;color:#cecec1}
.reader-next>span>span{display:block;line-height:1.55;overflow-wrap:anywhere}
.reader-close:active,.reader-prev:active{opacity:.6}.reader-next:active{background:#3b4035}
@media(max-width:600px){
 .masthead{padding:calc(18px + env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) 18px max(18px,env(safe-area-inset-left))}
 main{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
 .intro{padding:28px 0 24px}.intro h1{font-size:clamp(1.8125rem,8.5vw,2.25rem);line-height:1.45}
 .tile{padding:16px;min-height:276px}.tile h2{font-size:clamp(1.3125rem,6vw,1.625rem);line-height:1.5}
 .tile p{font-size:0.9375rem;line-height:1.8}.tile-body{padding:20px 0}
 .tile-one{min-height:310px}.tile-one h2{font-size:clamp(2.375rem,11vw,2.875rem)}
 .tile-one p br{display:none}.tile-one .tile-body{padding-bottom:22px}
 .tile-seven h2{font-size:2rem}.tile-seven{min-height:450px}.tile-seven .tile-body{padding-top:190px}
 .tile-bottom{font-size:0.875rem;line-height:1.6;min-height:44px}.tile-bottom>span{align-self:center}
 .tile-six{grid-column:span 2;min-height:255px}.tile-six .tile-top{display:flex;align-items:center}.tile-six .type{margin:0}
 .tile-six h2 br{display:none}.tile-six .tile-body{padding:22px 0}.tile-eight{min-height:280px}
 .reader-top{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}
 .reader-close{font-size:0.9375rem}.reader-count{font-size:0.8125rem;letter-spacing:1px}
 .story-heading{padding:28px max(22px,env(safe-area-inset-right)) 30px max(22px,env(safe-area-inset-left))}
 .story-heading .number{font-size:3.375rem}.story-heading .detail-label{font-size:0.875rem;gap:18px}
 .story-heading .detail-title{font-size:clamp(1.8125rem,8.3vw,2.3125rem);line-height:1.5;margin:20px 0 16px}
 .story-heading .detail-intro{font-size:1.1875rem;line-height:1.85}
 .story-body{padding:28px max(22px,env(safe-area-inset-right)) 24px max(22px,env(safe-area-inset-left))}
 .story-copy h2{font-size:1.25rem}.story-copy>p,.more-content p{font-size:1.0625rem;line-height:1.95}
 .story-body .look{padding:22px;margin:26px 0}.story-body .look p{font-size:1.125rem}
 .reader-dock{gap:10px;padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
 .reader-prev{min-width:68px;font-size:0.875rem;gap:5px}.reader-next{font-size:0.9375rem;padding:9px 12px;gap:10px}
 footer{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
}
@media(max-width:350px){.brand{gap:8px}.edition{font-size:0.75rem}.brand small{letter-spacing:1px}.tile{padding:13px}.tile h2{font-size:1.3125rem}.tile-one h2{font-size:2.375rem}.tile-top .type{font-size:0.75rem}.reader-prev{min-width:58px}.reader-dock{gap:8px}.reader-next{padding:8px 10px}.story-heading,.story-body{padding-left:18px;padding-right:18px}}
@media(max-height:500px) and (orientation:landscape){.reader-top{padding-block:0}.reader-close{min-height:44px}.reader-dock{padding-top:5px;padding-bottom:calc(5px + env(safe-area-inset-bottom))}.reader-next,.reader-prev{min-height:44px}.reader-next small{display:none}}
@media(prefers-reduced-motion:reduce){.tile:active{transform:none}.more-icon{transition:none}}
