/*
Theme Name: Sharkway Carbon Club
Version: 1.0.0
Author: sharkway
Description: คู่มือเกมโต๊ะ กีฬา และผลสลากภาษาไทยของ sharkway.online
Text Domain: sharkway-carbon
Requires at least: 6.3
Requires PHP: 7.4
License: GNU General Public License v2 or later
*/
:root {
    --carbon:#14181b;
    --deep:#0c1013;
    --graphite:#232b30;
    --mist:#f0f1ed;
    --white:#fffef8;
    --silver:#bfc9c9;
    --rule:#c5cbca;
    --gold:#f4c843;
    --dark-gold:#705300;
    --body:"Barlow","Leelawadee UI","Noto Sans Thai",Tahoma,Arial,sans-serif;
    --display:"Barlow Condensed","Arial Narrow","Arial Black",Arial,sans-serif;
    color-scheme:light;
}
*,*::before,*::after {box-sizing:border-box}
body {margin:0; background:var(--mist); color:var(--carbon); font:1rem/1.7 var(--body); overflow-wrap:break-word}
h1,h2,h3,p {margin:0}
h1,h2,h3 {line-height:1.27}
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 #966d00; outline-offset:3px}
.hero :focus-visible,.directory :focus-visible,.closing :focus-visible {outline-color:var(--gold)}
.frame {width:min(1400px,calc(100% - clamp(42px,7.8vw,150px))); margin-inline:auto}
.skip {position:absolute; z-index:40; top:8px; left:12px; transform:translateY(-170%); padding:8px 14px; background:var(--white); color:var(--carbon)}
.skip:focus {transform:none}
.mast {position:relative; z-index:10; background:#f5f5f1; color:var(--carbon); border-bottom:1px solid #b9c0bf}
.mast-inner {display:flex; align-items:center; min-height:69px; gap:clamp(15px,4.2vw,76px)}
.wordmark {display:inline-flex; align-items:center; gap:7px; flex:none; white-space:nowrap}
.wordmark img {width:35px; height:35px}
.wordmark span {font:italic 900 1.43rem/.95 var(--display); text-transform:uppercase; letter-spacing:-.055em}
.wordmark b {font-weight:550}
.main-menu ul,.closing ul {list-style:none; padding:0; margin:0}
.main-menu ul {display:flex; gap:clamp(14px,1.85vw,32px)}
.main-menu a,.desk-login {display:inline-flex; align-items:center; min-height:43px; font-size:.92rem; font-weight:650}
.main-menu a:hover,.desk-login:hover,.main-menu a[aria-current="page"] {text-decoration:underline; text-underline-offset:5px}
.mast-actions {display:flex; align-items:center; margin-left:auto; gap:17px}
.nav-toggle,.main-menu .drawer-login {display:none}
.ui-icon {width:18px; height:18px; flex:none}
.action {display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:10px 21px; min-height:45px; font-size:.95rem; line-height:1.35; font-weight:700; border:1px solid transparent; border-radius:4px}
.primary-action {color:#171a1b; background:var(--gold)}
.primary-action:hover {background:#ffdb68}
.mast .primary-action {min-height:40px; padding:7px 16px; background:var(--carbon); color:var(--white)}
.mast .primary-action:hover {background:#344047}
.outline-action {background:#101619b8; color:var(--white); border-color:#bbc2c3}
.outline-action:hover {background:#2d363b}
.ink-action {background:var(--carbon); color:var(--white)}
.ink-action:hover {background:#374149}
.hero {position:relative; isolation:isolate; overflow:hidden; background:var(--deep); color:var(--white); border-bottom:1px solid #535c5f}
.cover-art {position:absolute; inset:0; z-index:-2}
.cover-art img {width:100%; height:100%; object-fit:cover; object-position:66% 49%}
.hero::before {content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,#0b1013f7 0%,#0b1013dc 20%,#0b1013b8 35%,#0b10136a 49%,transparent 69%)}
.hero-inner {display:flex; align-items:center; min-height:clamp(410px,41.667vw,750px); padding-block:clamp(43px,5.8vw,88px)}
.hero-copy {width:min(49%,700px)}
.hero-copy h1 {font-size:clamp(1.8rem,2.4vw,2.8rem)}
.hero-brand {display:block; text-transform:uppercase; font:italic 900 clamp(4.3rem,6.7vw,8.15rem)/.92 var(--display); letter-spacing:-.075em}
.hero-brand b {font-weight:500; color:var(--gold)}
.hero-heading {display:block; letter-spacing:-.03em; margin:.5em 0 .28em}
.hero-intro {color:#edf0ed; font-size:clamp(.98rem,1.12vw,1.14rem); max-width:34em; text-wrap:balance}
.hero-actions {display:flex; flex-wrap:wrap; gap:10px; margin-top:21px}
.directory-band {background:var(--carbon)}
.directory {color:var(--white); padding-block:clamp(26px,2.9vw,48px)}
.section-head,.journal-heading {display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:17px}
.section-head h2,.lesson-copy h2,.journal-heading h2 {font-size:clamp(1.46rem,2.2vw,2.3rem); letter-spacing:-.035em}
.text-link {display:inline-flex; align-items:center; min-height:38px; gap:7px; color:var(--dark-gold); font-weight:650; font-size:.9rem}
.text-link:hover,.member-panel a:hover {text-decoration:underline; text-underline-offset:4px}
.directory .text-link {color:var(--gold)}
.topic-grid {display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(10px,1.2vw,18px)}
.topic {position:relative; display:block; min-width:0; border:1px solid #505b60; border-radius:6px; overflow:hidden; background:#222a2f}
.topic-photo {aspect-ratio:1.72; overflow:hidden; background:var(--graphite)}
.topic-photo img,.read-cover img {width:100%; height:100%; object-fit:cover; transition:transform .2s ease-out}
.topic:hover img,.read-cover:hover img {transform:scale(1.035)}
.topic:hover {border-color:var(--gold)}
.topic-caption {position:relative; padding:12px 26px 13px 13px; border-top:1px solid #657076}
.topic-caption::before {content:""; position:absolute; height:2px; width:29px; top:-1px; left:13px; background:var(--gold)}
.topic-caption h3 {font-size:clamp(1.1rem,1.35vw,1.54rem)}
.topic-caption p {font-size:.83rem; color:#d0d8d9; margin-top:3px; line-height:1.47}
.topic-arrow {position:absolute; bottom:12px; right:10px; color:var(--gold)}
.topic-arrow .ui-icon {width:14px; height:14px}
.court-band {border-bottom:1px solid var(--rule); background:#e2e5e1}
.court-section {display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,6vw,86px); align-items:center; padding-block:clamp(32px,3.5vw,62px)}
.lesson-copy p {max-width:38em; color:#38444a; margin:10px 0 6px}
.court-board {min-width:0; margin:0; padding:6px 14px 14px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; border:1px solid #8a9596; border-radius:6px; background:#f4f5f2}
.court-board legend {padding:0 7px; font-size:.9rem; font-weight:650}
.court-board input {position:absolute; width:1px; height:1px; opacity:0}
.court-board label {display:grid; place-items:center; min-height:40px; padding:5px; border:1px solid #99a2a1; border-radius:3px; text-align:center; font-size:.93rem}
.court-board input:checked + label {background:var(--carbon); color:var(--white); border-color:var(--carbon); font-weight:700}
.court-board input:focus-visible + label {outline:3px solid #866200; outline-offset:2px}
.court-result {display:none; grid-column:1/-1; grid-template-columns:70px minmax(0,1fr); column-gap:13px; align-items:center; padding:5px 0 0}
.court-result strong {font-size:1.33rem; line-height:1.3}
.court-result p {grid-column:2; font-size:.91rem; line-height:1.5; color:#35424a}
.court-map {grid-row:1/3; align-self:stretch; min-height:49px; display:block; position:relative; background:#2d5b56; border:3px solid #1d4b45; box-shadow:inset 0 0 0 1px #e7e8d8}
.court-map::before {content:""; position:absolute; inset:24% 1px 1px 50%; border-top:1px solid white; border-left:1px solid white; background:#e7bd4e}
.court-map::after {content:""; position:absolute; top:24%; left:1px; right:1px; border-top:1px solid white}
#result-2 .court-map::before {inset-inline:1px 50%; border-left:0; border-right:1px solid white}
#court-1:checked ~ #result-1,#court-2:checked ~ #result-2,#court-3:checked ~ #result-3 {display:grid}
.journal {padding-block:clamp(29px,3.4vw,54px)}
.journal-controls {display:flex; align-items:center; gap:8px; font-size:.9rem}
.journal-controls select {padding:5px 12px; border:1px solid #8c9694; border-radius:4px; background:var(--white); color:var(--carbon); min-height:40px}
.journal-list,.read-grid {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(14px,1.8vw,26px)}
.read-card {display:grid; grid-template-columns:31% minmax(0,1fr); gap:14px; align-items:start; padding-top:14px; border-top:1px solid var(--rule)}
.read-cover {aspect-ratio:1.52; border-radius:3px; background:var(--graphite); overflow:hidden}
.read-meta {display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px; font-size:.8rem; color:#4b5659}
.read-meta span {font-weight:700; color:var(--dark-gold)}
.read-body h2,.read-body h3 {font-size:clamp(1.06rem,1.48vw,1.61rem); margin:4px 0}
.read-body a:hover {text-decoration:underline}
.read-body p,.feature-copy p {color:#394349; line-height:1.65}
.read-body p {font-size:.91rem}
.member-guides,.reading {display:grid; grid-template-columns:minmax(0,1fr) minmax(230px,31%); align-items:start; gap:clamp(24px,5vw,83px); padding-block:clamp(29px,3.6vw,63px)}
.member-guides {border-top:1px solid var(--rule)}
.feature-copy h2,.member-panel h2 {font-size:clamp(1.27rem,1.8vw,1.8rem); margin-bottom:11px}
.feature-copy p {margin:.7em 0}
.feature-copy a,.prose a:not(.action) {color:var(--dark-gold); text-decoration:underline; text-underline-offset:3px}
.member-panel {background:var(--white); border-left:3px solid var(--gold); padding:16px 19px}
.member-panel a {display:flex; justify-content:space-between; align-items:center; gap:8px; min-height:44px; border-bottom:1px solid var(--rule)}
.closing {background:var(--deep); color:var(--white); border-top:3px solid #b39d5c}
.closing-grid {display:grid; grid-template-columns:1.24fr .84fr 1fr; gap:clamp(20px,5.6vw,90px); padding-block:40px}
.closing-brand p {max-width:29em; margin-top:11px; font-size:.92rem; color:var(--silver)}
.closing h2 {font-size:1.06rem; color:var(--gold); margin-bottom:9px}
.closing li a {display:inline-flex; align-items:center; min-height:34px; font-size:.9rem}
.closing li a:hover {text-decoration:underline}
.colophon {display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px; padding-block:14px; border-top:1px solid #566166; color:var(--silver); font-size:.8rem}
.inner-head {background:var(--carbon); color:var(--white); padding-block:clamp(28px,3.9vw,64px); border-bottom:3px solid var(--gold)}
.crumb,.article-byline {display:flex; flex-wrap:wrap; gap:4px 9px; align-items:baseline; margin-bottom:14px; color:var(--silver); font-size:.87rem}
.crumb a:hover {text-decoration:underline}
.inner-head h1 {max-width:28em; font-size:clamp(1.84rem,3.45vw,4rem)}
.inner-head p {max-width:48em; margin-top:13px; color:#e0e5e4}
.prose {min-width:0; overflow-wrap:anywhere; line-height:1.84}
.prose h2,.prose h3 {margin:1.1em 0 .5em}
.prose h2 {font-size:clamp(1.28rem,2vw,2.06rem)}
.prose h3 {font-size:1.18rem}
.prose p,.prose ol,.prose ul {margin:0 0 .95em}
.prose ol,.prose ul {padding-inline-start:1.4em}
.prose > :first-child {margin-top:0}
.prose table {width:100%; border-collapse:collapse; table-layout:fixed; margin:16px 0; font-size:.95rem}
.prose th,.prose td {padding:7px 9px; border:1px solid #b6bcb9; text-align:start}
.prose th {background:#dce1dd}
.reading-side {border-radius:5px; border:1px solid var(--rule); overflow:hidden; background:var(--white)}
.reading-side img {width:100%; height:auto}
.reading-side .text-link {margin:7px 14px}
.post-links {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; border-top:1px solid var(--rule); padding-top:14px}
.archive-body,.missing {padding-block:clamp(28px,3.9vw,60px)}
.archive-intro {margin-bottom:19px}
.outbound {background:var(--white); border-left:3px solid #b89632; padding:16px 19px; margin-bottom:23px}
.outbound p {margin:8px 0 0; font-size:.91rem; color:#435055}
.pagination,.missing .action {margin-top:18px}
@media (max-width:980px) {
    .mast-inner {min-height:59px; 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:4px 19px}
    .main-menu .drawer-login {display:inline-flex}
    .nav-ready .mast-inner {flex-wrap:nowrap}
    .nav-ready .main-menu {display:none; position:absolute; inset:100% 0 auto; padding:6px 4% 13px; background:#f5f5f1; border-bottom:2px solid #465057; box-shadow:0 8px 14px #11182020}
    .nav-ready .menu-open .main-menu {display:block}
    .nav-ready .nav-toggle {display:grid; place-content:center; gap:4px; width:40px; height:40px; background:transparent; color:var(--carbon); border:1px solid #8a9394; border-radius:4px}
    .nav-toggle span {width:16px; height:2px; background:currentColor}
    .hero-inner {min-height:clamp(325px,41.667vw,410px)}
    .hero-copy {width:51%}
    .hero-brand {font-size:clamp(3rem,6.3vw,4.35rem)}
    .hero-copy h1 {font-size:1.58rem}
    .hero-actions {gap:7px; margin-top:15px}
    .hero-actions .action {padding:8px 13px; min-height:42px; font-size:.85rem}
    .topic-caption {padding:10px 8px}
    .topic-caption p {font-size:.76rem}
    .topic-arrow {display:none}
    .read-cover {aspect-ratio:1.18}
}
@media (max-width:680px) {
    .frame {width:calc(100% - 32px)}
    .wordmark {gap:5px}
    .wordmark img {width:27px; height:27px}
    .wordmark span {font-size:1.24rem}
    .mast .primary-action {padding:6px 10px; font-size:.81rem}
    .hero {display:flex; flex-direction:column}
    .cover-art {position:relative; inset:auto; z-index:0; aspect-ratio:4/5; overflow:hidden}
    .cover-art img {object-position:center}
    .hero::before {display:none}
    .hero-inner {min-height:0; width:100%; padding:16px 17px 21px; border-top:2px solid var(--gold)}
    .hero-copy {width:100%}
    .hero-copy h1 {font-size:clamp(1.24rem,4.3vw,1.63rem)}
    .hero-brand {font-size:clamp(2.65rem,10.5vw,4.1rem)}
    .hero-heading {margin:.31em 0}
    .hero-intro {font-size:.88rem; line-height:1.55; text-wrap:pretty}
    .hero-actions {margin-top:13px}
    .hero-actions .action {font-size:.81rem; padding-inline:11px}
    .directory,.journal {padding-block:23px 28px}
    .section-head,.journal-heading {gap:8px; margin-bottom:12px}
    .section-head h2,.lesson-copy h2,.journal-heading h2 {font-size:1.37rem}
    .section-head .text-link {font-size:.78rem}
    .topic-grid {grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px}
    .topic:first-child {grid-column:1/-1; display:grid; grid-template-columns:48% minmax(0,1fr); align-items:center}
    .topic:first-child .topic-caption {border:0}
    .topic:first-child .topic-caption::before {display:none}
    .topic-photo {aspect-ratio:1.58}
    .topic-caption {padding:9px 10px}
    .topic-caption h3 {font-size:1.06rem}
    .court-section,.member-guides,.reading {grid-template-columns:minmax(0,1fr); gap:17px}
    .court-board {padding:5px 8px 11px; gap:5px}
    .court-board label {font-size:.86rem}
    .court-result {grid-template-columns:61px minmax(0,1fr); gap:0 9px}
    .journal-heading {flex-wrap:wrap}
    .journal-list,.read-grid {grid-template-columns:minmax(0,1fr)}
    .read-card {grid-template-columns:28% minmax(0,1fr); gap:11px}
    .read-body p,.prose table {font-size:.85rem}
    .closing-grid {grid-template-columns:1fr 1fr; gap:22px}
    .closing-brand {grid-column:1/-1}
    .prose th,.prose td {padding:5px}
}
@media (min-width:481px) and (max-width:680px) { .cover-art {aspect-ratio:2.32} }
@media (min-width:1801px) { .cover-art img {object-fit:contain; object-position:right center} }
@media (max-width:360px) {
    .frame {width:calc(100% - 24px)}
    .mast .primary-action .ui-icon {display:none}
    .hero-inner {width:100%; padding-inline:13px}
    .hero-actions .action {padding-inline:8px}
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after {transition-duration:0s !important; scroll-behavior:auto !important} }