/* ==========================================================================
   Chaayen "Golden Hour" theme — v2 visual refresh (2026-09-24)
   Loaded LAST on every page (just before </head>) so it sits on top of
   style.css, the per-page inline <style> blocks, nav.css and cro.css.
   Pure presentation: no content, URLs, schema or ad code depend on it.
   To roll back the whole refresh: remove the <link href="/theme.css"> line.
   ========================================================================== */
:root{
  --gh-ink:#1E1008; --gh-tea:#2A1508; --gh-tea2:#3B200F;
  --gh-orange:#EA7A1F; --gh-deep:#B4500F; --gh-deeper:#8F3D0A; --gh-gold:#F2B347;
  --gh-paper:#FBF3E6; --gh-cream:#FFF9F0; --gh-milk:#FFEFD9; --gh-leaf:#3F6B4E;
  --gh-line:rgba(42,21,8,.10); --gh-text:#33200F; --gh-muted:#6E5643;
  --gh-r:20px; --gh-r-sm:14px;
  --gh-sh1:0 1px 2px rgba(42,21,8,.05),0 8px 24px rgba(42,21,8,.07);
  --gh-sh2:0 2px 6px rgba(42,21,8,.06),0 22px 50px rgba(42,21,8,.15);
  /* re-point the legacy tokens every page already uses */
  --orange:#EA7A1F; --orange-deep:#B4500F; --paper:#FBF3E6; --ink:#1E1008; --milk:#FFEFD9;
}

/* ── Base ───────────────────────────────────────────────────────────────── */
html body{
  background:
    radial-gradient(1100px 420px at 50% -140px,rgba(234,122,31,.13),transparent 70%),
    var(--gh-paper);
  color:var(--gh-text);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
html body h1,html body h2,html body h3{color:var(--gh-ink);letter-spacing:-.012em;font-optical-sizing:auto}
::selection{background:rgba(234,122,31,.28)}
html body a:focus-visible,html body button:focus-visible,html body summary:focus-visible{outline:3px solid var(--gh-gold);outline-offset:3px;border-radius:6px}

/* ── Navigation ─────────────────────────────────────────────────────────── */
html body .chy-nav{background:rgba(255,249,240,.9);border-bottom:1px solid var(--gh-line);box-shadow:0 1px 0 rgba(255,255,255,.6) inset}
html body .chy-nav::before{content:"";display:block;height:3px;background:linear-gradient(90deg,var(--gh-tea) 0%,var(--gh-deep) 35%,var(--gh-orange) 65%,var(--gh-gold) 100%)}
html body .chy-nav-inner{padding:12px 24px}
html body .chy-logo{font-size:23px;letter-spacing:.04em}
html body .chy-logo b{color:var(--gh-orange)}
html body .chy-menu{gap:6px}
html body .chy-menu > a,html body .chy-menu .chy-drop-toggle{font-size:14.5px;font-weight:600;color:var(--gh-ink);padding:8px 12px;border-radius:999px;transition:background .15s ease,color .15s ease}
html body .chy-menu > a:hover,html body .chy-menu .chy-drop-toggle:hover{background:rgba(234,122,31,.10);color:var(--gh-deep)}
html body .chy-menu a.chy-cta{background:var(--gh-tea);color:#FFF4E4!important;padding:9px 18px;margin-left:6px;box-shadow:0 6px 16px rgba(42,21,8,.18)}
html body .chy-menu a.chy-cta:hover{background:var(--gh-deep)!important}
html body .chy-submenu{border-radius:16px;border:1px solid var(--gh-line);box-shadow:var(--gh-sh2)}
@media(max-width:900px){
  html body .chy-menu{background:var(--gh-cream);padding:10px 14px 16px}
  html body .chy-menu > a,html body .chy-menu .chy-drop-toggle{font-size:16px;padding:12px 12px;border-radius:12px}
  html body .chy-menu a.chy-cta{margin:8px 0 0;text-align:center}
}

/* ── Announcement bar (homepage) ───────────────────────────────────────── */
html body .announce{background:linear-gradient(90deg,var(--gh-tea),#4A2410 60%,var(--gh-tea));letter-spacing:.01em}
html body .announce a{color:var(--gh-gold)}

/* ── Buttons ────────────────────────────────────────────────────────────── */
html body .btn,html body .btn-orange,html body .btn-dark,html body .cta-btn{border-radius:999px;letter-spacing:.01em}
html body .btn-orange,html body .btn-dark,html body .cta-btn,html body article .btn{background:linear-gradient(180deg,#C25A12,var(--gh-deep));color:#fff;box-shadow:0 8px 20px rgba(180,80,15,.30)}
html body .btn-orange:hover,html body .btn-dark:hover,html body .cta-btn:hover,html body article .btn:hover{background:linear-gradient(180deg,var(--gh-deep),var(--gh-deeper));transform:translateY(-2px);box-shadow:0 12px 26px rgba(180,80,15,.36)}

/* ── Article pages ──────────────────────────────────────────────────────── */
html body article.wrap{max-width:780px;padding-top:40px}
html body .crumbs{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;opacity:1;color:var(--gh-muted);margin-bottom:18px}
html body .crumbs a{color:var(--gh-deep);text-decoration:none}
html body .crumbs a:hover{text-decoration:underline}
html body article h1{font-size:clamp(36px,5.6vw,58px);line-height:1.06;font-weight:600;margin-bottom:16px;letter-spacing:-.02em}
html body .byline{opacity:1;gap:8px;font-size:13px;color:var(--gh-muted);margin-bottom:26px}
html body .byline span:first-child{background:var(--gh-milk);color:var(--gh-deep);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:11.5px;border-radius:999px;padding:4px 11px}
html body article.wrap > img:first-of-type{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:24px;box-shadow:var(--gh-sh2)}
@media(min-width:960px){html body article.wrap > img:first-of-type{width:calc(100% + 120px);max-width:none;margin-left:-60px}}
html body article p,html body article li{line-height:1.78}
html body article p{color:var(--gh-text)}
html body article .lede{font-size:20.5px;line-height:1.65;color:var(--gh-ink);margin:32px 0 28px}
html body article .lede::first-letter{font-family:'Fraunces',Georgia,serif;float:left;font-size:3.3em;line-height:.86;font-weight:600;color:var(--gh-orange);margin:.06em .1em 0 0}
html body article h2{font-size:clamp(26px,3.4vw,33px);font-weight:600;margin:56px 0 16px;scroll-margin-top:90px}
html body article h2::before{content:"";display:block;width:40px;height:4px;border-radius:4px;margin-bottom:16px;background:linear-gradient(90deg,var(--gh-orange),var(--gh-gold))}
html body article h3{color:var(--gh-deep);font-size:21px}
html body article p a,html body article li a,html body article td a{text-decoration-color:rgba(234,122,31,.55);text-decoration-thickness:1.5px;text-underline-offset:3px}
html body article p a:hover,html body article li a:hover{text-decoration-color:var(--gh-deep)}
html body article strong{color:var(--gh-ink)}

/* Table of contents */
html body .toc{background:#fff;border:1px solid var(--gh-line);border-left:0;border-radius:var(--gh-r);box-shadow:var(--gh-sh1);padding:22px 26px;position:relative;overflow:hidden}
html body .toc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,var(--gh-orange),var(--gh-gold))}
html body .toc .toc-h{letter-spacing:.14em;color:var(--gh-deep)}
html body .toc ol{counter-reset:tc;list-style:none;margin-left:0}
html body .toc li{counter-increment:tc;position:relative;padding-left:34px;margin:6px 0}
html body .toc li::before{content:counter(tc);position:absolute;left:0;top:.2em;width:22px;height:22px;border-radius:50%;background:var(--gh-milk);color:var(--gh-deep);font-size:12px;font-weight:700;display:grid;place-items:center}
html body .toc a{color:var(--gh-ink);text-decoration:none}
html body .toc a:hover{color:var(--gh-deep)}
@media(min-width:720px){html body .toc ol{columns:2;column-gap:28px}html body .toc li{break-inside:avoid}}

/* Callouts */
html body .note,html body .feature-box{background:linear-gradient(135deg,#FFF3E2,#FFF9F1);border:1px solid rgba(234,122,31,.22);border-left:0;border-radius:var(--gh-r-sm);box-shadow:inset 5px 0 0 var(--gh-orange);padding:20px 24px 20px 28px;color:var(--gh-text)}

/* Product / affiliate cards — the money blocks */
html body .product{background:#fff;border:1px solid var(--gh-line);border-radius:var(--gh-r);box-shadow:var(--gh-sh1);padding:18px 22px;gap:20px;transition:transform .18s ease,box-shadow .18s ease;position:relative}
html body .product:hover{transform:translateY(-2px);box-shadow:var(--gh-sh2)}
html body .product img{width:104px;height:104px;border-radius:14px;box-shadow:0 4px 12px rgba(42,21,8,.12)}
html body .product strong{font-family:'Fraunces',Georgia,serif;font-size:18px;font-weight:600;color:var(--gh-ink)}
html body .product p{opacity:1;color:var(--gh-muted)}
html body .product a[rel~="sponsored"],html body .product a[href*="amazon."],html body .product a[href*="lazada"],html body .product a[href*="gumroad"]{display:inline-block;background:linear-gradient(180deg,#C25A12,var(--gh-deep));color:#fff!important;text-decoration:none!important;padding:9px 18px;border-radius:999px;font-size:14.5px;font-weight:700;box-shadow:0 6px 14px rgba(180,80,15,.25);margin:2px 8px 2px 0;transition:transform .15s ease}
html body .product a[rel~="sponsored"]:hover,html body .product a[href*="amazon."]:hover,html body .product a[href*="lazada"]:hover{transform:translateY(-1px);background:linear-gradient(180deg,var(--gh-deep),var(--gh-deeper))}
@media(max-width:520px){html body .product{flex-direction:column;align-items:flex-start;text-align:left}html body .product img{width:100%;height:170px}}

/* Tables */
html body article table,html body .wrap table{border-collapse:separate;border-spacing:0;border:1px solid var(--gh-line);border-radius:16px;box-shadow:var(--gh-sh1);background:#fff}
@media(min-width:641px){html body article table,html body .wrap table{overflow:hidden}}
@media(max-width:640px){html body article table,html body .wrap table{overflow-x:auto}}
html body article th{background:var(--gh-tea);color:#FFF4E4;font-weight:600;letter-spacing:.01em}
html body article tr:nth-child(even) td{background:#FFFAF3}
html body article td,html body article th{border-bottom:1px solid var(--gh-line)}
html body article tr:last-child td{border-bottom:0}

/* FAQ */
html body .faq details{background:#fff;border:1px solid var(--gh-line);border-radius:16px;box-shadow:var(--gh-sh1);padding:0;transition:box-shadow .18s ease}
html body .faq details[open]{box-shadow:var(--gh-sh2)}
html body .faq summary{list-style:none;padding:18px 56px 18px 22px;position:relative;font-size:17.5px}
html body .faq summary::-webkit-details-marker{display:none}
html body .faq summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;background:var(--gh-milk);color:var(--gh-deep);display:grid;place-items:center;font:600 20px/1 system-ui,sans-serif;transition:transform .2s ease,background .2s ease}
html body .faq details[open] summary::after{transform:translateY(-50%) rotate(45deg);background:var(--gh-orange);color:#fff}
html body .faq details > *:not(summary){padding:0 22px 18px;margin-top:0}

/* Recipe card */
html body .recipe-card{border-radius:24px;box-shadow:var(--gh-sh2);border:1px solid var(--gh-line);overflow:hidden}

/* Disclosure */
html body .disclosure{opacity:1;color:var(--gh-muted);border-top:1px dashed var(--gh-line);padding-top:16px}

/* ── Listing / hub pages (style.css family) ────────────────────────────── */
html body .blog-index{padding-top:64px}
html body .index-header h1{letter-spacing:-.025em}
html body .index-header p{color:var(--gh-muted)}
html body .viral-card,html body .card,html body .path,html body .lab-card,html body .vcard,html body .pl-card{border-radius:var(--gh-r);border:1px solid var(--gh-line);box-shadow:var(--gh-sh1)}
html body .viral-card,html body .card{overflow:hidden}
html body .viral-card img,html body .card img{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
html body .viral-card:hover,html body .card:hover,html body .path:hover{transform:translateY(-4px);box-shadow:var(--gh-sh2)}
html body .viral-card:hover img,html body .card:hover img{transform:scale(1.045)}
html body .viral-card-content h3,html body .card h3{letter-spacing:-.01em}
html body .badge,html body .tag{background:var(--gh-milk);color:var(--gh-deep);border:1px solid rgba(234,122,31,.2)}
html body .filter-btn.active{background:var(--gh-tea);color:#fff}
@media(max-width:640px){html body .viral-card:hover,html body .card:hover{transform:none}}

/* ── Homepage ───────────────────────────────────────────────────────────── */
html body .hero-grid{padding-top:76px;padding-bottom:110px}
html body .hero .thai{font-size:14px;letter-spacing:.2em;color:var(--gh-gold);display:inline-block;border:1px solid rgba(242,179,71,.45);border-radius:999px;padding:6px 14px;background:rgba(42,21,8,.35)}
html body .hero h1{letter-spacing:-.025em;line-height:1.02}
html body .hero h1 em{color:var(--gh-gold)}
html body .hero-card{border-radius:24px;transform:rotate(1.2deg);transition:transform .3s ease}
html body .hero-card:hover{transform:rotate(0) translateY(-4px)}
html body .proof > div{border-left:2px solid rgba(242,179,71,.5);padding-left:14px}
html body .eyebrow{letter-spacing:.2em;color:var(--gh-deep)}
html body .section-head h2{letter-spacing:-.02em}
html body .paths-grid .path::before{height:4px}
html body .totm{border-radius:24px;box-shadow:var(--gh-sh2)}
html body .gear{background:radial-gradient(900px 400px at 85% 0%,rgba(234,122,31,.22),transparent 60%),linear-gradient(180deg,var(--gh-tea),#1C0D04)}
html body .gear-card{border-radius:var(--gh-r);background:rgba(255,244,228,.06);border:1px solid rgba(255,244,228,.12);backdrop-filter:blur(2px)}
html body .gear-card .pick{color:var(--gh-gold)}
html body .capture{border-radius:28px;background:radial-gradient(600px 300px at 90% 10%,rgba(242,179,71,.45),transparent 60%),linear-gradient(135deg,#9E430B,var(--gh-orange))}
html body .ess-strip{background:#fff!important;box-shadow:var(--gh-sh1)}
@media(max-width:640px){
  html body .hero-grid{padding-top:34px;padding-bottom:56px}
  html body .hero-right{display:none}
  html body .hero .thai{font-size:12px}
  html body .proof > div{padding-left:10px}
}

/* ── Unified footer ─────────────────────────────────────────────────────── */
html body footer.chy-foot{background:radial-gradient(900px 360px at 10% 0%,rgba(234,122,31,.16),transparent 60%),linear-gradient(180deg,#26130A,#170A03);color:#E9D6BF;padding:0;margin-top:80px;text-align:left;font-size:15px;position:relative}
html body footer.chy-foot::before{content:"";display:block;height:4px;background:linear-gradient(90deg,var(--gh-tea),var(--gh-deep),var(--gh-orange),var(--gh-gold))}
.chy-foot .cf-inner{max-width:1140px;margin:0 auto;padding:56px 24px 28px;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
.chy-foot .cf-logo{font-family:'Fraunces',Georgia,serif;font-weight:700;font-size:26px;letter-spacing:.04em;color:#FFF4E4;text-decoration:none}
.chy-foot .cf-logo b{color:var(--gh-orange);font-weight:700}
.chy-foot .cf-brand p{margin:12px 0 18px;max-width:30em;line-height:1.6;color:#D9C3AA}
.chy-foot .cf-cta{display:inline-block;background:var(--gh-orange);color:#1E1008!important;font-weight:700;text-decoration:none;border-radius:999px;padding:11px 20px;font-size:14.5px;box-shadow:0 8px 20px rgba(234,122,31,.25)}
.chy-foot .cf-cta:hover{background:var(--gh-gold)}
.chy-foot h4{font-family:'Anuphan',system-ui,sans-serif;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gh-gold);margin:6px 0 14px;font-weight:700}
.chy-foot .cf-col a{display:block;color:#E9D6BF;text-decoration:none;padding:5px 0;font-size:15px}
.chy-foot .cf-col a:hover{color:#fff}
.chy-foot .cf-share{max-width:1140px;margin:0 auto;padding:0 24px 24px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;color:#BFA88F}
.chy-foot .cf-share a{color:#FFF4E4;text-decoration:none;border:1px solid rgba(255,244,228,.2);border-radius:999px;padding:6px 14px;font-weight:600}
.chy-foot .cf-share a:hover{background:var(--gh-orange);border-color:var(--gh-orange);color:#1E1008}
.chy-foot .cf-bottom{border-top:1px solid rgba(255,244,228,.12);max-width:1140px;margin:0 auto;padding:20px 24px 30px;display:flex;justify-content:space-between;gap:10px 24px;flex-wrap:wrap;font-size:13px;color:#A8917A}
.chy-foot .cf-bottom p{margin:0;max-width:46em;line-height:1.55}
html body .chy-foot .chy-legal-links{position:static;margin:0;opacity:1;text-align:left;font-size:13px}
html body .chy-foot .chy-legal-links a{color:#E9D6BF;text-decoration:none;display:inline;padding:0}
html body .chy-foot .chy-legal-links a:hover{color:var(--gh-orange)}
@media(max-width:900px){.chy-foot .cf-inner{grid-template-columns:1fr 1fr}.chy-foot .cf-brand{grid-column:1/-1}}
@media(max-width:520px){.chy-foot .cf-inner{grid-template-columns:1fr 1fr;gap:26px 18px;padding-top:44px}.chy-foot .cf-col a{padding:7px 0}}

@media print{html body .chy-nav::before,html body footer.chy-foot{display:none}}

/* ==========================================================================
   Palette v2.1 — "Rainy-season fresh" (2026-09-24, UX review)
   Why: the v2 palette was one hue family end to end (brown/orange/cream), so
   orange was doing every job — decoration, badges, TOC, callouts AND the
   money buttons — which dulls CTA salience and reads heavy/dated.
   Rule now: ORANGE = action (buy / check price / primary buttons).
             PANDAN JADE = editorial wayfinding (TOC, callouts, tags, crumbs, FAQ).
             Lighter warm-white paper instead of yellow-beige.
   All text pairs checked ≥ 4.5:1 (WCAG AA); decorative large marks ≥ 3:1.
   ========================================================================== */
:root{
  --gh-paper:#FCF8F2; --paper:#FCF8F2;
  --gh-jade:#2F6B55; --gh-jade-2:#8DB89A; --gh-jade-soft:#E6F0EA; --gh-jade-tint:#F2F8F4;
  --gh-orange-text:#C9600F;          /* orange that passes 3:1 on paper for large marks */
  --gh-btn-a:#B8530F; --gh-btn-b:#A5480C; /* white text ≥ 4.9:1 */
}
html body{background:radial-gradient(1100px 420px at 50% -140px,rgba(242,179,71,.12),transparent 70%),var(--gh-paper)}
/* brand orange as text on light surfaces → darker step */
html body .chy-logo b{color:var(--gh-orange-text)}
html body article .lede::first-letter{color:var(--gh-orange-text)}
/* action colour: slightly deeper so white labels pass AA */
html body .btn-orange,html body .btn-dark,html body .cta-btn,html body article .btn,
html body .product a[rel~="sponsored"],html body .product a[href*="amazon."],html body .product a[href*="lazada"],html body .product a[href*="gumroad"]{background:linear-gradient(180deg,var(--gh-btn-a),var(--gh-btn-b))}
/* editorial wayfinding → pandan jade */
html body article h2::before{background:linear-gradient(90deg,var(--gh-jade),var(--gh-jade-2))}
html body .crumbs a{color:var(--gh-jade)}
html body .byline span:first-child{background:var(--gh-jade-soft);color:var(--gh-jade)}
html body .toc::before{background:linear-gradient(180deg,var(--gh-jade),var(--gh-jade-2))}
html body .toc .toc-h{color:var(--gh-jade)}
html body .toc li::before{background:var(--gh-jade-soft);color:var(--gh-jade)}
html body .toc a:hover{color:var(--gh-jade)}
html body .note,html body .feature-box{background:linear-gradient(135deg,var(--gh-jade-tint),#FBFDFB);border-color:rgba(47,107,85,.20);box-shadow:inset 5px 0 0 var(--gh-jade)}
html body .faq summary::after{background:var(--gh-jade-soft);color:var(--gh-jade)}
html body .faq details[open] summary::after{background:var(--gh-jade);color:#fff}
html body .badge,html body .tag{background:var(--gh-jade-soft);color:var(--gh-jade);border-color:rgba(47,107,85,.18)}
html body .eyebrow{color:var(--gh-jade)}
html body .filter-btn.active{background:var(--gh-jade);color:#fff}
html body a:focus-visible,html body button:focus-visible,html body summary:focus-visible{outline-color:var(--gh-jade)}
/* dark-section fixes found in the review */
html body .gear a:not(.btn):not(.gear-cta){color:var(--gh-gold)!important}           /* was deep orange on brown ≈2.9:1 */
html body .gear .disclosure{opacity:1;color:#CDB89F}                      /* affiliate disclosure must be legible */
html body .paths-grid .path:nth-child(2)::before{background:var(--gh-jade)}