/* ak-ui.css — shared AUDIKUNG page components (the Home look, 2026-10-16).
   Audi: "ช่วยจำ design เหล่านี้ไปใช้กับหน้าอื่นๆด้วย เพราะตอนนี้เว็ปเราหน้าตาดูไม่ค่อยเหมือนกันเลย".
   Spec and rules: Design.md §16. Opt-in per page: <link rel="stylesheet" href="/assets/ak-ui.css">.
   Everything is namespaced .aku-* / --aku-* (distinct from the older ak-paper.css / about-v8 --ak-* names) so loading it never restyles a page by itself. */
:root{
  --aku-night:#081326; --aku-night-2:#0d1d38; --aku-day:#eef2f8;
  --aku-ink:#1b2d44; --aku-ink-2:#435167; --aku-on-night:#f0f2f8; --aku-on-night-2:#c9d2e3;
  --aku-paper:#fffdfa; --aku-paper-2:#fffaf0; --aku-paper-line:#cfbf9f;
  --aku-gold:#E5C586; --aku-gold-ink:#172b43; --aku-gold-line:#a58b52;
  --aku-w-about:#ee765d; --aku-w-finance:#10b981; --aku-w-knowledge:#3b82f6; --aku-w-focus:#14b8a6; --aku-w-interests:#a855f7; --aku-w-contact:#06c755;
  --aku-radius:14px; --aku-ease:cubic-bezier(.16,1,.3,1);
  --aku-font-head:'Outfit','Mitr','Plus Jakarta Sans',system-ui,sans-serif; --aku-font-body:'Plus Jakarta Sans','Sarabun',system-ui,sans-serif;
}
/* section heading: one emoji eyebrow + plain heading (never gradient text) */
.aku-eyebrow{display:inline-flex;align-items:center;gap:6px;font:600 .95rem/1.4 var(--aku-font-head);color:var(--aku-on-night-2)}
.aku-title{margin:8px 0 10px;font:700 clamp(1.9rem,3.6vw,3rem)/1.2 var(--aku-font-head);color:var(--aku-on-night);text-wrap:balance}
.aku-lede{margin:0;max-width:62ch;font:400 1.05rem/1.7 var(--aku-font-body);color:var(--aku-on-night-2)}
html[data-theme=light] .aku-eyebrow{color:var(--aku-ink-2)}
html[data-theme=light] .aku-title{color:var(--aku-ink)}
html[data-theme=light] .aku-lede{color:var(--aku-ink-2)}

/* reading surface: cream paper with a 3D bottom edge, upright (no rotate on text boxes) */
.aku-paper{background:var(--aku-paper);color:var(--aku-ink);border:1px solid var(--aku-paper-line);border-bottom:4px solid var(--aku-paper-line);border-radius:var(--aku-radius);padding:clamp(18px,2.4vw,28px)}
.aku-paper :is(h2,h3,h4){color:var(--aku-ink);font-family:var(--aku-font-head)}
.aku-paper p{color:var(--aku-ink-2);font:400 1rem/1.65 var(--aku-font-body)}

/* buttons: one gold primary per area, quiet secondary, red-outline danger; 44px targets */
.aku-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:8px;border:1px solid #708298;background:#fff;color:var(--aku-ink);font:600 1rem/1.2 var(--aku-font-head);text-decoration:none;cursor:pointer;transition:translate 160ms var(--aku-ease),background 160ms ease,border-color 160ms ease}
.aku-btn:hover{border-color:var(--aku-ink)}
.aku-btn:active{translate:0 2px}
.aku-btn:focus-visible{outline:3px solid var(--aku-gold);outline-offset:3px}
.aku-btn-primary{background:var(--aku-gold);color:var(--aku-gold-ink);border-color:var(--aku-gold-line);border-bottom-width:3px}
.aku-btn-primary:hover{background:#efd59a;border-color:#8a6a1f}
.aku-btn-danger{color:#9b2c1f;border-color:#b84a3a}
.aku-on-night .aku-btn:not(.aku-btn-primary){background:transparent;color:var(--aku-on-night);border-color:color-mix(in srgb,var(--aku-on-night) 40%,transparent)}

/* door / route card: tinted emoji tile + title + subtitle + round arrow that turns gold */
.aku-doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.aku-door{--aku-tint:#e8eef6;display:grid;grid-template-columns:56px minmax(0,1fr) 44px;align-items:center;gap:14px;padding:18px;background:var(--aku-paper);color:var(--aku-ink);border:1px solid var(--aku-paper-line);border-bottom:4px solid var(--aku-paper-line);border-radius:var(--aku-radius);text-decoration:none;transition:translate 240ms var(--aku-ease),border-color 240ms,background 240ms}
.aku-door-icon{width:56px;height:56px;display:grid;place-items:center;border-radius:14px;background:var(--aku-tint);font-size:1.7rem;line-height:1}
.aku-door strong{display:block;font:600 1.15rem/1.4 var(--aku-font-head);color:var(--aku-ink)}
.aku-door small{display:block;font:400 .98rem/1.55 var(--aku-font-body);color:var(--aku-ink-2)}
.aku-door-arrow{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:1px solid #8e9bad;background:#fff;color:var(--aku-ink)}
.aku-door:is(:hover,:focus-visible){translate:0 -4px;border-color:var(--aku-gold-line);background:var(--aku-paper-2)}
.aku-door:is(:hover,:focus-visible) .aku-door-arrow{background:var(--aku-gold);border-color:var(--aku-gold-line);color:var(--aku-gold-ink)}
.aku-door:focus-visible{outline:3px solid var(--aku-gold);outline-offset:3px}
.aku-door[data-world=finance]{--aku-tint:#dcf1e5}.aku-door[data-world=knowledge]{--aku-tint:#dde8fb}.aku-door[data-world=focus]{--aku-tint:#d7f3ef}
.aku-door[data-world=interests]{--aku-tint:#efe2f3}.aku-door[data-world=about]{--aku-tint:#fde4dc}.aku-door[data-world=gold]{--aku-tint:#fbedc9}

/* chip / pill status */
.aku-chip{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:4px 12px;border-radius:999px;font:600 .9rem/1.2 var(--aku-font-head);background:#fef3c7;color:#92400e;border:1px solid #f59e0b}

/* mascot sticker: die-cut PNG (Scripts/web/sticker_diecut.py), one pose per section, gentle float */
.aku-sticker{display:block;object-fit:contain;filter:drop-shadow(0 4px 0 #07152b22);animation:aku-float 4.8s ease-in-out infinite}
@keyframes aku-float{0%,100%{translate:0 0}50%{translate:0 -6px}}

@media(prefers-reduced-motion:reduce){.aku-btn,.aku-door{transition:none}.aku-door:is(:hover,:focus-visible){translate:none}.aku-sticker{animation:none}}
html[data-motion=paused] :is(.aku-sticker){animation:none}
html[data-motion=paused] .aku-door:is(:hover,:focus-visible){translate:none}
@media(max-width:720px){.aku-door{grid-template-columns:48px minmax(0,1fr) 40px;gap:12px;padding:14px}.aku-door-icon{width:48px;height:48px;font-size:1.45rem}.aku-door-arrow{width:40px;height:40px}}

/* 16.2 Object finish — B · leather cover + paper page (Audi 2026-10-17 chose "แบบB": "diary เป็นสี luxury blue ไม่สวย … ควรเปลี่ยนสี default").
   Replaces the navy-slate Midnight Luxe. Same language as the About diary door: a leather frame with stitching, warm paper inside, dark ink, both themes.
   Opt-in: give a section's real object .aku-object; pick the cover by the object's job: default oxblood (personal / write-to-Audi),
   .aku-object--cognac (research, tools), .aku-object--cloth (visitors write to each other, guestbook).
   The part that must stand out gets .aku-object-gold (gold label); a button sitting on gold gets .aku-object-btn. */
:root{--aku-cv-a:#7a2e3e;--aku-cv-b:#3e1520;--aku-paper-a:#fffaf0;--aku-paper-b:#f6eedb;--aku-paper-c:#efe4cb;--aku-lux-ink:#2a2118;--aku-lux-ink2:#5a4a36;
  --aku-lux-gold-a:#f2e1b4;--aku-lux-gold-b:#c9ab6c;--aku-lux-gold-ink:#2b2212;--aku-stitch:rgba(229,197,134,.62);
  --aku-lux-foil:linear-gradient(135deg,#f2e1b4 0%,#a8853f 32%,#f6e6bd 55%,#8f6d2e 80%,#e9d3a0 100%)}
.aku-object--cognac{--aku-cv-a:#8a4b2a;--aku-cv-b:#4a2414}
.aku-object--cloth{--aku-cv-a:#2f6b4f;--aku-cv-b:#163a2a}
.aku-object{color:var(--aku-lux-ink);border:14px solid transparent;border-radius:16px;outline:1.5px dashed var(--aku-stitch);outline-offset:-8px;
  background:radial-gradient(140% 90% at 50% 0%,var(--aku-paper-a),var(--aku-paper-b) 70%,var(--aku-paper-c)) padding-box,radial-gradient(120% 80% at 18% 0%,rgba(255,214,190,.2),transparent 55%) border-box,linear-gradient(160deg,var(--aku-cv-a),var(--aku-cv-b)) border-box;
  background-color:var(--aku-paper-b);box-shadow:0 34px 60px -30px rgba(0,0,0,.85),inset 0 0 0 1px rgba(90,60,25,.25)}
html[data-theme=light] .aku-object{box-shadow:0 28px 50px -30px rgba(62,21,32,.5),inset 0 0 0 1px rgba(90,60,25,.25)}
.aku-object :is(p,small,.aku-muted){color:var(--aku-lux-ink2)}
.aku-object :is(input,textarea,select){background:#fffdf7;color:var(--aku-lux-ink);border:1.5px solid #c9ab6c;color-scheme:light}
.aku-object :is(input,textarea)::placeholder{color:#7a6a52}
.aku-object-gold{color:var(--aku-lux-gold-ink);background:linear-gradient(115deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,0) 38%),linear-gradient(180deg,var(--aku-lux-gold-a),var(--aku-lux-gold-b))}
.aku-object-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:10px;border:1px solid #3e1520;background:#5a1f2c;color:#f4dfa8;font:600 1rem/1.3 var(--aku-font-head);text-decoration:none;box-shadow:0 3px 0 #0a1428;transition:translate 160ms var(--aku-ease)}
.aku-object-btn:active{translate:0 2px}
@media(prefers-reduced-motion:reduce){.aku-object-btn{transition:none}}