:root{
  --bg:#f8f5ef;--bg-2:#f1ece4;--surface:rgba(255,255,255,.82);--surface-solid:#fffdfa;
  --text:#443a31;--strong:#211c17;--muted:#6f655c;--line:rgba(126,108,87,.20);
  --blue:#164bdc;--blue-soft:#eaf0ff;--warm:#9b7d5e;--warm-dark:#775c43;--warm-soft:#eee5da;
  --success:#647d62;--shadow:0 12px 30px rgba(73,59,44,.08);--hover:0 18px 42px rgba(73,59,44,.12);
  --page:1180px;--radius:18px;--small-radius:13px;--pill:999px;
}

*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--bg)}body{min-width:320px;margin:0;color:var(--text);background:radial-gradient(circle at 10% 0,rgba(255,255,255,.98),transparent 28%),linear-gradient(135deg,#fbf9f5,var(--bg-2));font-family:"Noto Sans Thai","Manrope",sans-serif;font-size:15px;line-height:1.65;overflow-x:hidden}body.menu-open,body.search-open{overflow:hidden}a{color:inherit;text-decoration:none}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}img,svg{display:block;max-width:100%}[hidden]{display:none!important}:focus-visible{outline:3px solid rgba(22,75,220,.22);outline-offset:3px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.page-shell{width:min(calc(100% - 30px),var(--page));margin-inline:auto}.skip-link{position:fixed;z-index:999;top:8px;left:8px;padding:8px 12px;border-radius:8px;color:#fff;background:var(--blue);transform:translateY(-150%)}.skip-link:focus{transform:none}
/* header */
.site-header{position:sticky;z-index:50;top:0;padding:10px 0 0}.header-card{min-height:62px;display:grid;grid-template-columns:190px 1fr auto;align-items:center;gap:22px;padding:7px 13px 7px 20px;border:1px solid rgba(255,255,255,.78);border-radius:16px;background:rgba(255,253,250,.84);box-shadow:0 8px 24px rgba(73,59,44,.07);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}.brand{width:172px}.brand img{width:100%;height:auto}.main-nav{justify-self:center;display:flex;align-items:center;gap:3px}.main-nav a{padding:8px 13px;border-radius:var(--pill);color:#61574e;font-family:"Manrope","Noto Sans Thai",sans-serif;font-size:13px;font-weight:650;transition:.18s}.main-nav a:hover,.main-nav a.is-active{color:var(--strong);background:var(--warm-soft)}.header-tools{display:flex;align-items:center;gap:7px}.icon-button,.menu-button{width:38px;height:38px;display:grid;place-items:center;padding:0;border:1px solid var(--line);border-radius:50%;color:var(--strong);background:rgba(255,255,255,.68);cursor:pointer}.icon-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.systems-button{min-height:38px;display:inline-flex;align-items:center;gap:8px;padding:0 15px;border-radius:var(--pill);color:#fff;background:linear-gradient(135deg,#aa8b67,var(--warm-dark));font-family:"Manrope","Noto Sans Thai",sans-serif;font-size:12px;font-weight:700;box-shadow:0 7px 16px rgba(119,92,67,.18)}.lang-switch{display:flex;padding:3px;border:1px solid var(--line);border-radius:var(--pill);background:rgba(255,255,255,.65)}.lang-switch button{min-width:32px;height:29px;padding:0 8px;border:0;border-radius:var(--pill);color:var(--muted);background:transparent;font-family:"Manrope",sans-serif;font-size:11px;font-weight:700;cursor:pointer}.lang-switch button.is-active{color:#fff;background:var(--blue)}.menu-button{display:none}.menu-button span{display:block;width:17px;height:1.5px;margin:3px auto;border-radius:2px;background:currentColor}
/* common */
.eyebrow{display:flex;align-items:center;gap:9px;color:var(--blue);font-family:"Manrope","Noto Sans Thai",sans-serif;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}.eyebrow:before{content:"";width:21px;height:2px;border-radius:2px;background:currentColor}.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:25px;margin-bottom:18px}.section-head h2{margin:5px 0 0;color:var(--strong);font-size:clamp(25px,3vw,36px);font-weight:500;line-height:1.25}.section-head p{max-width:560px;margin:7px 0 0;color:var(--muted);font-size:14px}.text-link{color:var(--warm-dark);font-size:12px;font-weight:700;white-space:nowrap}.button{min-height:43px;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:0 20px;border:0;border-radius:var(--pill);font-size:13px;font-weight:700;cursor:pointer;transition:transform .18s,box-shadow .18s}.button:hover{transform:translateY(-2px)}.button.primary{color:#fff;background:linear-gradient(135deg,#aa8b67,var(--warm-dark));box-shadow:0 8px 18px rgba(119,92,67,.20)}.button.secondary{border:1px solid rgba(119,92,67,.33);color:var(--warm-dark);background:rgba(255,255,255,.72)}.button.blue{color:#fff;background:linear-gradient(135deg,#2d67ef,#103bb8)}.tag{display:inline-flex;align-items:center;min-height:24px;padding:0 9px;border-radius:var(--pill);color:var(--blue);background:var(--blue-soft);font-size:10px;font-weight:800;letter-spacing:.04em}.tag.warm{color:var(--warm-dark);background:var(--warm-soft)}.tag.green{color:var(--success);background:rgba(100,125,98,.11)}
/* home hero */
.home-hero{padding:24px 0 20px}.hero-card{position:relative;min-height:425px;display:grid;grid-template-columns:minmax(430px,.9fr) minmax(500px,1.1fr);align-items:center;overflow:hidden;border:1px solid var(--line);border-radius:24px;background:var(--surface);box-shadow:var(--shadow)}.hero-image{position:absolute;inset:0 0 0 43%;background:url("/assets/images/hero-lab-background.png") center/cover no-repeat}.hero-image:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(248,245,239,.92),rgba(248,245,239,.13) 45%,rgba(248,245,239,0))}.hero-copy{position:relative;z-index:2;padding:50px 0 50px 46px}.hero-kicker{display:flex;align-items:center;gap:10px;color:#7b6b5c;font-size:13px;font-weight:600}.hero-kicker i{width:5px;height:5px;border-radius:50%;background:var(--blue)}.hero-copy h1{max-width:650px;margin:13px 0 0;color:var(--strong);font-family:"Manrope","Noto Sans Thai",sans-serif;font-size:clamp(38px,4.5vw,58px);font-weight:720;line-height:1.1;letter-spacing:-.035em}.hero-copy h1 em{color:var(--blue);font-style:normal}.hero-copy>p{max-width:570px;margin:16px 0 0;color:#6f6256;font-size:16px;line-height:1.75}.hero-actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:22px}.hero-brand{position:relative;z-index:2;align-self:center;justify-self:center;width:min(520px,80%);margin-left:90px}.hero-brand img{filter:drop-shadow(0 10px 18px rgba(26,44,94,.10))}.hero-metrics{position:absolute;z-index:3;right:30px;bottom:25px;width:min(570px,47%);display:grid;grid-template-columns:repeat(3,1fr);border:1px solid rgba(255,255,255,.7);border-radius:15px;background:rgba(255,255,255,.86);box-shadow:var(--shadow);backdrop-filter:blur(10px)}.hero-metrics article{display:grid;grid-template-columns:34px 1fr;align-items:center;gap:8px;padding:12px 14px}.hero-metrics article+article{border-left:1px solid var(--line)}.hero-metrics svg{width:30px;height:30px;fill:none;stroke:var(--warm);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.hero-metrics strong{display:block;color:var(--strong);font-family:"Manrope",sans-serif;font-size:12px}.hero-metrics span{display:block;color:var(--muted);font-size:10px}
/* system cards */
.home-section{padding:42px 0}.home-section.soft{border-block:1px solid rgba(126,108,87,.12);background:rgba(255,255,255,.28)}.systems-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.system-card{min-width:0;padding:17px;border:1px solid var(--line);border-radius:var(--radius);background:rgba(255,255,255,.75);box-shadow:0 8px 22px rgba(73,59,44,.05);transition:.2s}.system-card:hover{transform:translateY(-3px);box-shadow:var(--hover)}.system-thumb{position:relative;aspect-ratio:16/7;overflow:hidden;margin:-17px -17px 15px;border-radius:17px 17px 0 0;background:#eae3db}.system-thumb img{width:100%;height:100%;object-fit:cover}.system-thumb:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(24,21,18,.26),transparent 58%)}.system-card h3{margin:0;color:var(--strong);font-family:"Manrope","Noto Sans Thai",sans-serif;font-size:19px}.system-card p{margin:6px 0 14px;color:var(--muted);font-size:13px;line-height:1.65}.system-card footer{display:flex;align-items:center;justify-content:space-between;gap:12px}.status{display:inline-flex;align-items:center;gap:6px;color:var(--success);font-size:11px;font-weight:700}.status:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px rgba(100,125,98,.10)}
/* articles */
.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.article-card{min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:rgba(255,255,255,.78);box-shadow:0 8px 22px rgba(73,59,44,.05);transition:.2s}.article-card:hover{transform:translateY(-3px);box-shadow:var(--hover)}.article-card>a:first-child{position:relative;display:block;aspect-ratio:16/8.4;overflow:hidden;background:#e9e2d9}.article-card img{width:100%;height:100%;object-fit:cover;transition:transform .35s}.article-card:hover img{transform:scale(1.035)}.article-card .tag{position:absolute;left:11px;bottom:10px}.article-card-body{padding:15px}.article-card h3{margin:0;color:var(--strong);font-size:17px;line-height:1.45}.article-card p{margin:7px 0 0;color:var(--muted);font-size:12px;line-height:1.65}.article-meta{display:flex;flex-wrap:wrap;gap:12px;margin-top:11px;color:#91867b;font-size:10px}.filter-row{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:17px}.filter-row button{min-height:33px;padding:0 13px;border:1px solid var(--line);border-radius:var(--pill);color:var(--muted);background:rgba(255,255,255,.65);font-size:11px;font-weight:700;cursor:pointer}.filter-row button.is-active{color:#fff;border-color:var(--blue);background:var(--blue)}
/* community band */
.community-band{display:grid;grid-template-columns:330px 1fr auto;align-items:center;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:rgba(255,255,255,.72);box-shadow:var(--shadow)}.community-band-image{align-self:stretch;min-height:190px}.community-band-image img{width:100%;height:100%;object-fit:cover}.community-band-copy{padding:24px 30px}.community-band-copy h2{margin:0;color:var(--strong);font-size:26px;font-weight:550}.community-band-copy p{max-width:620px;margin:7px 0 0;color:var(--muted);font-size:13px}.community-band-actions{display:grid;gap:8px;padding:20px 25px 20px 0}
/* page hero */
.page-hero{padding:22px 0 10px}.page-hero-card{display:grid;grid-template-columns:1fr 350px;align-items:center;min-height:235px;overflow:hidden;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.72);box-shadow:var(--shadow)}.page-hero-copy{padding:35px 42px}.page-hero h1{margin:8px 0 0;color:var(--strong);font-size:clamp(34px,4vw,49px);font-weight:560;line-height:1.18}.page-hero p{max-width:700px;margin:10px 0 0;color:var(--muted);font-size:15px}.page-hero-image{align-self:stretch;min-height:235px;position:relative;overflow:hidden}.page-hero-image img{width:100%;height:100%;object-fit:cover}.page-hero-image:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,253,250,.85),transparent 40%)}
/* page sections */
.page-section{padding:34px 0}.detail-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:15px}.panel{padding:22px;border:1px solid var(--line);border-radius:var(--radius);background:rgba(255,255,255,.76);box-shadow:0 8px 22px rgba(73,59,44,.05)}.panel h2,.panel h3{margin:0;color:var(--strong)}.panel h2{font-size:25px}.panel h3{font-size:18px}.panel p{margin:8px 0 0;color:var(--muted)}.feature-list{display:grid;gap:10px;margin-top:17px}.feature-item{display:grid;grid-template-columns:37px 1fr;gap:11px;align-items:start}.feature-icon{width:37px;height:37px;display:grid;place-items:center;border-radius:11px;color:var(--blue);background:var(--blue-soft);font-weight:800}.feature-item strong{display:block;color:var(--strong);font-size:14px}.feature-item span{display:block;color:var(--muted);font-size:12px}.system-detail-list{display:grid;gap:14px}.system-detail-card{display:grid;grid-template-columns:260px 1fr auto;align-items:center;gap:22px;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:rgba(255,255,255,.78)}.system-detail-image{align-self:stretch;min-height:180px}.system-detail-image img{width:100%;height:100%;object-fit:cover}.system-detail-copy{padding:20px 0}.system-detail-copy h2{margin:0;color:var(--strong);font-size:24px}.system-detail-copy p{max-width:570px;margin:7px 0 0;color:var(--muted);font-size:13px}.system-detail-actions{display:grid;gap:8px;justify-items:stretch;padding:20px 22px 20px 0}.system-detail-actions .button{white-space:nowrap}
/* community page */
.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.value-card{padding:20px;border:1px solid var(--line);border-radius:var(--radius);background:rgba(255,255,255,.76)}.value-card .number{color:var(--blue);font-family:"Manrope",sans-serif;font-size:13px;font-weight:800}.value-card h3{margin:8px 0 0;color:var(--strong);font-size:19px}.value-card p{margin:6px 0 0;color:var(--muted);font-size:13px}.social-cta{display:grid;grid-template-columns:1fr 1fr;gap:12px}.social-card{position:relative;overflow:hidden;padding:26px;border:1px solid var(--line);border-radius:var(--radius);background:rgba(255,255,255,.76)}.social-card:after{content:"f";position:absolute;right:16px;bottom:-35px;color:rgba(22,75,220,.06);font-family:"Manrope",sans-serif;font-size:150px;font-weight:800;line-height:1}.social-card h2{position:relative;margin:0;color:var(--strong);font-size:25px}.social-card p{position:relative;max-width:500px;margin:7px 0 17px;color:var(--muted)}
/* FAQ */
.faq-list{display:grid;gap:8px}.faq-item{border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.72)}.faq-item button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 17px;border:0;color:var(--strong);background:transparent;text-align:left;font-weight:700;cursor:pointer}.faq-item button span:last-child{font-size:20px;transition:transform .2s}.faq-answer{display:none;padding:0 17px 16px;color:var(--muted);font-size:13px}.faq-item.is-open .faq-answer{display:block}.faq-item.is-open button span:last-child{transform:rotate(45deg)}
/* article detail */
.article-layout{display:grid;grid-template-columns:minmax(0,780px) 260px;justify-content:center;gap:25px}.article-main{overflow:hidden;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.82);box-shadow:var(--shadow)}.article-cover{aspect-ratio:16/7.5;overflow:hidden}.article-cover img{width:100%;height:100%;object-fit:cover}.article-header{padding:28px 35px 22px}.article-header h1{margin:9px 0 0;color:var(--strong);font-size:clamp(30px,4vw,45px);line-height:1.22;font-weight:600}.article-lead{margin:13px 0 0;color:#6e6256;font-size:16px;line-height:1.8}.article-content{padding:0 35px 34px}.article-content h2{margin:30px 0 8px;color:var(--strong);font-size:23px}.article-content h3{margin:22px 0 6px;color:var(--strong);font-size:18px}.article-content p{margin:10px 0;color:#665b51;font-size:15px;line-height:1.9}.article-content ul{margin:10px 0;padding-left:22px}.article-content li{margin:6px 0;color:#665b51}.article-note{margin:22px 0;padding:16px 18px;border-left:4px solid var(--blue);border-radius:0 12px 12px 0;background:var(--blue-soft);color:#3f4c73}.article-sidebar{display:grid;align-content:start;gap:12px}.sidebar-card{padding:17px;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.76)}.sidebar-card h3{margin:0;color:var(--strong);font-size:15px}.sidebar-card p{margin:6px 0 0;color:var(--muted);font-size:12px}.sidebar-links{display:grid;gap:7px;margin-top:11px}.sidebar-links a{padding:9px 10px;border-radius:10px;color:#665b51;background:rgba(238,229,218,.55);font-size:12px}.share-row{display:flex;gap:8px;margin-top:12px}.share-row button,.share-row a{min-height:35px;display:inline-flex;align-items:center;padding:0 12px;border:1px solid var(--line);border-radius:var(--pill);color:var(--warm-dark);background:#fff;font-size:11px;font-weight:700;cursor:pointer}
/* about */
.timeline{display:grid;gap:10px}.timeline-item{display:grid;grid-template-columns:70px 1fr;gap:15px;padding:16px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.72)}.timeline-item strong:first-child{color:var(--blue);font-family:"Manrope",sans-serif}.timeline-item h3{margin:0;color:var(--strong);font-size:17px}.timeline-item p{margin:4px 0 0;color:var(--muted);font-size:12px}
/* legal */
.legal-card{max-width:850px;margin:0 auto;padding:30px 36px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.82);box-shadow:var(--shadow)}.legal-card h1{margin:0;color:var(--strong);font-size:38px}.legal-card h2{margin:28px 0 7px;color:var(--strong);font-size:21px}.legal-card p,.legal-card li{color:#665b51;line-height:1.85}.legal-card small{color:var(--muted)}
/* footer */
.site-footer{padding:18px 0 22px}.footer-card{display:grid;grid-template-columns:1.25fr .8fr .8fr 1fr;gap:30px;padding:24px 27px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.70)}.footer-brand img{width:175px}.footer-brand p{margin:9px 0 0;color:var(--muted);font-size:12px}.footer-card h3{margin:0 0 9px;color:var(--strong);font-family:"Manrope",sans-serif;font-size:11px;letter-spacing:.04em}.footer-links{display:grid;gap:5px}.footer-links a{color:var(--muted);font-size:12px}.subscribe-form{display:grid;grid-template-columns:1fr 34px;padding:2px;border:1px solid var(--line);border-radius:var(--pill);background:#fff}.subscribe-form input{min-width:0;height:32px;padding:0 11px;border:0;outline:0;background:transparent;font-size:11px;font-weight:400}.subscribe-form button{width:32px;height:32px;border:0;border-radius:50%;color:#fff;background:var(--warm-dark);cursor:pointer}.subscribe-status{min-height:17px;margin:6px 4px 0;color:var(--blue);font-size:10px}.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:11px 4px 0;color:#93887d;font-size:10px}.footer-bottom div{display:flex;gap:14px}
/* search */
.search-panel{position:fixed;z-index:100;inset:0;display:none;place-items:start center;padding:90px 15px 20px;background:rgba(45,38,32,.34);backdrop-filter:blur(8px)}.search-panel.is-open{display:grid}.search-card{position:relative;width:min(620px,100%);padding:22px;border:1px solid rgba(255,255,255,.8);border-radius:20px;background:#fbf8f3;box-shadow:var(--hover)}.search-card h2{margin:0;color:var(--strong);font-size:24px}.search-input-wrap{display:grid;grid-template-columns:1fr auto;gap:7px;margin-top:13px}.search-input-wrap input{min-width:0;height:45px;padding:0 15px;border:1px solid var(--line);border-radius:var(--pill);outline:0;background:#fff}.search-input-wrap button{padding:0 18px;border:0;border-radius:var(--pill);color:#fff;background:var(--blue);font-weight:700}.search-close{position:absolute;top:13px;right:13px;width:34px;height:34px;border:0;border-radius:50%;color:var(--strong);background:var(--warm-soft);font-size:20px;cursor:pointer}.search-results{display:grid;gap:6px;margin-top:12px}.search-results a{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:10px 12px;border-radius:11px;background:rgba(238,229,218,.55)}.search-results strong{color:var(--strong);font-size:13px}.search-results span{color:var(--blue);font-size:10px;white-space:nowrap}.search-results p{margin:0;padding:15px;color:var(--muted);text-align:center}
/* 404 */
.not-found{min-height:70vh;display:grid;place-items:center;text-align:center}.not-found h1{margin:0;color:var(--blue);font-family:"Manrope",sans-serif;font-size:100px;line-height:1}.not-found h2{margin:10px 0 0;color:var(--strong);font-size:28px}.not-found p{color:var(--muted)}
@media(max-width:1050px){.header-card{grid-template-columns:170px 1fr auto}.brand{width:155px}.main-nav a{padding-inline:10px}.hero-card{grid-template-columns:1fr}.hero-image{inset:0 0 0 30%}.hero-copy{padding-right:40px}.hero-brand{display:none}.hero-metrics{width:min(580px,55%)}.systems-grid,.article-grid{grid-template-columns:repeat(2,1fr)}.community-band{grid-template-columns:280px 1fr}.community-band-actions{grid-column:1/-1;grid-template-columns:1fr 1fr;padding:0 24px 20px}.system-detail-card{grid-template-columns:220px 1fr}.system-detail-actions{grid-column:2;padding:0 22px 20px 0;grid-template-columns:repeat(2,minmax(0,180px));justify-content:start}.footer-card{grid-template-columns:1.2fr 1fr 1fr}.footer-card>section:last-child{grid-column:2/-1}.article-layout{grid-template-columns:minmax(0,780px)}.article-sidebar{grid-template-columns:1fr 1fr}}
@media(min-width:901px) and (max-width:1050px){.footer-card{grid-template-columns:1.25fr .8fr .8fr 1fr}.footer-card>section:last-child{grid-column:auto}}
@media(max-width:900px){.site-header{padding-top:7px}.header-card{position:relative;grid-template-columns:1fr auto auto;min-height:57px;padding:6px 10px 6px 16px}.menu-button{display:block}.main-nav{position:absolute;top:calc(100% + 7px);left:0;right:0;display:none;padding:10px;border:1px solid var(--line);border-radius:14px;background:#fbf8f3;box-shadow:var(--shadow)}.main-nav.is-open{display:grid}.main-nav a{text-align:center}.header-tools .systems-button{display:none}.hero-metrics{position:relative;right:auto;bottom:auto;width:calc(100% - 30px);margin:-76px auto 18px}.home-hero{padding-top:16px}.page-hero-card{grid-template-columns:1fr 260px}.detail-grid{grid-template-columns:1fr}.value-grid{grid-template-columns:1fr}.social-cta{grid-template-columns:1fr}}
@media(max-width:700px){body{font-size:14px}.page-shell{width:min(calc(100% - 20px),var(--page))}.header-card{grid-template-columns:1fr auto}.brand{width:145px}.header-tools{display:none}.hero-card{min-height:0}.hero-image{inset:280px 0 0}.hero-image:after{background:linear-gradient(to bottom,rgba(248,245,239,.85),rgba(248,245,239,.12))}.hero-copy{padding:40px 22px 270px;text-align:center}.hero-kicker,.hero-actions{justify-content:center}.hero-copy h1{font-size:clamp(35px,11vw,48px)}.hero-copy>p{font-size:14px}.hero-metrics{grid-template-columns:1fr;margin-top:-100px}.hero-metrics article+article{border-left:0;border-top:1px solid var(--line)}.section-head{display:block}.section-head .text-link{display:inline-flex;margin-top:10px}.systems-grid,.article-grid{grid-template-columns:1fr}.community-band{grid-template-columns:1fr}.community-band-image{min-height:190px}.community-band-copy{padding:20px}.community-band-actions{grid-column:auto;grid-template-columns:1fr;padding:0 20px 20px}.page-hero-card{grid-template-columns:1fr}.page-hero-copy{padding:30px 24px}.page-hero-image{min-height:160px}.system-detail-card{grid-template-columns:1fr}.system-detail-image{min-height:170px}.system-detail-copy{padding:0 18px}.system-detail-actions{grid-column:auto;grid-template-columns:1fr;padding:0 18px 18px}.article-main{border-radius:17px}.article-header{padding:22px 21px 16px}.article-content{padding:0 21px 25px}.article-header h1{font-size:32px}.article-sidebar{grid-template-columns:1fr}.footer-card{grid-template-columns:1fr 1fr;gap:22px}.footer-card>section:last-child{grid-column:1/-1}.footer-brand{grid-column:1/-1}.footer-bottom{flex-direction:column;text-align:center}.social-cta{grid-template-columns:1fr}.legal-card{padding:24px 21px}.timeline-item{grid-template-columns:1fr}.article-cover{aspect-ratio:16/9}}
@media(max-width:430px){.footer-card{grid-template-columns:1fr}.footer-card>section:last-child{grid-column:auto}.button{width:100%}.hero-actions{display:grid}.article-header h1{font-size:29px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important}}

/* HR-LAB principles — restrained, readable, and truthful by design. */
.principles-hero .page-hero-card{grid-template-columns:minmax(0,1fr) 310px}
.principles-manifesto{align-self:stretch;display:grid;place-content:center;gap:12px;padding:30px;color:var(--strong);background:linear-gradient(145deg,var(--blue-soft),var(--warm-soft));font-family:"Manrope",sans-serif;font-size:13px;font-weight:800;letter-spacing:.12em}
.principles-manifesto i{width:42px;height:2px;background:var(--blue)}
.principles-grid .value-card{display:flex;min-height:205px;flex-direction:column}
.principles-grid .value-card p{margin-top:auto;padding-top:8px}
.principles-commitment-section{padding-top:12px}
.principles-boundary{display:flex;flex-direction:column;justify-content:center}
.principles-boundary .button{align-self:flex-start;margin-top:20px}
.principles-main { min-height: calc(100vh - 250px); }
.principles-vision { padding-top: 28px; }
.principles-vision .page-hero-card { min-height: 360px; }
.principles-vision .page-hero-copy { padding-block: 46px; }
.principles-vision .page-hero-copy p { max-width: 760px; }
.principles-concepts { padding: 18px 0 44px; }
.principles-concept-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.principles-concept-grid article { padding: 18px 20px; border-top: 2px solid var(--blue); background: rgba(255,255,255,.46); }
.principles-concept-grid span { color: var(--blue); font: 800 10px/1.2 "Manrope",sans-serif; letter-spacing: .12em; }
.principles-concept-grid p { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
html[data-theme="dark"] .principles-concept-grid article { background: rgba(6,21,37,.72); }
@media(max-width:900px){.principles-hero .page-hero-card{grid-template-columns:1fr}.principles-manifesto{min-height:90px;grid-template-columns:auto 24px auto 24px auto;align-items:center;gap:8px;padding:18px;font-size:10px}.principles-manifesto i{width:24px}.principles-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.principles-grid .value-card{min-height:185px}}
@media(max-width:600px){.principles-grid{grid-template-columns:1fr}.principles-grid .value-card{min-height:0}.principles-manifesto{grid-template-columns:1fr;text-align:center}.principles-manifesto i{width:28px;margin:auto}.principles-boundary .button{width:100%}}
@media(max-width:760px){.principles-concept-grid{grid-template-columns:1fr}.principles-vision .page-hero-card{min-height:0}.principles-vision .page-hero-copy{padding-block:30px}}


/* COMPACT PASS FOR INTERNAL PAGES — markup and page structure unchanged. */
@media(min-width:901px){
  :root{--page:1240px}
  body{font-size:14px}
  .site-header{padding-top:7px}.header-card{min-height:57px;grid-template-columns:170px 1fr auto;gap:16px;padding:5px 10px 5px 16px}.brand{width:150px}.main-nav a{padding:6px 11px;font-size:11px}.header-tools{gap:5px}.icon-button,.menu-button{width:34px;height:34px}.systems-button{min-height:34px;padding:0 13px;font-size:10px}.lang-switch button{height:26px;min-width:29px;font-size:9px}
  .page-hero{padding:14px 0 6px}.page-hero-card{grid-template-columns:1fr 310px;min-height:195px;border-radius:18px}.page-hero-copy{padding:27px 34px}.page-hero h1{font-size:clamp(29px,3.2vw,40px)}.page-hero p{font-size:13px}.page-hero-image{min-height:195px}
  .page-section{padding:24px 0}.section-head{margin-bottom:14px}.section-head h2{font-size:clamp(22px,2.5vw,31px)}.section-head p{font-size:12px}.panel{padding:17px}.panel h2{font-size:21px}.panel h3{font-size:16px}
  .system-detail-card{grid-template-columns:225px 1fr auto;gap:17px}.system-detail-image{min-height:155px}.system-detail-copy{padding:15px 0}.system-detail-copy h2{font-size:20px}.system-detail-copy p{font-size:12px}.system-detail-actions{padding:15px 17px 15px 0}
  .article-layout{grid-template-columns:minmax(0,820px) 235px;gap:18px}.article-header{padding:22px 29px 17px}.article-header h1{font-size:clamp(27px,3.4vw,38px)}.article-lead{font-size:14px}.article-content{padding:0 29px 28px}.article-content h2{margin-top:24px;font-size:20px}.article-content h3{font-size:16px}.article-content p{font-size:14px;line-height:1.78}.article-cover{aspect-ratio:16/6.8}.sidebar-card{padding:14px}
  .value-card{padding:16px}.value-card h3{font-size:17px}.social-card{padding:21px}.social-card h2{font-size:22px}.faq-item button{padding:12px 14px}.faq-answer{padding:0 14px 13px}
  .footer-card{padding:18px 20px}.footer-bottom{padding-top:8px}
}
/* ============================================================
   UNIFIED INTERNAL UI PASS
   คัดลอกสัดส่วนและภาษาภาพจากหน้าแรก โดยไม่เปลี่ยนโครง HTML
   ============================================================ */
@media (min-width: 901px) {
  :root {
    --page: 1360px;
    --radius: 16px;
    --small-radius: 12px;
    --shadow: 0 10px 28px rgba(75,62,47,.075), 4px 4px 1px rgba(91,76,58,.055);
    --hover: 0 17px 38px rgba(75,62,47,.12), 6px 6px 2px rgba(91,76,58,.07);
  }

  body { font-size: 15px; line-height: 1.58; }
  .page-shell { width: min(calc(100% - 38px), var(--page)); }

  /* Header: same visual scale as the approved homepage. */
  .site-header { padding-top: 12px; }
  .header-card {
    min-height: 64px;
    grid-template-columns: 205px 1fr auto;
    gap: 18px;
    padding: 7px 12px 7px 20px;
    border-radius: 16px;
    background: rgba(255,255,255,.76);
    box-shadow: 0 10px 30px rgba(79,66,50,.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
  .brand { width: 178px; }
  .main-nav { gap: 4px; }
  .main-nav a {
    min-width: 72px;
    padding: 7px 13px;
    font-size: 12px;
    text-align: center;
  }
  .header-tools { gap: 7px; }
  .icon-button, .menu-button { width: 36px; height: 36px; }
  .icon-button svg { width: 19px; height: 19px; }
  .systems-button { min-height: 36px; padding: 0 17px; font-size: 11px; }
  .lang-switch button { min-width: 30px; height: 28px; font-size: 10px; }

  /* Compact page hero using the homepage width, border, shadow and rhythm. */
  .page-hero { padding: 18px 0 8px; }
  .page-hero-card {
    grid-template-columns: minmax(0, 1fr) 390px;
    min-height: 210px;
    border-radius: 18px;
    background: rgba(255,255,255,.72);
    box-shadow: var(--shadow);
  }
  .page-hero-copy { padding: 30px 38px; }
  .page-hero h1 {
    max-width: 860px;
    margin-top: 7px;
    font-size: clamp(32px, 3.25vw, 44px);
    line-height: 1.16;
    font-weight: 560;
    letter-spacing: -.022em;
  }
  .page-hero p {
    max-width: 760px;
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.7;
  }
  .page-hero-image { min-height: 210px; }

  /* Shared spacing and typography. */
  .page-section { padding: 27px 0; }
  .section-head { margin-bottom: 15px; }
  .section-head h2 { font-size: clamp(23px, 2.45vw, 33px); }
  .section-head p { max-width: 650px; font-size: 13px; }
  .eyebrow { font-size: 10px; }
  .panel { padding: 18px; border-radius: 16px; }
  .panel h2 { font-size: 22px; }
  .panel h3 { font-size: 16px; }
  .panel p { font-size: 13px; }
  .detail-grid { grid-template-columns: 1.1fr .9fr; gap: 12px; }

  /* System page. */
  .system-detail-list { gap: 11px; }
  .system-detail-card {
    grid-template-columns: 250px minmax(0,1fr) 175px;
    gap: 19px;
    min-height: 158px;
    border-radius: 16px;
    box-shadow: 0 8px 22px rgba(73,59,44,.045);
  }
  .system-detail-image { min-height: 158px; }
  .system-detail-copy { padding: 16px 0; }
  .system-detail-copy h2 { font-size: 21px; }
  .system-detail-copy p { max-width: 720px; font-size: 12px; line-height: 1.68; }
  .feature-list { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px 16px; margin-top: 13px; }
  .feature-item { grid-template-columns: 33px 1fr; gap: 9px; }
  .feature-icon { width: 33px; height: 33px; border-radius: 10px; }
  .feature-item strong { font-size: 12px; }
  .feature-item span { font-size: 10px; }
  .system-detail-actions { gap: 7px; padding: 16px 17px 16px 0; }
  .system-detail-actions .button { width: 100%; min-height: 39px; padding-inline: 15px; font-size: 11px; }

  /* Listing cards share homepage density. */
  .article-grid { gap: 11px; }
  .article-card { border-radius: 16px; }
  .article-card-body { padding: 13px 14px 14px; }
  .article-card h3 { font-size: 15px; line-height: 1.45; }
  .article-card p { font-size: 11px; line-height: 1.62; }
  .article-meta { margin-top: 9px; font-size: 9px; }
  .filter-row { margin-bottom: 14px; }
  .filter-row button { min-height: 31px; font-size: 10px; }

  /* Article reading pages use the same 1360px canvas instead of a narrow island. */
  .article-layout {
    grid-template-columns: minmax(0, 950px) 270px;
    gap: 18px;
    align-items: start;
  }
  .article-main { border-radius: 18px; }
  .article-cover { aspect-ratio: 16 / 6.4; }
  .article-header { padding: 24px 31px 18px; }
  .article-header h1 {
    max-width: 850px;
    font-size: clamp(30px, 3.1vw, 42px);
    line-height: 1.2;
  }
  .article-lead { max-width: 850px; font-size: 14px; line-height: 1.72; }
  .article-content { padding: 0 31px 30px; }
  .article-content h2 { margin-top: 25px; font-size: 21px; }
  .article-content h3 { margin-top: 19px; font-size: 16px; }
  .article-content p, .article-content li { font-size: 14px; line-height: 1.78; }
  .article-note { margin: 18px 0; padding: 14px 16px; }
  .article-sidebar { gap: 10px; }
  .sidebar-card { padding: 14px; border-radius: 13px; }
  .sidebar-links a { padding: 8px 9px; font-size: 11px; }

  /* Community and About. */
  .value-grid { gap: 11px; }
  .value-card { padding: 17px; border-radius: 16px; }
  .value-card h3 { font-size: 17px; }
  .value-card p { font-size: 12px; }
  .social-cta { gap: 11px; }
  .social-card { padding: 21px; border-radius: 16px; }
  .social-card h2 { font-size: 22px; }
  .social-card p { margin-bottom: 14px; font-size: 13px; }
  .faq-list { gap: 7px; }
  .faq-item { border-radius: 12px; }
  .faq-item button { padding: 12px 14px; font-size: 13px; }
  .faq-answer { padding: 0 14px 13px; font-size: 12px; }
  .timeline { gap: 8px; }
  .timeline-item { padding: 14px; border-radius: 12px; }
  .timeline-item h3 { font-size: 16px; }

  /* Legal pages no longer float in an unnecessarily narrow column. */
  .legal-card {
    max-width: none;
    padding: 30px 38px;
    border-radius: 18px;
  }
  .legal-card h1 { font-size: 36px; }
  .legal-card h2 { margin-top: 24px; font-size: 20px; }
  .legal-card p, .legal-card li { font-size: 14px; line-height: 1.78; }

  /* Footer matches homepage footprint. */
  .site-footer { padding: 15px 0 20px; }
  .footer-card { gap: 24px; padding: 19px 21px; border-radius: 15px; }
  .footer-brand img { width: 150px; }
  .footer-brand p { font-size: 11px; }
  .footer-card h3 { font-size: 10px; }
  .footer-links a { font-size: 10px; }
  .subscribe-form input { height: 32px; font-size: 11px; }
  .subscribe-form button { width: 32px; height: 32px; }
  .footer-bottom { padding-top: 9px; font-size: 9px; }
}

/* Keep the unified proportions on medium and small screens. */
@media (max-width: 900px) {
  .page-hero { padding-top: 14px; }
  .page-hero-card { grid-template-columns: minmax(0,1fr) 260px; min-height: 190px; }
  .page-hero-copy { padding: 27px 29px; }
  .page-hero-image { min-height: 190px; }
  .system-detail-card { grid-template-columns: 220px minmax(0,1fr); }
  .system-detail-actions { grid-column: 2; grid-template-columns: repeat(2,minmax(0,170px)); padding: 0 18px 16px 0; }
}

@media (max-width: 700px) {
  .page-hero-card { grid-template-columns: 1fr; }
  .page-hero-copy { padding: 26px 22px; }
  .page-hero h1 { font-size: clamp(29px, 9.5vw, 39px); }
  .page-hero-image { min-height: 150px; }
  .page-section { padding: 22px 0; }
  .feature-list { grid-template-columns: 1fr; }
  .system-detail-card { grid-template-columns: 1fr; }
  .system-detail-actions { grid-column: auto; grid-template-columns: 1fr; padding: 0 18px 18px; }
  .article-layout { grid-template-columns: 1fr; }
  .article-header, .article-content { padding-left: 21px; padding-right: 21px; }
  .legal-card { padding: 24px 21px; }
}

/* Standalone system guides. */
.system-guide { margin-bottom: 18px; }
.system-guide ul { margin: 8px 0 0; padding-left: 20px; }
.system-guide .hero-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
@media (max-width: 700px) {
  .system-guide { padding: 19px 17px; }
  .system-guide h2 { margin-top: 17px; font-size: 17px; }
  .system-guide p,.system-guide li { font-size: 12px; line-height: 1.65; }
  .system-guide .hero-actions { display: grid; grid-template-columns: 1fr; }
  .system-guide .button { width: 100%; min-height: 39px; }
}

/* Perspectives knowledge roadmap. */
.perspectives-hero .page-hero-card {
  grid-template-columns: minmax(0,1fr) 390px;
  background:
    radial-gradient(circle at 73% 18%,rgba(22,75,220,.10),transparent 27%),
    rgba(255,255,255,.76);
}
.perspectives-hero .page-hero-copy { padding-right: 34px; }
.perspectives-hero .page-hero-copy p { max-width: 760px; }
.perspectives-hero-visual {
  align-self: stretch;
  min-height: 235px;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  align-content: center;
  gap: 12px;
  padding: 30px 34px;
  color: #fff;
  background:
    linear-gradient(135deg,rgba(12,38,118,.94),rgba(22,75,220,.90)),
    radial-gradient(circle at 90% 10%,rgba(255,255,255,.22),transparent 33%);
}
.perspectives-hero-visual div {
  min-width: 0;
  padding: 15px 14px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 15px;
  background: rgba(255,255,255,.08);
}
.perspectives-hero-visual strong {
  display: block;
  color: #fff;
  font-family: "Manrope",sans-serif;
  font-size: 44px;
  line-height: 1;
}
.perspectives-hero-visual span {
  display: block;
  margin-top: 8px;
  color: rgba(255,255,255,.72);
  font-family: "Manrope",sans-serif;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .09em;
}
.perspectives-hero-visual small {
  grid-column: 1/-1;
  justify-self: start;
  padding: 5px 10px;
  border-radius: 999px;
  color: #11265e;
  background: #fff;
  font-family: "Manrope",sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
}
.perspectives-section { padding-top: 22px; }
.perspectives-notice {
  display: grid;
  grid-template-columns: minmax(260px,.64fr) minmax(0,1.36fr);
  align-items: center;
  gap: 28px;
  padding: 22px 25px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.74);
  box-shadow: 0 9px 26px rgba(73,59,44,.05);
}
.perspectives-notice h2 {
  margin: 8px 0 0;
  color: var(--strong);
  font-size: 24px;
  line-height: 1.3;
}
.perspectives-notice p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.8;
}
.coming-soon-badge {
  width: max-content;
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  padding: 0 9px;
  border: 1px solid rgba(155,125,94,.25);
  border-radius: 999px;
  color: var(--warm-dark);
  background: var(--warm-soft);
  font-family: "Manrope","Noto Sans Thai",sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  white-space: nowrap;
}
.perspective-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 18px;
}
.perspective-toolbar p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  text-align: right;
}
.perspective-search {
  width: min(390px,100%);
  min-height: 42px;
  display: grid;
  grid-template-columns: 19px minmax(0,1fr);
  align-items: center;
  gap: 9px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255,255,255,.82);
}
.perspective-search svg {
  width: 18px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.7;
  stroke-linecap: round;
}
.perspective-search input {
  min-width: 0;
  height: 40px;
  padding: 0;
  border: 0;
  outline: 0;
  color: var(--text);
  background: transparent;
  font-size: 12px;
}
.perspective-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 14px 0 18px;
}
.perspective-filter-row button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255,255,255,.68);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}
.perspective-filter-row button b {
  flex: 0 0 auto;
  color: var(--blue);
  font-family: "Manrope",sans-serif;
  font-size: 9px;
}
.perspective-filter-row button span {
  width: auto !important;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.25;
}
.perspective-filter-row button.is-active {
  color: #fff;
  border-color: var(--blue);
  background: var(--blue);
}
.perspective-filter-row button.is-active b { color: #fff; }
.perspectives-catalog { display: grid; gap: 12px; }
.perspective-category {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(270px,.66fr) minmax(0,1.34fr);
  gap: 26px;
  padding: 23px 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.77);
  box-shadow: 0 8px 24px rgba(73,59,44,.045);
}
.perspective-category-head {
  min-width: 0;
  display: grid;
  grid-template-columns: 52px minmax(0,1fr);
  align-items: start;
  gap: 15px;
}
.perspective-category-number {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--blue);
  background: var(--blue-soft);
  font-family: "Manrope",sans-serif;
  font-size: 16px;
  font-weight: 800;
}
.perspective-category-kicker {
  color: var(--warm-dark);
  font-family: "Manrope",sans-serif;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .08em;
}
.perspective-category h2 {
  margin: 5px 0 0;
  color: var(--strong);
  font-size: 19px;
  line-height: 1.4;
}
.perspective-category-head p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.72;
}
.perspective-topic-list {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.perspective-topic-list li {
  min-width: 0;
  display: grid;
  grid-template-columns: 31px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 43px;
  padding: 7px 9px;
  border: 1px solid rgba(126,108,87,.13);
  border-radius: 11px;
  background: rgba(248,245,239,.58);
}
.perspective-topic-number {
  color: var(--blue);
  font-family: "Manrope",sans-serif;
  font-size: 10px;
  font-weight: 800;
  text-align: center;
}
.perspective-topic-list strong {
  min-width: 0;
  color: var(--strong);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}
.perspectives-noscript {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--muted);
  background: var(--surface);
  text-align: center;
}
html[data-theme="dark"] .perspectives-hero .page-hero-card {
  background: radial-gradient(circle at 73% 18%,rgba(49,185,255,.14),transparent 27%),var(--surface);
}
html[data-theme="dark"] :where(.perspectives-notice,.perspective-category,.perspective-search) {
  border-color: var(--line);
  background: var(--surface);
}
html[data-theme="dark"] .perspective-topic-list li {
  border-color: var(--line);
  background: rgba(7,23,40,.64);
}
html[data-theme="dark"] .perspective-filter-row button {
  border-color: var(--line);
  color: var(--muted);
  background: rgba(7,23,40,.76);
}
html[data-theme="dark"] .perspective-filter-row button.is-active {
  color: #03101b;
  border-color: var(--blue);
  background: var(--blue);
}
html[data-theme="dark"] .perspective-filter-row button.is-active b { color: #03101b; }
html[data-theme="dark"] .coming-soon-badge {
  color: var(--warm-dark);
  border-color: rgba(226,191,134,.25);
  background: rgba(199,162,109,.12);
}

@media (max-width: 900px) {
  .perspectives-hero .page-hero-card { grid-template-columns: minmax(0,1fr) 300px; }
  .perspectives-hero-visual { min-height: 190px; padding: 24px; }
  .perspective-category { grid-template-columns: minmax(240px,.72fr) minmax(0,1.28fr); gap: 20px; }
}

@media (max-width: 700px) {
  .perspectives-hero .page-hero-card { grid-template-columns: 1fr; }
  .perspectives-hero .page-hero-copy { padding: 25px 21px 23px; }
  .perspectives-hero .page-hero-copy h1 { font-size: clamp(28px,8.5vw,37px); }
  .perspectives-hero-visual { min-height: 145px; padding: 18px 21px; }
  .perspectives-hero-visual div { padding: 10px 12px; }
  .perspectives-hero-visual strong { font-size: 34px; }
  .perspectives-hero-visual small { margin-top: -1px; }
  .perspectives-notice { grid-template-columns: 1fr; gap: 11px; padding: 18px; }
  .perspectives-notice h2 { font-size: 20px; }
  .perspective-toolbar { align-items: stretch; flex-direction: column; gap: 8px; }
  .perspective-search { width: 100%; }
  .perspective-toolbar p { text-align: left; }
  .perspective-filter-row {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 6px;
  }
  .perspective-filter-row button {
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
    padding-inline: 10px;
    text-align: left;
  }
  .perspective-filter-row button:first-child { grid-column: 1/-1; }
  .perspective-category { grid-template-columns: 1fr; gap: 16px; padding: 18px 15px; }
  .perspective-category-head { grid-template-columns: 43px minmax(0,1fr); gap: 11px; }
  .perspective-category-number { width: 43px; height: 43px; border-radius: 12px; font-size: 14px; }
  .perspective-category h2 { font-size: 17px; }
  .perspective-category-head p { font-size: 10px; }
  .perspective-topic-list li { grid-template-columns: 27px minmax(0,1fr); gap: 7px; padding: 8px 7px; }
  .perspective-topic-list strong { font-size: 11px; }
  .perspective-topic-list .coming-soon-badge { grid-column: 2; margin-top: -3px; }
}

/* Final compact treatment for the principles page on narrow screens. */
@media (max-width: 700px) {
  .principles-hero .page-hero-copy { padding: 21px 20px; }
  .principles-hero .page-hero h1 { font-size: clamp(27px,7.8vw,31px); line-height: 1.27; }
  .principles-hero .page-hero p { margin-top: 9px; font-size: 12px; line-height: 1.65; }
  .principles-hero .principles-manifesto {
    min-height: 72px;
    grid-template-columns: auto 18px auto 18px auto;
    gap: 7px;
    padding: 13px;
    font-size: 8px;
    text-align: center;
  }
  .principles-hero .principles-manifesto i { width: 18px; }
}

/* Shared readability floor for supporting copy in the production theme. */
.article-meta,.footer-bottom { color: #71675e; }

/* Compact subscription control shared by every legacy footer. */
.subscribe-form { grid-template-columns: 1fr 32px; padding: 1px; }
.subscribe-form input { height: 30px; padding-inline: 10px; font-size: 10px; font-weight: 400; }
.subscribe-form button { width: 30px; height: 30px; box-shadow: 0 5px 14px rgba(20,103,200,.16); }

/* One footer structure across the whole website, matching the homepage. */
.footer-grid-minimal {
  display: grid;
  grid-template-columns: minmax(190px,1.05fr) minmax(250px,1.45fr) minmax(180px,.9fr) minmax(210px,1.1fr);
  align-items: center;
  gap: 18px;
  padding: 15px 18px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(255,255,255,.70);
}
.footer-grid-minimal > section { min-width: 0; }
.footer-grid-minimal .footer-column { align-self: center; }
.footer-grid-minimal .footer-brand img { width: 170px; }
.footer-motto { width: 170px; margin: 5px 0 0 !important; color: var(--strong) !important; font: 650 10px/1.3 "Manrope",sans-serif; text-align: center; white-space: nowrap; }
.footer-column h3 { margin: 0 0 6px; color: var(--strong); font: 700 10px/1.3 "Manrope",sans-serif; }
.footer-links-inline,.footer-contact .contact-list { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.footer-links-inline a,.footer-contact a,.footer-contact span { color: var(--muted); font-size: 10px; white-space: nowrap; }
html[data-theme="dark"] .footer-grid-minimal { border-color: var(--line); background: rgba(6,21,37,.88); }

/* Keep numbered feature badges centered inside their frames. */
.feature-item > .feature-icon,
.system-detail-card .feature-item > .feature-icon {
  width: 33px !important;
  height: 33px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: var(--blue) !important;
  font: 800 10px/1 "Manrope",sans-serif !important;
  text-align: center !important;
}

@media(max-width:1050px) {
  .footer-grid-minimal { grid-template-columns: 1fr 1fr 1fr; }
  .footer-grid-minimal .footer-brand { grid-column: 1/-1; display: grid; justify-items: center; }
}
@media(max-width:760px) {
  .footer-grid-minimal { grid-template-columns: 1fr 1fr; gap: 13px 18px; }
  .footer-grid-minimal .footer-brand { grid-column: 1/-1; }
}
@media(max-width:480px) {
  .footer-grid-minimal { grid-template-columns: 1fr; padding: 14px 15px; text-align: center; }
  .footer-links-inline,.footer-contact .contact-list { justify-content: center; }
}

/* One public About page: vision, working principles, and community. */
.about-page :where(#principles,#community) { scroll-margin-top: 92px; }
.about-page .about-hero-copy { max-width: 880px; }
.about-page .about-hero-card { grid-template-columns: minmax(0,1fr) 390px; }
.about-page .about-intro-grid { grid-template-columns: minmax(0,1.15fr) minmax(300px,.85fr); }
.about-page .about-principle-stack { display: grid; gap: 10px; }
.about-page .about-principle-stack .feature-item {
  min-height: 76px;
  align-items: center;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255,255,255,.58);
}
.about-page .about-concept-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; }
.about-page .about-concept-card {
  min-height: 180px;
  display: flex;
  flex-direction: column;
  padding: 22px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--blue);
  border-radius: 16px;
  background: rgba(255,255,255,.70);
  box-shadow: 0 8px 22px rgba(73,59,44,.045);
}
.about-page .about-concept-card > span { color: var(--blue); font: 800 11px/1.2 "Manrope",sans-serif; letter-spacing: .11em; }
.about-page .about-concept-card h3 { margin: auto 0 0; padding-top: 28px; color: var(--strong); font-size: 21px; }
.about-page .about-concept-card p { margin: 7px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.about-page .about-community {
  display: grid;
  grid-template-columns: 360px minmax(0,1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  box-shadow: var(--shadow);
}
.about-page .about-community-media { min-height: 285px; }
.about-page .about-community-media img { width: 100%; height: 100%; object-fit: cover; }
.about-page .about-community-body { align-self: center; padding: 28px 32px; }
.about-page .about-community-body h2 { margin: 7px 0 0; color: var(--strong); font-size: clamp(25px,2.7vw,35px); line-height: 1.25; }
.about-page .about-community-body > p { max-width: 720px; margin: 9px 0 0; color: var(--muted); }
.about-page .about-community-points { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 18px; }
.about-page .about-community-points article { padding: 11px 12px; border-left: 2px solid var(--blue); background: rgba(234,240,255,.48); }
.about-page .about-community-points strong { display: block; color: var(--strong); font-size: 12px; }
.about-page .about-community-points span { color: var(--muted); font-size: 10px; }
.about-page .about-community-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
html[data-theme="dark"] .about-page :where(.about-principle-stack .feature-item,.about-concept-card,.about-community) { background: rgba(6,21,37,.78); }
html[data-theme="dark"] .about-page .about-community-points article { background: rgba(22,75,220,.14); }

@media(max-width:900px) {
  .about-page .about-hero-card { grid-template-columns: minmax(0,1fr) 280px; }
  .about-page .about-concept-grid { grid-template-columns: 1fr; }
  .about-page .about-concept-card { min-height: 0; }
  .about-page .about-concept-card h3 { padding-top: 16px; }
  .about-page .about-community { grid-template-columns: 280px minmax(0,1fr); }
  .about-page .about-community-points { grid-template-columns: 1fr; }
}
@media(max-width:700px) {
  .about-page .about-hero-card,.about-page .about-community { grid-template-columns: 1fr; }
  .about-page .about-community-media { min-height: 190px; }
  .about-page .about-community-body { padding: 23px 21px; }
  .about-page .about-community-actions { display: grid; }
}

/* Principles: a full-width vision statement and three restrained cards. */
.principles-main {
  min-height: calc(100vh - 250px);
  overflow: hidden;
}
.principles-vision {
  padding-top: 20px;
}
.principles-vision .page-hero-card {
  grid-template-columns: minmax(0,1fr);
  min-height: 300px;
  overflow: visible;
  background:
    radial-gradient(circle at 92% 12%,rgba(34,79,230,.09),transparent 31%),
    rgba(255,255,255,.74);
}
.principles-vision .principles-vision-copy {
  width: 100%;
  padding: 48px clamp(34px,4.2vw,68px);
}
.principles-vision h1 {
  max-width: none;
  font-size: clamp(34px,3.05vw,46px);
  line-height: 1.16;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.principles-vision .principles-vision-copy p {
  max-width: none;
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.75;
}
html[data-theme="dark"] .principles-vision .page-hero-card {
  background:
    radial-gradient(circle at 92% 12%,rgba(49,185,255,.13),transparent 31%),
    rgba(6,21,37,.82);
}

.principles-concepts {
  padding: 78px 0 68px;
}
.principles-concept-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: clamp(16px,1.8vw,24px);
  overflow: visible;
}
.principles-concept-grid .principle-card {
  position: relative;
  isolation: isolate;
  min-height: 260px;
  padding: 30px 28px 28px;
  border: 0;
  outline: 0;
  background: transparent;
}
.principle-card::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  border: 1px solid rgba(39,62,112,.14);
  border-radius: 22px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 14px 34px rgba(62,48,34,.10),0 2px 5px rgba(62,48,34,.05);
  transition: border-color .35s ease,box-shadow .42s ease,background .35s ease;
}
.principle-card > * {
  position: relative;
  z-index: 2;
}
.principle-card h2 {
  margin: 0;
  color: var(--blue);
  font: 800 clamp(25px,2vw,32px)/1 "Manrope",sans-serif;
  letter-spacing: -.035em;
}
.principle-card p {
  display: grid;
  gap: 11px;
  margin: 28px 0 0;
}
.principle-card p strong {
  max-width: 340px;
  color: var(--strong);
  font-size: clamp(19px,1.55vw,24px);
  font-weight: 650;
  line-height: 1.42;
  text-wrap: balance;
}
.principle-card p span {
  max-width: 330px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}
.principle-card:hover::before {
  border-color: rgba(34,79,230,.32);
  box-shadow: 0 26px 52px rgba(36,53,92,.17),0 7px 16px rgba(62,48,34,.08);
}
html[data-theme="dark"] .principle-card::before {
  border-color: rgba(148,190,226,.18);
  background: rgba(7,23,40,.93);
  box-shadow: 0 18px 38px rgba(0,0,0,.28),0 2px 6px rgba(0,0,0,.2);
}
html[data-theme="dark"] .principle-card:hover::before {
  border-color: rgba(72,181,245,.45);
  box-shadow: 0 28px 56px rgba(0,0,0,.38),0 0 34px rgba(44,148,219,.12);
}

@media (min-width: 1120px) {
  .principles-vision h1 { white-space: nowrap; }
}
@media (max-width: 900px) {
  .principles-vision .page-hero-card { grid-template-columns: 1fr; }
  .principles-concept-grid { grid-template-columns: 1fr; gap: 56px; }
  .principles-concept-grid .principle-card { min-height: 215px; }
  .principle-card p strong,.principle-card p span { max-width: 620px; }
}
@media (max-width: 700px) {
  .principles-vision { padding-top: 14px; }
  .principles-vision .page-hero-card { min-height: 0; }
  .principles-vision .principles-vision-copy { padding: 28px 22px; }
  .principles-vision h1 { font-size: clamp(28px,8vw,34px); line-height: 1.24; letter-spacing: -.025em; }
  .principles-vision p { font-size: 12px; line-height: 1.68; }
  .principles-concepts { padding: 66px 0 46px; }
  .principles-concept-grid { gap: 52px; }
  .principles-concept-grid .principle-card { min-height: 224px; padding: 26px 23px; }
  .principle-card h2 { font-size: 25px; }
  .principle-card p { margin-top: 22px; }
  .principle-card p strong { font-size: 19px; }
}
@media (prefers-reduced-motion:reduce) {
  .principle-card,.principle-card::before { transition: none!important; }
}

/* The desktop principles page is a single complete viewport, not a long document. */
@media (min-width:901px) {
  body.principles-page {
    height: 100vh;
    height: 100dvh;
    min-height: 650px;
    display: grid;
    grid-template-rows: auto minmax(0,1fr) auto;
    overflow: hidden;
  }
  .principles-page .principles-main {
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(220px,1fr) minmax(190px,.78fr);
    overflow: hidden;
  }
  .principles-page .principles-vision {
    min-height: 0;
    display: grid;
    padding: 12px 0 5px;
  }
  .principles-page .principles-vision .page-hero-card {
    height: 100%;
    min-height: 0;
  }
  .principles-page .principles-vision .principles-vision-copy {
    padding-block: clamp(26px,3.5vh,42px);
  }
  .principles-page .principles-concepts {
    min-height: 0;
    display: grid;
    padding: 10px 0 13px;
  }
  .principles-page .principles-concept-grid {
    height: 100%;
    align-items: stretch;
  }
  .principles-page .principle-card {
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(20px,2.4vh,28px) 28px;
  }
  .principles-page .principle-card p {
    margin-top: clamp(14px,2.1vh,24px);
  }
  .principles-page .site-footer {
    padding-block: 8px 10px;
  }
  .principles-page .footer-grid-minimal {
    padding-block: 10px;
  }
  .principles-page .footer-bottom {
    padding-top: 6px;
  }
}

@media (min-width:901px) and (max-height:760px) {
  .principles-page .principles-vision h1 { font-size: clamp(32px,3vw,40px); }
  .principles-page .principles-vision p { margin-top: 8px; font-size: 12px; line-height: 1.55; }
  .principles-page .principle-card h2 { font-size: 24px; }
  .principles-page .principle-card p strong { font-size: 18px; }
  .principles-page .principle-card p span { font-size: 11px; line-height: 1.5; }
}

/* Balance public-facing headings so short orphan words do not fall onto a line alone. */
main :where(h1,h2,h3) {
  word-break: normal;
  overflow-wrap: normal;
  text-wrap: balance;
}