/*
Theme Name: AMG168 Loggia
Theme URI: https://amg168.online/
Version: 1.0.0
Author: amg168
Description: คาสิโนสไตล์โลจจาในโทนสน ทองแดง และหินทราเวอร์ทีน พร้อมคู่มือฟอยล์ของ amg168
Text Domain: amg168-loggia
Requires at least: 6.3
Requires PHP: 7.4
License: GNU General Public License v2 or later
*/

:root {
    --pine:#163c32;
    --graphite:#1b2020;
    --fir:#2c5145;
    --slate:#626c65;
    --stone:#e6e1d5;
    --paper:#f5f2e9;
    --ink:#202a26;
    --text:#48554c;
    --rule:#c9c7b8;
    --copper:#e3ab83;
    --umber:#784629;
    --sans:"Fahkwang","Leelawadee UI","Noto Sans Thai",Tahoma,sans-serif;
    --display:"Archivo Narrow","Arial Narrow","Franklin Gothic Medium","Arial",sans-serif;
    --gutter:clamp(20px,4.1vw,76px);
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 1rem/1.7 var(--sans); overflow-wrap: break-word; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { line-height: 1.45; }
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 #876162; outline-offset: 3px; }
.hero :focus-visible, .closing :focus-visible { outline-color: var(--copper); }
.frame { margin-inline: auto; width: min(1490px, calc(100% - 2 * var(--gutter))); }
.skip { position: absolute; z-index: 20; padding: 8px 15px; background: white; transform: translateY(-150%); }
.skip:focus { transform: none; }

.mast { position:relative; z-index:3; background:var(--graphite); color:var(--paper); border-bottom:1px solid #435148; }
.mast-inner { display:flex; align-items:center; justify-content:space-between; min-height:72px; gap:24px; }
.wordmark { display:inline-flex; flex:none; align-items:center; gap:9px; white-space:nowrap; }
.wordmark img { width:34px; height:34px; }
.wordmark>span { font:700 clamp(1.44rem,2.3vw,2rem)/1 var(--display); letter-spacing:-.055em; text-transform:uppercase; }
.wordmark b { font-weight:400; color:var(--copper); }
.main-menu ul,.closing ul { list-style:none; margin:0; padding:0; }
.main-menu ul { display:flex; gap:clamp(12px,2vw,34px); align-items:center; }
.main-menu a,.desk-login { display:inline-flex; min-height:44px; align-items:center; font-size:.92rem; font-weight:650; }
.main-menu a:hover,.desk-login:hover,.main-menu a[aria-current="page"] { color:var(--copper); }
.mast-actions { display:flex; align-items:center; gap:18px; }
.main-menu .drawer-login,.nav-toggle { display:none; }
.ui-icon { width: 17px; height: 17px; flex: none; }

.action { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:45px; padding:9px 19px; border:1px solid transparent; border-radius:2px; font-size:.93rem; font-weight:700; line-height:1.5; }
.primary-action,.mast .primary-action { background:var(--copper); color:#261e18; }
.primary-action:hover { background:#f5c199; }
.ink-action { background:var(--pine); color:white; }
.ink-action:hover,.outline-action:hover { background:var(--fir); }
.outline-action { color:var(--paper); border-color:#b9c3b7; background:transparent; }
.hero {
    display:grid;
    grid-template-columns:minmax(0,.76fr) minmax(0,1.24fr);
    align-items:stretch;
    min-height:clamp(435px,34vw,580px);
    padding:clamp(13px,1.5vw,26px) var(--gutter);
    background:var(--graphite);
    color:var(--paper);
}
.cover-art { position:relative; display:block; overflow:hidden; grid-column:2; grid-row:1; background:var(--fir); }
.cover-art img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:95% 48%; }
.hero-frame { display:flex; align-items:center; width:100%; min-width:0; margin:0; grid-column:1; grid-row:1; padding:clamp(26px,3.4vw,60px); border-left:4px solid var(--copper); background:var(--pine); }
.hero-copy { min-width:0; width:100%; }
.hero h1 { font-size:clamp(1.36rem,2.2vw,2.6rem); line-height:1.5; letter-spacing:-.03em; }
.hero-brand { display:block; margin-bottom:.22em; font:700 clamp(3.5rem,6.85vw,7.6rem)/.9 var(--display); letter-spacing:-.075em; text-transform:uppercase; }
.hero-brand b { color:var(--copper); font-weight:400; }
.hero-heading { display:block; text-wrap:balance; }
.hero-intro { margin:13px 0 22px; max-width:31rem; color:#e4e9df; font-size:clamp(.94rem,1.08vw,1.12rem); }
.hero-actions { display:flex; flex-wrap:wrap; gap:9px; }

.directory { padding-block:clamp(28px,3vw,52px) clamp(35px,5vw,86px); }
.section-head,.journal-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.section-head h2,.journal-heading h2,.member-panel h2 { color:var(--ink); font-size:clamp(1.5rem,2.3vw,2.6rem); letter-spacing:-.03em; }
.text-link { display:inline-flex; align-items:center; gap:7px; min-height:40px; color:var(--fir); font-weight:650; font-size:.94rem; }
.text-link:hover,.member-panel a:hover { text-decoration:underline; text-underline-offset:4px; }
.topic-grid { display:grid; grid-template-columns:1.14fr repeat(4,minmax(0,1fr)); gap:clamp(7px,.8vw,15px); }
.topic { min-width:0; position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:flex-end; min-height:clamp(176px,15.6vw,250px); background:var(--pine); color:white; }
.topic-photo { position:absolute; inset:0; z-index:-2; overflow:hidden; }
.topic-photo img,.read-cover img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .23s ease; }
.topic-photo::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,#111b19f5 0%,#111b19d8 28%,#131b194c 57%,transparent 85%); }
.topic:hover img,.read-cover:hover img { transform:scale(1.04); }
.topic-caption { width:100%; padding:15px clamp(11px,1.1vw,20px); display:flex; align-items:end; justify-content:space-between; gap:7px; border-bottom:2px solid #a87350; }
.topic-caption h3 { font-size:clamp(1.12rem,1.42vw,1.63rem); }
.topic-caption p { color:#ece6dc; font-size:clamp(.77rem,.9vw,.98rem); }
.topic-arrow { display:grid; flex:none; place-items:center; margin-bottom:2px; width:25px; height:25px; color:var(--copper); border:1px solid #caab8f; }
.topic-arrow .ui-icon { width:14px; }

.lesson { display:grid; align-items:center; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(20px,4.5vw,68px); background:var(--stone); border-top:2px solid var(--pine); padding:clamp(22px,3.5vw,56px); }
.lesson-copy h2 { font-size:clamp(1.65rem,2.6vw,3.1rem); color:var(--ink); line-height:1.38; }
.lesson-copy p { margin:10px 0 5px; color:var(--text); max-width:36rem; }
.touch-demo { min-width:0; margin:0; padding:12px 19px 20px; background:#fbfaf5; border:1px solid #a6a99b; }
.touch-demo legend { padding-inline:7px; font-weight:650; }
.touch-choice { position:absolute; width:1px; height:1px; opacity:0; }
.touch-demo label { display:inline-flex; align-items:center; min-height:40px; margin:2px 3px 4px 0; padding:5px 9px; border:1px solid #b4baac; font-size:.87rem; }
.touch-choice:checked + label { border-color:var(--pine); background:var(--pine); color:white; }
.touch-choice:focus-visible + label { outline:3px solid var(--umber); outline-offset:2px; }
.touch-result { display:none; align-items:center; gap:16px; padding-top:13px; }
#touch-one:checked ~ .result-one,#touch-white:checked ~ .result-white,#touch-double:checked ~ .result-double { display:flex; }
.lights { display:flex; gap:4px; flex:none; align-items:center; background:#1c2522; border:2px solid #626e65; padding:9px 7px; border-radius:3px; }
.lamp { display:block; border-radius:50%; width:clamp(12px,1.2vw,22px); aspect-ratio:1; background:#47534a; }
.lights-one .bank-a,.lights-double .bank-a { background:#ff6964; }
.lights-double .bank-b { background:#72df92; }
.lights-white .off-target { background:#f7f6e8; }
.touch-explainer { min-width:0; } .touch-explainer strong { display:block; color:var(--pine); font-size:1.25rem; }
.touch-explainer p { font-size:.92rem; line-height:1.65; color:var(--text); }
.journal { padding-block: clamp(34px,4.4vw,75px); }
.journal-controls { display: flex; align-items: center; gap: 7px; font-size: .86rem; }
.journal-controls select { padding: 6px 9px; border: 1px solid var(--rule); border-radius: 4px; color: var(--ink); background: white; }
.journal-list, .read-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,1.8vw,28px); }
.read-card, .reading-side { min-width:0; }
.read-cover { position:relative; display:block; width:100%; aspect-ratio:1.64; overflow:hidden; border-radius:2px; background:var(--slate); }
.read-body { padding-block:13px; }
.read-meta,.article-byline,.crumb { display:flex; flex-wrap:wrap; align-items:center; gap:5px 11px; font-size:.84rem; color:var(--text); }
.read-meta span { color:var(--umber); font-weight:700; }
.read-body h2,.read-body h3 { font-size:clamp(1.1rem,1.45vw,1.5rem); margin:.4em 0; }
.read-body h2 a:hover,.read-body h3 a:hover { text-decoration:underline; }
.read-body p { font-size:.95rem; color:var(--text); line-height:1.65; }
.member-guides,.reading { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,.8fr); gap:clamp(24px,5.8vw,90px); }
.member-guides { padding-bottom:clamp(28px,4vw,68px); }
.member-panel { align-self:start; border:1px solid var(--rule); padding:22px; background:var(--stone); border-radius:2px; }
.member-panel h2 { font-size:1.37rem; margin-bottom:12px; }
.member-panel a { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; border-top:1px solid var(--rule); color:var(--fir); font-weight:600; }
.closing { padding:clamp(30px,4vw,70px) 0 20px; color:#f4f6f8; background:var(--graphite); }
.closing-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(18px,5vw,80px); }
.closing-brand p { max-width:27rem; margin-top:14px; color:#dfe4dc; font-size:.94rem; }
.closing h2 { font-size:1.06rem; margin:.16rem 0 .66rem; }
.closing nav a { display:inline-block; padding:4px 0; font-size:.91rem; color:#e4e9e1; }
.closing nav a:hover { color:var(--copper); text-decoration:underline; }
.colophon { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 18px; padding-top:14px; margin-top:25px; border-top:1px solid #615c51; font-size:.8rem; color:#d8d9cd; }
.inner-head { background:var(--pine); color:var(--paper); padding:clamp(26px,4vw,70px) 0; border-bottom:3px solid var(--copper); }
.inner-head h1 { max-width:64rem; font-size:clamp(1.85rem,3.45vw,4.1rem); letter-spacing:-.04em; text-wrap:balance; }
.inner-head p { max-width:55rem; margin-top:13px; color:#dee9df; font-size:clamp(.98rem,1.15vw,1.2rem); }
.crumb,.article-byline { color:#f0c7a6; margin:0 0 12px; }
.crumb a, .article-byline a { text-decoration:underline; text-underline-offset:3px; }
.reading,.archive-body,.missing { padding-block:clamp(28px,4vw,65px); }
.archive-intro { max-width:870px; margin-bottom:28px; }
.prose { min-width:0; line-height:1.85; font-size:1.05rem; }
.prose h2 { font-size:clamp(1.27rem,1.95vw,2rem); margin:1.45em 0 .4em; }
.prose h3 { font-size:1.17rem; margin:1.3em 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(--fir); 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 { text-align:left; font-weight:700; }
.prose td,.prose th { padding:7px 9px; text-align:start; border:1px solid var(--rule); overflow-wrap:anywhere; }
.prose th { background:var(--stone); }
.prose figure { margin-inline:0; max-width:100%; overflow-x:auto; }
.reading-side img { width:100%; height:auto; border-radius:2px; }
.outbound { padding:16px 18px; margin-bottom:25px; border-inline-start:4px solid var(--fir); background:var(--stone); }
.outbound p { margin:8px 0 0; font-size:.93rem; color:var(--text); }
.post-links { display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; border-top:1px solid var(--rule); padding-top:18px; }
.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; }
.nav-toggle span { width:17px; height:2px; background:var(--pine); }

@media(max-width:1000px){
    .mast-inner,.mast-actions { gap:12px; }
    .hero-frame { padding:24px 21px; }
    .hero-brand { font-size:clamp(3.25rem,6.6vw,4.5rem); }
    .topic-arrow { display:none; }
}
@media(max-width:860px){
    .mast-inner { min-height:58px; flex-wrap:wrap; gap:0; }
    .mast-actions { margin-left:auto; gap:8px; }
    .nav-toggle { display:grid; place-content:center; gap:5px; border:1px solid #667066; width:42px; height:42px; border-radius:2px; background:var(--graphite); }
    .nav-toggle span { background:var(--paper); }
    .main-menu { display:none; position:absolute; top:100%; left:0; width:100%; padding:12px var(--gutter); background:var(--graphite); border-bottom:1px solid #667066; }
    .menu-open .main-menu { display:block; }
    .main-menu ul { flex-wrap:wrap; gap:0 22px; }
    .main-menu .drawer-login { display:inline-flex; color:var(--copper); gap:7px; }
    .desk-login { display:none; }
    .hero { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); min-height:360px; }
    .journal-list,.read-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:730px){
    .lesson,.member-guides,.reading { grid-template-columns:1fr; }
    .lesson-copy h2 br { display:none; }
    .closing-grid { grid-template-columns:1fr 1fr; } .closing-brand { grid-column:1/-1; }
}
@media(max-width:660px){
    :root { --gutter:15px; }
    .mast-inner { min-height:56px; }
    .wordmark { gap:5px; } .wordmark img { width:27px; height:27px; } .wordmark>span { font-size:1.45rem; }
    .mast .primary-action { min-height:41px; padding:6px 10px; font-size:.81rem; }
    .nav-toggle { width:40px; height:40px; }
    .hero { grid-template-columns:minmax(0,1fr) minmax(0,1fr); min-height:0; gap:0; padding:12px var(--gutter); }
    .hero-frame { padding:15px 12px; border-left-width:2px; }
    .hero-brand { font-size:clamp(2.3rem,7.3vw,3.5rem); }
    .hero-heading { text-wrap:initial; font-size:1.24rem; }
    .hero-intro { margin:9px 0 13px; font-size:.89rem; }
    .hero-actions { gap:6px; }
    .hero-actions .action { min-height:43px; padding:6px 10px; font-size:.84rem; }
    .cover-art { align-self:center; width:100%; aspect-ratio:2/3; }
    .cover-art img { object-fit:contain; object-position:center; }
    .section-head,.journal-heading { gap:7px; }
    .section-head h2,.journal-heading h2 { font-size:1.42rem; } .section-head .text-link,.journal-controls { font-size:.8rem; }
    .topic-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
    .topic { min-height:158px; }
    .topic-casino { grid-column:1/-1; min-height:168px; }
    .topic-caption { padding:9px 10px; } .topic-caption h3 { font-size:1.1rem; }
    .lesson { padding:19px 15px; gap:12px; }
    .touch-demo { padding:7px 8px 13px; } .touch-demo label { font-size:.8rem; padding-inline:6px; }
    .touch-result { gap:10px; } .lights { padding:6px 4px; gap:2px; }
}
@media(max-width:480px){
    .hero { display:flex; flex-direction:column; padding:0 var(--gutter) var(--gutter); }
    .hero-frame { order:-1; padding:20px 14px; width:100%; margin-top:var(--gutter); }
    .cover-art { width:100%; flex:0 0 auto; aspect-ratio:2/3; }
    .hero-brand { font-size:clamp(3.2rem,12vw,4.15rem); }
    .hero-heading { font-size:clamp(1.2rem,5.2vw,1.55rem); }
    .hero-intro { margin:7px 0 12px; }
}
@media(max-width:365px){
    :root { --gutter:10px; }
    .journal-list,.read-grid { grid-template-columns:1fr; }
    .mast .primary-action .ui-icon { display:none; }
    .hero-actions .action { padding-inline:7px; }
    .touch-result { align-items:flex-start; }
    .touch-demo label { font-size:.76rem; padding-inline:5px; }
}
@media(prefers-reduced-motion:reduce){
    *, *::before, *::after { transition:none !important; scroll-behavior:auto !important; }
}