/*
Theme Name: EightTimes Trackside
Description: A Thai guide to relay racing, table games and lottery results.
Version: 1.0.0
Author: 8times
Requires at least: 6.3
Requires PHP: 7.4
Text Domain: eighttimes-trackside
License: GNU General Public License v2 or later
*/
:root {
    --night: #15181b;
    --navy: #26292d;
    --panel: #34373a;
    --line: #514945;
    --paper: #f1eee7;
    --white: #fffdf7;
    --ink: #242120;
    --slate: #5a5652;
    --gold: #e4a37d;
    --pale: #e1d8d1;
    --display: "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif;
    --text: "Source Sans 3", Tahoma, "Noto Sans Thai", Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 400 1rem/1.68 var(--text); overflow-wrap: break-word; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { line-height: 1.36; }
a { color: inherit; text-decoration: none; }
button, select { font: inherit; }
button, select, label[for] { cursor: pointer; }
img, picture, svg { display: block; }
img { max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #3198c9; outline-offset: 3px; }
.frame { width: min(91%, 1470px); margin-inline: auto; }
.ui-icon { width: 17px; height: 17px; flex: none; }
.skip { position: fixed; top: 6px; left: 8px; z-index: 15; padding: 8px 13px; color: var(--ink); background: white; transform: translateY(-200%); }
.skip:focus { transform: none; }
.sr-only, .relay-switch input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; white-space: nowrap; overflow: hidden; clip-path: inset(50%); }

.mast { background: var(--night); color: var(--white); border-bottom: 2px solid #bc7b56; }
.mast-inner, .wordmark, .mast-actions, .main-menu ul { display: flex; align-items: center; }
.mast-inner { gap: clamp(25px, 5vw, 84px); min-height: clamp(62px, 5vw, 80px); }
.wordmark { gap: 8px; flex: none; }
.wordmark img { width: 33px; height: 33px; }
.wordmark > span { font: 800 clamp(1.27rem, 1.8vw, 1.92rem)/1 var(--display); letter-spacing: -.066em; text-transform: uppercase; }
.word-eight { color: var(--gold); font-style: italic; }
.main-menu ul, .closing ul { padding: 0; margin: 0; list-style: none; }
.main-menu ul { gap: clamp(16px,2.32vw,38px); }
.main-menu a, .desk-login { min-height: 44px; display: inline-flex; align-items: center; font-size: .9rem; font-weight: 700; }
.main-menu a:hover, .main-menu a[aria-current], .desk-login:hover { color: var(--gold); }
.mast-actions { margin-left: auto; gap: clamp(12px,2.2vw,36px); }
.action { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 18px; border: 1px solid transparent; border-radius: 2px; font-size: .92rem; font-weight: 700; line-height: 1.45; }
.action .ui-icon { width: 14px; height: 14px; }
.primary-action, .ink-action { background: var(--gold); color: #251b15; }
.primary-action:hover, .ink-action:hover { background: #f3bb96; }
.outline-action { color: var(--ink); border-color: #77716a; background: transparent; }
.outline-action:hover { background: #e3ddd3; }
.nav-toggle, .main-menu .drawer-login { display: none; }


.cover { position: relative; isolation: isolate; overflow: hidden; color: var(--ink); background: var(--paper); border-bottom: 1px solid #c9c0b5; }
.cover-art { position: absolute; inset: 0 0 0 auto; width: 66%; z-index: -2; background: #111c2a; }
.cover-art img { width: 100%; height: 100%; object-fit: cover; object-position: right 31%; }
.cover::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 50%; background: var(--paper); clip-path: polygon(0 0,100% 0,80% 100%,0 100%); z-index: -1; }
.cover-inner { display: flex; align-items: center; min-height: clamp(395px,31.6vw,540px); padding-block: clamp(30px,3.5vw,59px); }
.cover-copy { width: 42%; max-width: 615px; }
.cover h1 { line-height: 1.2; }
.cover-brand { display: block; color: #1c1d20; font-family: var(--display); font-size: clamp(4.55rem,7vw,8.4rem); font-weight: 800; line-height: .95; letter-spacing: -.078em; text-transform: uppercase; white-space: nowrap; }
.cover-brand i { color: #af5d37; font-family: Georgia, "Times New Roman", serif; font-weight: 700; letter-spacing: -.09em; padding-right: .035em; }
.cover-subjects { display: block; margin-top: 9px; font-size: clamp(1.48rem,2.15vw,2.65rem); }
.cover-copy > p { color: #443f3a; margin-top: 11px; max-width: 31.5em; font-size: clamp(.93rem,1.04vw,1.13rem); line-height: 1.67; }
.cover-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(15px,1.8vw,29px); }
.cover-actions .primary-action { color: white; background: #242426; }
.cover-actions .primary-action:hover { background: #504036; }
.cover-copy > .member-note { color: #57504a; font-size: .77rem; margin-top: 8px; }
.home-body { padding-bottom: clamp(35px,4vw,68px); }
.guide-grid { display: grid; grid-template-columns: minmax(0,1.63fr) minmax(290px,.92fr); align-items: stretch; gap: clamp(18px,2.4vw,41px); padding-block: clamp(23px,2.65vw,45px); border-bottom: 1px solid #b8b0a4; }
.category-panel { min-width: 0; }
.category-panel h2, .relay-lab h2, .section-heading h2, .feature-copy h2, .account-body h2 { font-size: clamp(1.32rem,1.95vw,2.15rem); }
.category-panel h2 { margin-bottom: 10px; }
.topic-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px 14px; }
.topic-card { display: grid; grid-template-columns: minmax(64px,35%) minmax(0,1fr) 14px; gap: clamp(8px,.8vw,15px); align-items: center; border-block: 1px solid #beb7aa; padding-block: 8px; }
.topic-card:nth-child(n+3) { border-top: 0; padding-top: 0; }
.topic-photo { width: 100%; height: clamp(70px,6.3vw,111px); overflow: hidden; background: #2d2b28; }
.topic-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease; }
.topic-card:hover img { transform: scale(1.045); }
.topic-card:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
.topic-card > .ui-icon { width: 14px; color: #804526; }
.topic-caption { min-width: 0; }
.topic-caption h3 { color: var(--ink); font-size: clamp(1.08rem,1.43vw,1.55rem); }
.topic-caption p { color: #56504a; font-size: clamp(.76rem,.86vw,.95rem); line-height: 1.45; margin-top: 3px; }
.relay-lab { min-width: 0; background: #202327; color: #fffbf6; border-top: 3px solid #d99b76; padding: clamp(15px,1.6vw,28px); }
.relay-lab h2 { font-size: clamp(1.25rem,1.65vw,1.83rem); }
.lab-intro { margin-top: 4px; color: #e0d8cf; font-size: .88rem; }
.relay-switch { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 3px; border: 0; padding: 0; margin: 11px 0 0; min-width: 0; }
.relay-switch label { display: grid; place-items: center; text-align: center; min-height: 38px; border: 1px solid #82766d; padding: 3px; color: #f1e6de; font-size: .8rem; font-weight: 700; }
.relay-switch input:checked + label { background: var(--gold); color: #261e19; border-color: var(--gold); }
.relay-switch input:focus-visible + label { outline: 2px solid white; outline-offset: 2px; }
.relay-result { display: none; grid-column: 1 / -1; gap: 3px; margin-top: 6px; }
#relay-early:checked ~ .result-early, #relay-inside:checked ~ .result-inside, #relay-late:checked ~ .result-late { display: grid; }
.track-diagram { position: relative; height: 26px; overflow: hidden; background: repeating-linear-gradient(0deg,#374350 0 10px,#b9c0c65c 10px 11px); }
.takeover-zone { position: absolute; inset: 0 24%; border-inline: 3px solid #f3d4b4; background: #d0b98728; }
.baton { position: absolute; width: 17px; height: 6px; top: 10px; left: 12%; border-radius: 3px; background: #f4a669; border: 1px solid #302119; transform: translateX(-50%) rotate(-16deg); }
.result-inside .baton { left: 50%; }
.result-late .baton { left: 87%; }
.relay-result strong { margin-top: 3px; font-size: 1rem; }
.relay-result p { color: #e3dcd6; font-size: .84rem; line-height: 1.5; }
.text-link { display: inline-flex; align-items: center; gap: 7px; min-height: 35px; width: fit-content; font-size: .88rem; font-weight: 700; }
.text-link .ui-icon { width: 14px; }
.text-link:hover, .account-body a:hover { text-decoration: underline; text-underline-offset: 4px; }
.relay-lab .text-link { color: var(--gold); margin-top: 3px; }
.section-heading, .journal-controls, .read-meta, .article-byline { display: flex; gap: 10px; align-items: center; }
.section-heading { flex-wrap: wrap; padding-bottom: 13px; margin-bottom: 15px; border-bottom: 1px solid #c4bcaf; }
.section-heading > .text-link { color: var(--navy); }
.journal-controls { margin-left: auto; color: var(--slate); font-size: .82rem; }
.journal-controls select { color: var(--ink); background: white; border: 1px solid #918278; border-radius: 4px; padding: 6px; }
.journal-controls[hidden] + .text-link { margin-left: auto; }
.journal-list, .read-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(12px,1.55vw,26px); }
.read-card { overflow: hidden; background: white; border: 1px solid #d3cbbf; border-radius: 1px; }
.read-cover { display: block; background: #ded6c9; overflow: hidden; }
.read-cover img { width: 100%; height: auto; aspect-ratio: 2.23; object-fit: cover; }
.read-body { padding: clamp(12px,1.4vw,23px); }
.read-meta { flex-wrap: wrap; color: var(--slate); line-height: 1.4; font-size: .76rem; }
.read-meta span { font-weight: 700; color: #6c3a22; }
.read-body h3, .read-body h2 { font-size: clamp(1.06rem,1.46vw,1.55rem); margin-top: 7px; }
.read-body h3 a:hover, .read-body h2 a:hover { text-decoration: underline; }
.read-body p { font-size: .9rem; margin-top: 6px; color: var(--slate); }
.editor-desk { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); margin-top: clamp(22px,2.4vw,40px); gap: clamp(15px,1.8vw,30px); }
.feature-copy { padding: clamp(16px,2vw,33px); border-left: 3px solid #a35f39; background: #e7dfd1; }
.feature-copy p { margin-top: 7px; }
.feature-copy a { color: #693c23; text-decoration: underline; text-underline-offset: 3px; }
.account-panel { display: grid; grid-template-columns: minmax(70px,37%) minmax(0,1fr); background: var(--navy); color: white; border-radius: 1px; overflow: hidden; }
.account-photo { min-height: 100%; position: relative; }
.account-photo img { position: absolute; width: 100%; height: 100%; object-fit: cover; }
.account-body { align-self: center; padding: clamp(14px,1.55vw,26px); }
.account-body h2 { font-size: clamp(1.15rem,1.55vw,1.65rem); }
.account-body a { display: flex; justify-content: space-between; align-items: center; gap: 2px; min-height: 40px; color: var(--pale); border-bottom: 1px solid #5c5249; font-size: .9rem; }
.account-body a .ui-icon { color: var(--gold); }

.inner-head { padding-block: clamp(27px,3.85vw,65px); color: var(--white); border-bottom: 3px solid var(--gold); background: linear-gradient(115deg,#15191d,#34302e); }
.inner-head h1 { font-size: clamp(1.75rem,3.4vw,3.8rem); max-width: 28em; overflow-wrap: anywhere; }
.inner-head p { color: var(--pale); margin-top: 9px; max-width: 56em; }
.crumb { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; font-size: .82rem; color: var(--pale); }
.crumb a:hover, .article-byline a:hover { text-decoration: underline; }
.article-byline { flex-wrap: wrap; color: var(--gold); font-size: .82rem; }
.reading { display: grid; grid-template-columns: minmax(0,1fr) minmax(170px,26%); align-items: start; gap: clamp(18px,2.6vw,44px); padding-block: clamp(22px,3vw,52px) clamp(35px,4.7vw,85px); }
.prose { min-width: 0; padding: clamp(18px,2.7vw,46px); border: 1px solid #d1c8ba; border-radius: 1px; background: white; font-size: 1.015rem; line-height: 1.85; overflow-wrap: anywhere; }
.prose h2, .prose h3 { margin: 1.1em 0 .4em; }
.prose h2 { font-size: clamp(1.2rem,1.8vw,1.95rem); }
.prose h3 { font-size: 1.11rem; }
.prose p, .prose ul, .prose ol { margin: 0 0 .88em; }
.prose ul, .prose ol { padding-left: 1.55em; }
.prose li + li { margin-top: .26em; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose a { color: #774224; text-decoration: underline; text-underline-offset: 3px; }
.prose table { width: 100%; border-collapse: collapse; margin-block: 15px; }
.prose caption { text-align: start; font-weight: bold; padding-block: 5px; }
.prose th, .prose td { text-align: start; vertical-align: top; border: 1px solid #c3b9ac; padding: 7px 9px; }
.prose th { background: #efeae3; }
.outbound { padding: 16px; margin-bottom: 21px; border-left: 3px solid #ae714b; background: #f3eee7; }
.outbound p { margin: 6px 0 0; color: var(--slate); font-size: .88rem; }
.prose a.action { text-decoration: none; color: var(--ink); }
.reading-side { overflow: hidden; min-width: 0; color: var(--white); background: var(--navy); border-radius: 1px; }
.reading-side img { width: 100%; height: auto; aspect-ratio: 1.5; object-fit: cover; }
.reading-side .text-link { margin: 7px 13px; }
.post-links { display: grid; gap: 7px; margin-top: 20px; padding-top: 14px; border-top: 1px solid #c7bbae; }
.archive-body, .missing { padding-block: clamp(22px,3.2vw,55px) clamp(38px,4.8vw,80px); }
.archive-intro { margin-bottom: 20px; }
.pagination, .missing .action { margin-top: 17px; }
.nav-links { display: flex; gap: 12px; flex-wrap: wrap; }
.closing { background: var(--night); color: white; border-top: 3px solid #af7752; }
.closing-grid { display: grid; grid-template-columns: 1.4fr .8fr 1fr; gap: clamp(18px,4vw,75px); padding-block: clamp(25px,3.5vw,62px); }
.closing-brand p { color: var(--pale); max-width: 28em; margin-top: 10px; font-size: .88rem; }
.closing h2 { color: var(--gold); font-size: 1rem; margin-bottom: 6px; }
.closing li a { display: inline-block; padding-block: 3px; color: #e7e0d8; font-size: .88rem; }
.closing li a:hover { text-decoration: underline; }
.colophon { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-block: 12px; font-size: .76rem; color: #d6cec5; border-top: 1px solid var(--line); }

.journal { margin-top: clamp(22px,2.1vw,36px); }
.read-grid, .journal-list { gap: clamp(13px,1.7vw,28px); }
.read-cover img { aspect-ratio: 2.55; }
.wordmark > span { font-family: var(--display); font-style: italic; }
@media (max-width:1050px) {
    .frame { width: 93%; }
    .mast-inner { gap: 23px; }
    .cover-copy { width: 46%; }
    .cover::before { width: 53%; }
    .cover-inner { min-height: 368px; }
    .guide-grid { grid-template-columns: minmax(0,1.45fr) minmax(245px,.95fr); gap: 16px; }
    .topic-grid { gap: 7px 9px; }
    .topic-card { grid-template-columns: minmax(51px,33%) minmax(0,1fr); }
    .topic-card > .ui-icon { display: none; }
}
@media (max-width:860px) {
    .mast-inner { display: grid; grid-template-columns: minmax(0,1fr) auto; min-height: 61px; gap: 0 8px; }
    .mast-inner > .wordmark { grid-area: 1/1; justify-self: start; }
    .mast-actions { grid-area: 1/2; gap: 8px; }
    .main-menu { grid-area: 2/1/3/-1; }
    .main-menu ul { flex-wrap: wrap; gap: 0 14px; }
    .main-menu .drawer-login { display: inline-flex; gap: 5px; }
    .drawer-login .ui-icon { width: 14px; }
    .desk-login, .nav-ready .main-menu { display: none; }
    .nav-ready .menu-open .main-menu { display: block; border-top: 1px solid var(--line); }
    .nav-ready .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; width: 41px; height: 41px; gap: 4px; padding: 0; border: 1px solid #80756e; border-radius: 2px; background: var(--navy); color: white; }
    .nav-toggle span { width: 16px; height: 2px; background: currentColor; }
    .cover-inner { min-height: 338px; }
    .cover-copy { width: 48%; }
    .cover-brand { font-size: clamp(3.7rem,8.25vw,5rem); }
    .cover-copy > p { font-size: .89rem; }
    .guide-grid { grid-template-columns: minmax(0,1.3fr) minmax(235px,.94fr); gap: 12px; }
    .topic-card { position: relative; grid-template-columns: 1fr; padding: 0 0 5px; gap: 4px; align-content: start; }
    .topic-photo { height: 64px; }
    .topic-caption h3 { font-size: 1.07rem; }
    .topic-caption p { font-size: .73rem; }
    .editor-desk { grid-template-columns: minmax(0,1.18fr) minmax(0,1fr); }
}
@media (max-width:680px) {
    .frame { width: calc(100% - 28px); }
    .mast-inner { min-height: 56px; }
    .wordmark { gap: 6px; }
    .wordmark img { width: 27px; height: 27px; }
    .wordmark > span { font-size: 1.34rem; }
    .mast-actions { gap: 6px; }
    .mast-actions .action { min-height: 38px; padding: 6px 10px; font-size: .8rem; gap: 4px; }
    .nav-ready .nav-toggle { width: 38px; height: 38px; }
    .cover { display: flex; flex-direction: column; }
    .cover-art { position: relative; width: 100%; height: clamp(154px,47vw,260px); z-index: 0; }
    .cover-art img { object-position: center 20%; }
    .cover::before { display: none; }
    .cover-inner { min-height: 0; padding-block: 16px 22px; }
    .cover-copy { width: 100%; }
    .cover-brand { font-size: clamp(3.4rem,14.4vw,5.6rem); }
    .cover-subjects { margin-top: 5px; font-size: 1.36rem; }
    .cover-copy > p { margin-top: 6px; max-width: 42em; font-size: .87rem; }
    .cover-actions { gap: 7px; margin-top: 12px; }
    .cover-actions .action { min-height: 40px; padding: 6px 12px; font-size: .82rem; }
    .cover-copy > .member-note { margin-top: 5px; font-size: .73rem; }
    .guide-grid { grid-template-columns: minmax(0,1fr); gap: 18px; padding-block: 18px; }
    .topic-grid { gap: 10px; }
    .topic-card { grid-template-columns: 1fr; padding-bottom: 7px; border-top: 0; }
    .topic-photo { height: clamp(80px,22vw,124px); }
    .topic-caption p { font-size: .76rem; }
    .category-panel h2 { margin-bottom: 8px; }
    .relay-lab { padding: 15px; }
    .section-heading { gap: 8px 12px; margin-bottom: 11px; padding-bottom: 8px; }
    .section-heading > .text-link { margin-left: auto; }
    .journal-controls { order: 3; width: 100%; margin-left: 0; }
    .journal-list, .read-grid { grid-template-columns: minmax(0,1fr); gap: 8px; }
    .read-card { display: grid; grid-template-columns: minmax(78px,30%) minmax(0,1fr); }
    .read-cover img { height: 100%; aspect-ratio: auto; }
    .read-body { padding: 10px; }
    .read-meta { font-size: .7rem; }
    .read-body h3, .read-body h2 { font-size: 1.02rem; margin-top: 4px; }
    .read-body p { font-size: .82rem; margin-top: 4px; }
    .editor-desk, .reading { grid-template-columns: minmax(0,1fr); gap: 12px; }
    .account-panel { min-height: 115px; }
    .reading-side { display: grid; grid-template-columns: 32% minmax(0,1fr); align-items: center; }
    .prose { padding: 15px; font-size: .95rem; }
    .prose td, .prose th { padding: 5px; font-size: .82rem; }
    .outbound { padding: 10px; }
    .closing-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
    .closing-brand { grid-column: 1/-1; }
}
@media (max-width:375px) {
    .frame { width: calc(100% - 20px); }
    .cover-actions { gap: 5px; }
    .cover-actions .action { padding-inline: 10px; }
    .mast-actions .ui-icon, .cover-actions .ui-icon { display: none; }
    .wordmark img { width: 25px; height: 25px; }
    .wordmark > span { font-size: 1.24rem; }
}
@media (prefers-reduced-motion:reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; scroll-behavior: auto !important; }
}