/*
Theme Name: Tee-Noi Saddle Club
Theme URI: https://tee-noi.shop/
Version: 1.0.0
Author: tee-noi
Description: คู่มือเกมไพ่และกีฬาของ tee-noi ออกแบบในโทนคลับกีฬาสีเขียวเข้มและงาช้าง
Text Domain: teenoisaddle
Requires at least: 6.3
Requires PHP: 7.4
License: GNU General Public License v2 or later
*/
:root{
    --pine:#103e32;
    --dark:#092c24;
    --ink:#182d24;
    --text:#46544b;
    --paper:#fbf8f0;
    --cream:#f1e9d8;
    --white:#fffdf7;
    --wine:#772a38;
    --line:#cfc8b5;
    --gold:#d9bb7c;
    --font:"Fahkwang","Leelawadee UI","Noto Sans Thai",Tahoma,Arial,sans-serif;
    --serif:"Baskervville","Times New Roman",Georgia,serif;
    --gutter:clamp(18px,4.8vw,88px);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:1rem/1.76 var(--font);overflow-wrap:break-word}
h1,h2,h3,p{margin:0}
h1,h2,h3{line-height:1.34}
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 #aa5038;outline-offset:4px}
.mast :focus-visible,.lesson :focus-visible,.closing :focus-visible{outline-color:#f3cc78}
.frame{width:min(1440px,calc(100% - 2 * var(--gutter)));margin-inline:auto}
.skip{position:absolute;z-index:30;top:8px;left:12px;transform:translateY(-180%);background:white;color:var(--ink);padding:6px 14px}
.skip:focus{transform:none}
.mast,.closing{color:var(--paper);background:var(--dark)}
.mast{position:relative;z-index:4;border-bottom:3px double #b6a071}
.mast-inner{display:flex;align-items:center;min-height:73px;gap:clamp(24px,4vw,75px)}
.wordmark{white-space:nowrap;display:inline-flex;align-items:center;gap:9px;flex:none}
.wordmark img{width:41px;height:41px}
.wordmark>span{font:italic bold 2.2rem/.9 var(--serif);letter-spacing:-.067em;padding-right:.1em}
.brand-hyphen{color:var(--gold);font:inherit}
.main-menu ul,.closing ul{list-style:none;padding:0;margin:0}
.main-menu ul{display:flex;align-items:center;gap:clamp(12px,1.9vw,30px)}
.main-menu a,.desk-login{display:inline-flex;align-items:center;min-height:44px;font-size:.92rem;font-weight:600}
.main-menu a:hover,.desk-login:hover,.main-menu a[aria-current=page]{color:#eed59c}
.mast-actions{display:flex;align-items:center;gap:22px;margin-left:auto}
.main-menu .drawer-login,.nav-toggle{display:none}
.ui-icon{flex:none;width:18px;height:18px}
.action{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:10px 21px;border:1px solid transparent;border-radius:3px;font-size:.94rem;font-weight:700;line-height:1.4}
.primary-action{color:#fffbf4;background:var(--wine)}
.primary-action:hover{background:#5c1827}
.mast .primary-action{min-height:38px;background:var(--cream);color:var(--dark);padding:7px 15px}
.mast .primary-action:hover{background:#fff6e5}
.outline-action{border-color:#617c69;color:var(--pine)}
.outline-action:hover{background:#dddcc8}
.ink-action{background:var(--pine);color:white}
.ink-action:hover{background:var(--dark)}
.hero{position:relative;display:grid;isolation:isolate;grid-template-columns:40% minmax(0,1fr);width:100%;max-width:1840px;min-height:clamp(405px,33vw,560px);margin:auto;background:#eee6d2;border-bottom:4px solid var(--pine)}
.cover-art{grid-column:2;grid-row:1;min-width:0;position:relative;overflow:hidden;background:var(--pine)}
.cover-art img{position:absolute;width:100%;height:100%;object-fit:cover;object-position:66% 49%}
.cover-art::after{content:"";position:absolute;inset:12px;border:1px solid #f9ebc380;pointer-events:none}
.hero-copy{grid-column:1;grid-row:1;justify-self:end;width:min(100%,770px);align-self:center;padding:clamp(35px,4.4vw,86px) clamp(24px,3.2vw,60px) clamp(35px,4.4vw,86px) var(--gutter);color:var(--pine)}
.hero-copy h1{font-size:clamp(1.8rem,2.55vw,3.15rem)}
.hero-brand{display:block;font:italic 600 clamp(5.6rem,8.7vw,9.5rem)/.84 var(--serif);letter-spacing:-.085em;margin:0 0 .16em -.055em}
.hero-brand span{color:var(--wine)}
.hero-heading{display:block;letter-spacing:-.04em;text-wrap:balance}
.hero-intro{max-width:36rem;color:#415346;font-size:clamp(.96rem,1.1vw,1.1rem);line-height:1.72;margin-top:14px}
.hero-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.section-head,.journal-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:17px}
.section-head h2,.journal-heading h2,.lesson h2,.member-panel h2{font-size:clamp(1.52rem,2.17vw,2.52rem);letter-spacing:-.04em}
.text-link{display:inline-flex;align-items:center;gap:8px;min-height:40px;color:var(--wine);font-size:.91rem;font-weight:700}
.text-link:hover,.member-panel a:hover{text-decoration:underline;text-underline-offset:4px}
.directory{padding-block:clamp(30px,3.2vw,59px) clamp(34px,3.7vw,65px)}
.topic-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.5vw,23px)}
.topic{display:block;min-width:0;border:1px solid #d6d0bf;border-bottom:2px solid var(--pine);background:var(--white)}
.topic-photo{overflow:hidden;aspect-ratio:1.85;background:#ded9c7}
.topic-photo img,.read-cover img{width:100%;height:100%;object-fit:cover;transition:transform .25s ease-out}
.topic:hover img,.read-cover:hover img{transform:scale(1.035)}
.topic-caption{display:flex;justify-content:space-between;align-items:center;gap:3px;padding:10px 11px}
.topic-caption h3{color:var(--pine);font-size:clamp(1.13rem,1.53vw,1.62rem)}
.topic-caption p{color:var(--text);font-size:clamp(.75rem,.86vw,.91rem);line-height:1.45;margin-top:2px}
.topic-arrow{width:25px;height:25px;display:grid;place-items:center;border:1px solid #c8baa4;color:var(--wine);border-radius:50%;flex:none}
.topic-arrow .ui-icon{width:14px;height:14px}
.topic:hover .topic-arrow{background:var(--pine);color:white;border-color:var(--pine)}
.lesson{display:grid;grid-template-columns:.8fr 1.2fr;align-items:center;gap:clamp(20px,5.5vw,88px);padding:clamp(24px,3.5vw,62px);color:var(--paper);background:#104337;border-block:4px double #c1ac7b}
.lesson h2{font-size:clamp(1.82rem,2.9vw,3.35rem)}
.lesson-copy p{color:#e6ecd9;max-width:37rem;margin:10px 0 4px}
.lesson .text-link{color:#f1d6a1}
.hand-demo{position:relative;min-width:0;margin:0;padding:12px 15px 15px;border:1px solid #66826a;background:#0e352b}
.hand-demo legend{padding:0 6px;font-size:.86rem;color:#f5e7c7}
.hand-choice{position:absolute;opacity:0;width:1px;height:1px}
.hand-demo label{display:inline-flex;align-items:center;min-height:37px;margin:0 2px 4px 0;padding:3px 11px;border:1px solid #7d9985;color:white;font-weight:650;font-size:.86rem}
.hand-choice:focus-visible+label{outline:3px solid #eac67e;outline-offset:2px}
.hand-choice:checked+label{color:var(--dark);background:var(--cream);border-color:var(--cream)}
.hand-result{display:none;align-items:center;gap:18px;margin-top:10px;min-height:110px}
#hand-two:checked~.result-two,#hand-three:checked~.result-three,#hand-aces:checked~.result-aces{display:flex}
.hand-cards{display:flex;flex:none;align-items:center;padding:5px 2px}
.playing-card{display:flex;flex-direction:column;justify-content:space-between;width:36px;height:54px;padding:4px;background:#faf6e9;color:#141f1a;border:1px solid #cbbd99;border-radius:4px;font:600 1.06rem/1 var(--serif)}
.playing-card+.playing-card{margin-left:-5px;transform:rotate(3deg)}
.playing-card:nth-child(2){color:#842e38}
.playing-card i{align-self:center;font-style:normal}
.hand-total strong{display:block;color:#f3d8a2;font-size:1.4rem}
.hand-total p{font-size:.94rem;line-height:1.6}
.journal{padding-block:clamp(35px,4vw,72px)}
.journal-controls{display:flex;align-items:center;gap:8px;font-size:.85rem}
.journal-controls select{max-width:100%;border:1px solid #a89b87;background:var(--white);color:var(--ink);padding:5px 9px}
.journal-list,.read-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,29px)}
.read-card{min-width:0}
.read-cover{display:block;width:100%;aspect-ratio:1.8;overflow:hidden;background:var(--cream)}
.read-body{padding:10px 0}
.read-meta,.article-byline{display:flex;flex-wrap:wrap;align-items:center;gap:5px 10px;color:var(--wine);font-size:.81rem}
.read-meta span{font-weight:700}
.read-meta time{color:var(--text)}
.read-body h2,.read-body h3{font-size:clamp(1.1rem,1.4vw,1.5rem);margin:.35em 0}
.read-body h2 a:hover,.read-body h3 a:hover{text-decoration:underline}
.read-body p{font-size:.92rem;line-height:1.64;color:var(--text)}
.member-guides,.reading{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,.8fr);gap:clamp(24px,6.2vw,108px)}
.member-guides{padding-bottom:clamp(35px,4vw,72px)}
.member-panel{padding:22px;background:#f0e9d6;border-top:3px double var(--wine)}
.member-panel h2{font-size:1.45rem;margin-bottom:10px}
.member-panel a{display:flex;align-items:center;justify-content:space-between;padding:8px 0;color:var(--wine);border-top:1px solid #d1c4a9;font-weight:600}
.closing{padding:clamp(32px,4vw,68px) 0 20px;border-top:4px double #cbb789}
.closing-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:clamp(18px,5.5vw,80px)}
.closing-brand p{color:#d3decd;font-size:.94rem;max-width:25rem;margin-top:15px}
.closing h2{font-size:1.03rem;margin:.2rem 0 .55rem}
.closing nav a{font-size:.9rem;display:inline-block;padding:3px 0;color:#e6eadc}
.closing nav a:hover,.colophon a:hover{color:var(--gold);text-decoration:underline}
.colophon{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 20px;border-top:1px solid #527167;padding-top:13px;margin-top:28px;color:#d7dfd2;font-size:.78rem}
.inner-head{background:var(--cream);color:var(--pine);padding:clamp(26px,3.7vw,60px) 0;border-bottom:4px double #ab9972}
.inner-head h1{max-width:65rem;font-size:clamp(1.9rem,3.5vw,4.15rem);letter-spacing:-.04em;text-wrap:balance}
.inner-head p{max-width:54rem;color:var(--text);margin-top:12px;font-size:clamp(1rem,1.16vw,1.2rem)}
.crumb,.article-byline{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 12px;color:var(--wine);font-size:.85rem}
.crumb a,.article-byline a{text-decoration:underline;text-underline-offset:3px}
.reading,.archive-body,.missing{padding-block:clamp(30px,4vw,65px)}
.prose{min-width:0;font-size:1.04rem;line-height:1.85}
.prose h2{font-size:clamp(1.29rem,2vw,1.95rem);margin:1.45em 0 .45em}
.prose h3{font-size:1.17rem;margin:1.35em 0 .4em}
.prose>:first-child{margin-top:0}
.prose p,.prose ol,.prose ul,.prose blockquote{margin:0 0 1em}
.prose a:not(.action){color:var(--wine);text-decoration:underline;text-underline-offset:3px}
.prose ol,.prose ul{padding-inline-start:1.5em}
.prose table{border-collapse:collapse;width:100%;max-width:100%;margin-block:1em;font-size:.92em}
.prose caption{font-weight:700;text-align:left}
.prose td,.prose th{padding:7px 9px;border:1px solid var(--line);text-align:start;overflow-wrap:anywhere}
.prose th{background:#ece6d2}
.prose figure{max-width:100%;overflow-x:auto;margin-inline:0}
.reading-side{min-width:0}
.reading-side img{width:100%;height:auto;border-bottom:3px solid var(--pine)}
.outbound{border-inline-start:3px solid var(--wine);padding:15px 19px;background:#efe7d7;margin-bottom:24px}
.outbound p{font-size:.92rem;color:var(--text);margin:8px 0 0}
.post-links{display:flex;flex-wrap:wrap;gap:15px;justify-content:space-between;border-top:1px solid var(--line);padding-top:18px}
.archive-intro{max-width:870px;margin-bottom:28px}
.pagination{margin-top:24px}
.page-numbers{display:inline-block;padding:6px 10px}
.missing h1{font-size:clamp(2rem,5vw,4rem)}
.missing .action{margin-top:15px}
@media(max-width:1060px){
    .mast-inner{gap:23px}
    .hero{grid-template-columns:44% 56%}
    .hero-copy{padding-right:18px}
    .hero-actions .action{padding-inline:13px}
    .topic-caption{padding:8px}
    .topic-arrow{width:20px;height:20px}
}
@media(max-width:900px){
    .mast-inner{min-height:62px;flex-wrap:wrap;gap:0}
    .nav-ready .nav-toggle{display:grid;width:40px;height:40px;border:1px solid #789484;border-radius:3px;background:transparent;padding:10px;align-content:center;gap:5px}
    .nav-toggle span{display:block;width:18px;height:2px;background:var(--paper)}
    .main-menu{order:3;width:100%;padding:5px 0}
    .nav-ready .main-menu{display:none}
    .nav-ready .menu-open .main-menu{display:block;position:absolute;top:100%;left:0;padding:12px var(--gutter);background:var(--dark);border-bottom:1px solid #809783}
    .main-menu ul{flex-wrap:wrap;gap:0 20px}
    .main-menu .drawer-login{display:inline-flex;color:var(--gold);gap:6px}
    .desk-login{display:none}
    .mast-actions{gap:8px}
    .hero-brand{font-size:clamp(4.6rem,9.4vw,6rem)}
    .hero-heading{font-size:1.65rem}
    .topic-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
    .topic{grid-column:span 2}
    .topic:nth-last-child(-n+2){grid-column:span 3}
    .topic:nth-last-child(-n+2) .topic-photo{aspect-ratio:2.8}
    .journal-list,.read-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:720px){
    .lesson,.reading,.member-guides{grid-template-columns:1fr}
    .lesson h2 br{display:none}
    .lesson{gap:12px}
    .closing-grid{grid-template-columns:1fr 1fr}
    .closing-brand{grid-column:1/-1}
}
@media(max-width:660px){
    :root{--gutter:16px}
    .mast-inner{min-height:57px}
    .wordmark img{width:31px;height:31px}
    .wordmark{gap:5px}
    .wordmark>span{font-size:1.72rem}
    .mast .primary-action{min-height:36px;padding:6px 11px;font-size:.84rem}
    .hero{display:flex;flex-direction:column;min-height:0}
    .cover-art{aspect-ratio:1.46}
    .cover-art img{object-position:50% 37%}
    .cover-art::after{inset:8px}
    .hero-copy{width:100%;padding:21px var(--gutter) 23px}
    .hero-brand{font-size:clamp(3.3rem,12vw,5.4rem);margin-bottom:.11em}
    .hero-heading{font-size:clamp(1.5rem,5.4vw,2.1rem)}
    .hero-intro{font-size:.92rem;margin-top:7px;line-height:1.6}
    .hero-actions{margin-top:13px;gap:7px}
    .hero-actions .action{font-size:.86rem;min-height:41px;padding:7px 13px}
    .directory{padding-block:23px 30px}
    .section-head,.journal-heading{flex-wrap:wrap;gap:6px;margin-bottom:12px}
    .section-head h2,.journal-heading h2{font-size:1.46rem}
    .topic-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
    .topic,.topic:nth-last-child(-n+2){grid-column:auto}
    .topic:last-child{grid-column:1/-1;display:grid;grid-template-columns:.9fr 1fr}
    .topic .topic-photo,.topic:nth-last-child(-n+2) .topic-photo{aspect-ratio:1.64}
    .topic:last-child .topic-photo{aspect-ratio:2.15}
    .topic-caption p{font-size:.77rem}
    .topic-caption{padding:8px}
    .topic-arrow{width:17px;height:17px}
    .topic-arrow .ui-icon{width:11px}
    .hand-demo{padding:5px 10px 10px}
    .hand-demo label{font-size:.79rem;padding:4px 7px;min-height:32px}
    .hand-result{gap:11px;margin-top:5px}
    .hand-total p{font-size:.86rem}
    .lesson{padding:19px 14px}
}
@media(max-width:370px){
    :root{--gutter:12px}
    .mast .primary-action .ui-icon,.topic-arrow{display:none}
    .hero-actions .action{font-size:.8rem;padding-inline:10px}
    .journal-list,.read-grid{grid-template-columns:1fr}
    .hand-result{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{scroll-behavior:auto!important;transition:none!important}
}