/*
Theme Name: Viva356k2 Cobalto
Version: 1.0.0
Author: viva356k2
Description: ธีมบรรณาธิการภาษาไทยของ viva356k2
Text Domain: viva356k2-cobalto
Requires at least: 6.3
Requires PHP: 7.4
License: GNU General Public License v2 or later
*/
:root {
    color-scheme: light;
    --ink: #242a34;
    --cobalt: #183c90;
    --navy: #132953;
    --clay: #a74732;
    --peach: #f4ba9a;
    --limestone: #f7f3ea;
    --paper: #fdfbf5;
    --rule: #d1c9b8;
    --muted: #555b63;
    --body: "Fahkwang","Leelawadee UI","Noto Sans Thai",Tahoma,sans-serif;
    --display: "Baskervville","STIX Two Text",Georgia,"Times New Roman",serif;
}
*,*::before,*::after {box-sizing:border-box}
body {margin:0;background:var(--limestone);color:var(--ink);font:1rem/1.65 var(--body);overflow-wrap:break-word}
h1,h2,h3,p {margin:0}
h1,h2,h3 {line-height:1.25}
a {color:inherit;text-decoration:none}
img,picture,svg {display:block}
img {max-width:100%}
button,select {font:inherit}
button,select,label[for] {cursor:pointer}
[hidden] {display:none!important}
:focus-visible {outline:3px solid #007baf;outline-offset:3px}
.frame {width:min(1440px,calc(100% - clamp(44px,7.9vw,146px)));margin-inline:auto}
.skip {position:absolute;z-index:40;top:5px;left:10px;transform:translateY(-160%);background:white;color:var(--cobalt);padding:8px 14px}
.skip:focus {transform:none}
.mast {position:relative;z-index:10;background:var(--cobalt);color:white;border-top:3px solid #9e4a38}
.mast-inner {display:flex;align-items:center;gap:clamp(18px,3.4vw,66px);min-height:62px}
.wordmark {display:inline-flex;align-items:center;gap:8px;white-space:nowrap;flex:none}
.wordmark img {width:32px;height:32px}
.wordmark span {font:700 1.65rem/.98 var(--display);letter-spacing:-.06em}
.wordmark b {font-weight:400;font-style:italic;color:#f2c5a8;letter-spacing:-.07em}
.main-menu ul,.closing ul {list-style:none;margin:0;padding:0}
.main-menu ul {display:flex;gap:clamp(14px,1.7vw,33px)}
.main-menu a,.desk-login {display:inline-flex;align-items:center;min-height:42px;color:#fffefa;font-size:.92rem;font-weight:600}
.main-menu [aria-current=page],.main-menu a:hover,.desk-login:hover {text-decoration:underline;text-underline-offset:6px}
.mast-actions {display:flex;align-items:center;gap:16px;margin-left:auto}
.nav-toggle,.main-menu .drawer-login {display:none}
.ui-icon {width:17px;height:17px;flex:none}
.action {display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;border:1px solid transparent;border-radius:3px;padding:8px 18px;font-size:.94rem;line-height:1.45;font-weight:700}
.primary-action,.ink-action {background:var(--cobalt);color:white}
.primary-action:hover,.ink-action:hover {background:var(--navy)}
.mast-actions .primary-action {background:#fff3dc;color:var(--cobalt);min-height:38px;padding:7px 15px}
.mast-actions .primary-action:hover {background:#f7ddbf}
.outline-action {border-color:#8b7766;color:#35352f;background:transparent}
.outline-action:hover {background:#eee2cd}
.hero {position:relative;isolation:isolate;overflow:hidden;background:#f2e4ce;color:var(--navy)}
.hero::before {content:"";position:absolute;z-index:-1;inset:0 64% 0 0;background:linear-gradient(135deg,#e9d1af33,transparent 54%)}
.hero::after {content:"";position:absolute;bottom:0;left:0;right:0;height:6px;background:repeating-linear-gradient(135deg,#b75f43 0 9px,#eed9bb 9px 18px,#244692 18px 27px,#eed9bb 27px 36px)}
.cover-art {position:absolute;inset:clamp(15px,1.7vw,28px) max(3.95vw,calc((100% - 1440px)/2)) 18px 47%;z-index:-1;background:var(--clay);border:3px solid #ab5841;border-radius:clamp(52px,8vw,145px) 12px 12px 12px;overflow:hidden;box-shadow:5px 5px 0 #d7bd9d}
.cover-art img {width:100%;height:100%;object-fit:cover;object-position:96% 48%}
.hero-inner {min-height:clamp(403px,33.8vw,545px);display:flex;align-items:center;padding-block:40px}
.hero-copy {width:44%;padding-block:7px}
.hero-copy h1 {font-size:clamp(1.55rem,2.35vw,3rem);color:var(--cobalt)}
.hero-brand {display:block;font:600 clamp(3.45rem,6.35vw,7.4rem)/1 var(--display);letter-spacing:-.078em;margin-left:-.05em}
.hero-brand b {font-style:italic;font-weight:500;color:var(--clay);letter-spacing:-.075em}
.hero-heading {display:block;margin:15px 0 12px;font-weight:650;letter-spacing:-.014em}
.hero-intro {max-width:32em;color:#464846;font-size:clamp(.97rem,1.08vw,1.15rem)}
.hero-actions {display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-top:20px}
.directory,.journal {padding-block:clamp(23px,2.6vw,49px)}
.section-head,.journal-heading {display:flex;align-items:center;justify-content:space-between;gap:10px 21px;margin-bottom:16px}
.section-head h2,.journal-heading h2,.lesson-copy h2 {font-size:clamp(1.45rem,2.05vw,2.38rem);font-weight:700;color:var(--cobalt)}
.text-link {display:inline-flex;align-items:center;gap:7px;min-height:36px;font-size:.91rem;font-weight:700;color:var(--cobalt)}
.text-link:hover,.member-panel a:hover {text-decoration:underline;text-underline-offset:4px}
.topic-grid {display:grid;grid-template-columns:1.07fr 1fr 1fr;grid-template-rows:repeat(2,minmax(84px,1fr));gap:11px 15px}
.topic {position:relative;display:grid;grid-template-columns:44% minmax(0,1fr);align-items:stretch;min-width:0;background:var(--paper);border:1px solid var(--rule);border-bottom:2px solid #c77755;overflow:hidden}
.topic-photo {position:relative;min-height:0;overflow:hidden;background:#d8ccbb;aspect-ratio:1.72}
.topic-photo img {width:100%;height:100%;object-fit:cover;transition:transform .25s}
.topic:hover .topic-photo img {transform:scale(1.04)}
.topic:first-child {grid-row:1/3;display:grid;grid-template-columns:1fr;grid-template-rows:minmax(100px,1fr) auto;border-bottom-color:var(--cobalt)}
.topic:first-child .topic-photo {aspect-ratio:auto}
.topic:first-child .topic-photo img {position:absolute;inset:0}
.topic-caption {min-width:0;align-self:center;padding:9px 23px 10px 13px}
.topic-caption h3 {color:var(--cobalt);font-size:clamp(1.05rem,1.5vw,1.6rem);font-weight:700}
.topic-caption p {color:var(--muted);font-size:.82rem;margin-top:3px}
.topic-arrow {position:absolute;right:10px;bottom:10px;color:var(--clay)}
.topic-arrow .ui-icon {width:15px;height:15px}
.zone-band {background:var(--cobalt);color:#fff}
.zone-section {display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(22px,7vw,105px);padding-block:clamp(24px,3.6vw,61px)}
.lesson-copy h2 {color:white}
.lesson-copy p {max-width:39em;color:#e7ebfa;margin:10px 0 4px}
.lesson-copy .text-link {color:#ffdec0}
.zone-board {margin:0;padding:0 12px 12px;min-width:0;border:1px solid #8a9dca;color:white;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.zone-board legend {padding:0 6px;color:#f7f5ef;font-size:.85rem}
.zone-board input {position:absolute;width:1px;height:1px;opacity:0}
.zone-board label {display:grid;place-items:center;min-height:38px;border:1px solid #b5bfdf;color:#fff;font-size:.95rem;font-weight:650}
.zone-board input:checked + label {background:#fff0d8;color:#19377b;border-color:#fff0d8}
.zone-board input:focus-visible + label {outline:3px solid #f1be89;outline-offset:1px}
.zone-result {display:none;grid-column:1/-1;grid-template-columns:minmax(88px,25%) 1fr;align-items:center;gap:13px;padding-top:10px}
.baton-figure {font:600 clamp(1.23rem,2.1vw,2.24rem)/1.2 var(--display);color:#fff0d8}
.zone-result strong {font-size:1.09rem}
.zone-result p {font-size:.86rem;line-height:1.45;color:#e8eef9;margin-top:3px}
#zone-1:checked ~ #result-1,#zone-2:checked ~ #result-2,#zone-3:checked ~ #result-3 {display:grid}
.journal-controls {display:flex;align-items:center;gap:8px;font-size:.9rem}
.journal-controls select {padding:6px 13px;border:1px solid #a29381;background:var(--paper);color:var(--ink);border-radius:3px;min-height:37px}
.journal-list,.read-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 31px}
.read-card {display:grid;grid-template-columns:30% minmax(0,1fr);gap:14px;min-width:0;padding:13px 0;border-top:1px solid var(--rule)}
.read-cover {display:block;overflow:hidden;aspect-ratio:1.4;background:#ded7c7}
.read-cover img {width:100%;height:100%;object-fit:cover}
.read-meta {display:flex;flex-wrap:wrap;gap:2px 10px;color:var(--muted);font-size:.79rem}
.read-meta span {color:var(--clay);font-weight:700}
.read-body h2,.read-body h3 {margin:5px 0;font-size:clamp(1.08rem,1.5vw,1.6rem);color:var(--navy)}
.read-body h2 a:hover,.read-body h3 a:hover {color:var(--clay)}
.read-body p {font-size:.9rem;line-height:1.55;color:var(--muted)}
.member-guides {display:grid;grid-template-columns:minmax(0,1.5fr) minmax(240px,.85fr);align-items:start;gap:clamp(24px,6vw,87px);border-top:2px solid var(--rule);padding-block:29px}
.feature-copy h2,.member-panel h2 {font-size:clamp(1.25rem,1.75vw,1.85rem);margin-bottom:8px;color:var(--cobalt)}
.feature-copy p {color:var(--muted);margin:.6em 0}
.feature-copy a,.prose a:not(.action) {color:var(--cobalt);text-decoration:underline;text-underline-offset:3px}
.member-panel a {display:flex;justify-content:space-between;align-items:center;gap:9px;min-height:42px;border-bottom:1px solid var(--rule)}
.closing {color:#f6f5ed;background:var(--navy);border-top:5px solid #b4654b}
.closing-grid {display:grid;grid-template-columns:1.5fr .8fr 1fr;gap:clamp(20px,5vw,82px);padding-block:34px}
.closing-brand p {max-width:30em;margin-top:13px;font-size:.9rem;color:#e1e6f0}
.closing h2 {margin-bottom:7px;color:#ffd7b4;font-size:1.04rem}
.closing li a {display:inline-flex;align-items:center;min-height:33px;font-size:.88rem}
.closing li a:hover {color:#ffd7b4}
.colophon {display:flex;justify-content:space-between;flex-wrap:wrap;gap:7px;padding-block:12px;border-top:1px solid #526485;color:#d5dcee;font-size:.8rem}
.inner-head {background:#ecdeca;border-bottom:3px solid var(--clay);padding-block:clamp(25px,4.2vw,70px)}
.crumb,.article-byline {display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;color:#4e535f;font-size:.86rem;margin-bottom:12px}
.inner-head h1 {max-width:32em;color:var(--cobalt);font-size:clamp(1.85rem,3.6vw,4rem)}
.inner-head p {margin-top:12px;max-width:55em;color:#45494f}
.reading {display:grid;grid-template-columns:minmax(0,1fr) minmax(205px,29%);align-items:start;gap:clamp(24px,4.7vw,78px);padding-block:clamp(23px,3.7vw,65px)}
.prose {min-width:0;overflow-wrap:anywhere;line-height:1.8}
.prose h2,.prose h3 {margin:1.15em 0 .45em;color:var(--navy)}
.prose h2 {font-size:clamp(1.32rem,2vw,2rem)}
.prose h3 {font-size:1.18rem}
.prose p,.prose ol,.prose ul {margin:0 0 .95em}
.prose ul,.prose ol {padding-inline-start:1.45em}
.prose>:first-child {margin-top:0}
.prose table {width:100%;table-layout:fixed;border-collapse:collapse;margin:16px 0;font-size:.95rem}
.prose th,.prose td {border:1px solid var(--rule);padding:7px 10px;text-align:start}
.prose th {background:#eadfcd}
.reading-side {border:1px solid var(--rule);background:var(--paper)}
.reading-side img {width:100%;height:auto}
.reading-side .text-link {margin:7px 12px}
.post-links {display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;border-top:1px solid var(--rule);padding-top:13px}
.archive-body,.missing {padding-block:clamp(24px,3.5vw,55px)}
.archive-intro {margin-bottom:22px}
.outbound {padding-left:15px;border-left:3px solid var(--clay);margin-bottom:22px}
.outbound p {margin:7px 0 0;color:var(--muted);font-size:.9rem}
.pagination,.missing .action {margin-top:18px}
@media(max-width:960px) {
    .mast-inner {min-height:57px;gap:9px;flex-wrap:wrap}
    .mast-actions {gap:8px}
    .desk-login {display:none}
    .main-menu {order:3;width:100%}
    .main-menu ul {flex-wrap:wrap;gap:3px 18px}
    .main-menu .drawer-login {display:inline-flex;gap:7px}
    .nav-ready .main-menu {display:none;position:absolute;inset:100% 0 auto;padding:5px 4% 12px;background:var(--cobalt);border-bottom:2px solid var(--peach)}
    .nav-ready .menu-open .main-menu {display:block}
    .nav-ready .nav-toggle {display:grid;place-content:center;gap:4px;width:39px;height:39px;border:1px solid #b2bdde;border-radius:3px;color:white;background:transparent}
    .nav-toggle span {width:17px;height:2px;background:currentColor}
    .hero-inner {min-height:335px}
    .hero-brand {font-size:clamp(3.1rem,6.8vw,4.2rem)}
    .hero-copy {width:45%}
    .hero-actions {gap:6px}
    .hero-actions .action {padding-inline:12px;font-size:.85rem}
    .topic-grid {gap:8px}
    .topic {grid-template-columns:39% minmax(0,1fr)}
    .topic-photo {aspect-ratio:auto}
    .topic-photo img {position:absolute;inset:0}
    .topic-caption {padding:7px}
    .topic-arrow {display:none}
    .read-card {grid-template-columns:minmax(0,1fr);gap:8px}
    .read-cover {aspect-ratio:1.85}
}
@media(max-width:680px) {
    .frame {width:calc(100% - 32px)}
    .wordmark img {width:29px;height:29px}
    .wordmark span {font-size:1.38rem}
    .mast-actions .action {padding:7px 11px;font-size:.81rem}
    .hero {display:flex;flex-direction:column;padding-top:11px}
    .hero::before {display:none}
    .cover-art {position:relative;z-index:0;inset:auto;width:calc(100% - 32px);height:clamp(300px,111vw,510px);margin-inline:auto;border-width:2px;border-radius:61px 5px 5px 5px;box-shadow:3px 3px 0 #d7bd9d}
    .cover-art img {object-position:50% 66%}
    .hero-inner {min-height:0;padding:16px 0 22px}
    .hero-copy {width:100%;padding:0}
    .hero-copy h1 {display:flex;align-items:baseline;flex-wrap:wrap;gap:1px 12px;font-size:clamp(1.13rem,4.4vw,1.52rem)}
    .hero-brand {margin:0;font-size:clamp(2.65rem,11.4vw,4.25rem)}
    .hero-heading {margin:0}
    .hero-intro {font-size:.91rem;line-height:1.52;margin-top:7px}
    .hero-actions {margin-top:11px;gap:7px}
    .hero-actions .action {min-height:40px;padding:7px 12px;font-size:.82rem}
    .directory,.journal {padding-block:21px 25px}
    .section-head,.journal-heading {gap:8px;margin-bottom:12px}
    .section-head h2,.journal-heading h2,.lesson-copy h2 {font-size:1.35rem}
    .section-head .text-link {font-size:.82rem}
    .topic-grid {grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto;gap:9px}
    .topic,.topic:first-child {display:flex;flex-direction:column;grid-row:auto}
    .topic:first-child {grid-column:1/-1;display:grid;grid-template-columns:1.1fr .9fr;grid-template-rows:auto}
    .topic-photo,.topic:first-child .topic-photo {aspect-ratio:1.6}
    .topic-caption {padding:8px 10px;align-self:start}
    .topic:first-child .topic-caption {align-self:center}
    .topic-caption h3 {font-size:1.05rem}
    .topic-caption p {font-size:.76rem}
    .zone-section,.member-guides,.reading {grid-template-columns:minmax(0,1fr);gap:17px}
    .zone-board {padding:0 8px 10px}
    .zone-result {grid-template-columns:74px 1fr;gap:8px}
    .journal-heading {flex-wrap:wrap}
    .journal-controls {font-size:.8rem}
    .journal-list,.read-grid {grid-template-columns:minmax(0,1fr);gap:6px}
    .read-card {grid-template-columns:30% minmax(0,1fr);gap:10px}
    .read-cover {aspect-ratio:1.15}
    .read-body p {font-size:.84rem}
    .closing-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}
    .closing-brand {grid-column:1/-1}
    .prose table {font-size:.85rem}
    .prose th,.prose td {padding:5px}
}
@media(max-width:360px) {
    .frame,.cover-art {width:calc(100% - 24px)}
    .mast-actions .action .ui-icon {display:none}
    .hero-actions .action {padding-inline:9px}
}
@media(prefers-reduced-motion:reduce) {
    *,*::before,*::after {scroll-behavior:auto!important;transition-duration:0s!important}
}