/* ==========================================
   THE UNPOPULAR CLUB
   Aesthetic: Editorial · Calm · Journal
   Theme:     Light — Quiet Confidence
   ========================================== */

/* GOOGLE FONTS — Sarabun fallback */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&family=Sarabun:wght@300;400;500;600;700&display=swap');

/* LOCAL FONTS */
@font-face { font-family:'Sukhumvit Set'; src:url('assets/fonts/sukhumvitset-thin.ttf')     format('truetype'); font-weight:100; font-style:normal; font-display:swap; }
@font-face { font-family:'Sukhumvit Set'; src:url('assets/fonts/sukhumvitset-light.ttf')    format('truetype'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Sukhumvit Set'; src:url('assets/fonts/sukhumvitset-text.ttf')     format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Sukhumvit Set'; src:url('assets/fonts/sukhumvitset-medium.ttf')   format('truetype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Sukhumvit Set'; src:url('assets/fonts/sukhumvitset-semibold.ttf') format('truetype'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Sukhumvit Set'; src:url('assets/fonts/sukhumvitset-bold.ttf')     format('truetype'); font-weight:700; font-style:normal; font-display:swap; }

/* ── DESIGN TOKENS ──────────────────────── */
/*  Sticker Scrapbook
    หมึกสีเดียว กระดาษสีเดียว พาสเทลสี่ตัวเป็นพื้นเท่านั้น
    ห้ามใช้พาสเทลเป็นสีตัวอักษร ห้าม gradient ห้าม blur
    ลำดับ Sky นำ · Matcha รอง · Pink กับ Butter เสริม
    สลับสีไปรอบหน้า อย่ากองรวมกัน                                */
:root {
  --ink:        #2C2B2B;
  --paper:      #FFFEFB;
  --cream:      #F5EEE2;

  /* Sky กับ Matcha นำ · Pink กับ Butter เป็นคู่เสริม */
  --sky:         #B9E1E5;
  --sky-light:   #D2ECEE;
  --matcha:      #D3E2B7;
  --matcha-dark: #BBD28F;
  --pink:        #FFC0CD;
  --pink-light:  #FFDADF;
  --butter:      #FFF4B3;
  --butter-light:#FCEB97;

  --shadow-hard:   8px 8px 0 var(--ink);
  --shadow-hard-sm:4px 4px 0 var(--ink);
  --border-solid:  2px solid var(--ink);
  --border-dashed: 2px dashed var(--ink);

  /* ชื่อเดิมที่โค้ดทั้งเว็บเรียกใช้ ชี้กลับมาที่หมึกกับกระดาษ
     สเปกบอกว่าไม่มีสีตัวอักษรรอง ใช้ขนาดกับน้ำหนักแทน           */
  --white:      #FFFEFB;
  --black:      #2C2B2B;
  --g1:         #2C2B2B;
  --g2:         #2C2B2B;
  --g3:         #2C2B2B;

  --bg-base:    #FFFEFB;
  --bg-soft:    #F5EEE2;
  --bg-muted:   #D2ECEE;
  --cream-mid:  #F5EEE2;
  --cream-dark: #D2ECEE;

  --ink-mid:    #2C2B2B;
  --ink-light:  #2C2B2B;

  --accent:       #2C2B2B;
  --accent-hover: #2C2B2B;
  --accent-deep:  #2C2B2B;
  --accent-light: #D2ECEE;

  --sage:         #2C2B2B;
  --sage-light:   #D3E2B7;
  --violet:       #2C2B2B;
  --violet-light: #D3E2B7;
  --hortensia-ui: #2C2B2B;

  --border:      #2C2B2B;
  --border-bold: #2C2B2B;
  --divider:     rgba(44,43,43,.18);

  /* เงาแข็งทั้งหมด ไม่มี blur */
  --shadow-xs: 2px 2px 0 var(--ink);
  --shadow-sm: 4px 4px 0 var(--ink);
  --shadow-md: 6px 6px 0 var(--ink);
  --shadow-lg: 8px 8px 0 var(--ink);

  --glass-bg:     #FFFEFB;
  --glass-border: #2C2B2B;
  --glass-shadow: 0 2px 0 var(--ink);
  --glass-blur:   none;

  --hl-teal:    #D2ECEE;
  --hl-sage:    #D3E2B7;
  --hl-violet:  #FFDADF;

  --brand-dark: #2C2B2B;

  --font:         'Sukhumvit Set','Sarabun','Noto Sans Thai',sans-serif;
  --font-display: 'Space Grotesk','Sukhumvit Set','Sarabun',sans-serif;
  --font-mono:    'Space Mono','Sukhumvit Set',monospace;
  --max-w:  1200px;
  --pad:    24px;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
}

/* ── RESET ──────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; scroll-behavior:smooth; }

body {
  font-family: var(--font);
  font-weight: 400;
  color: var(--ink);
  background-color: var(--paper);
  /* กระดาษตาราง จางมาก 40px */
  background-image:
    repeating-linear-gradient(to right,  rgba(44,43,43,.05) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(to bottom, rgba(44,43,43,.05) 0 1px, transparent 1px 40px);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

img { max-width:100%; height:auto; display:block; background-color:var(--bg-muted); }
a   { color:inherit; text-decoration:none; }
ul  { list-style:none; }

/* ── TYPOGRAPHY ─────────────────────────── */
h1,h2,h3,h4,h5 {
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* หัวใหญ่ = อารมณ์ · ตัวเล็ก mono = ข้อมูล มีแค่สองระดับนี้ */
/* lowercase เฉพาะหัวใหญ่ ไม่ลงมาถึง h2 h3
   เพราะชื่อสินค้าอย่าง BG5 กับ CareerPathKEY ต้องคงตัวพิมพ์เดิม */
.display, .h1, .h2, .h3 { font-family: var(--font-display); }
.display, .h1 { text-transform: lowercase; }
.keep-case    { text-transform: none !important; }
.display {
  font-size: clamp(3rem, 11vw, 9rem);
  font-weight: 500;
  line-height: 0.94;
  letter-spacing: -0.045em;
}
.h1 { font-size: clamp(2.25rem, 7vw, 5rem);   font-weight:500; line-height:0.98; letter-spacing:-0.04em; }
.h2 { font-size: clamp(1.75rem, 4.5vw, 3.25rem); font-weight:500; line-height:1.04; letter-spacing:-0.03em; }
.h3 { font-size: clamp(1.25rem, 2vw, 1.625rem); }
.h4 { font-size: 1.0625rem; font-weight: 700; }

.body-lg { font-size: 1.125rem; line-height: 1.85; }
.body-md { font-size: 1rem;     line-height: 1.8; }
.body-sm { font-size: 0.875rem; line-height: 1.75; }

/* Editorial eyebrow label */
.label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}

.text-mid   { color: var(--ink-mid); }
.text-light { color: var(--ink-light); }
.text-accent{ color: var(--accent); }

/* Soft marker highlight on text — sits at 58% so the color shows under the baseline */
.hl        { background: linear-gradient(transparent 58%, var(--sky-light) 58%); padding-bottom:2px; }
.hl-sage   { background: linear-gradient(transparent 58%, var(--matcha) 58%); padding-bottom:2px; }
.hl-violet { background: linear-gradient(transparent 58%, var(--hl-violet) 58%); padding-bottom:2px; }

/* ── LAYOUT ─────────────────────────────── */
.container { max-width:var(--max-w); margin:0 auto; padding:0 var(--pad); }
.section    { padding:96px 0; }
.section-lg { padding:128px 0; }

.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }

/* ── GRADIENT UTILITIES ─────────────────── */

/* Card with warm parchment gradient (base → soft) */
.card-gradient {
  background: var(--cream);
}

/* Section with soft warm fade — use as bg on alternating sections */
.bg-gradient {
  background: var(--cream);
}

/* Ambient doodle glow — position:relative parent, ::before pseudo layer */
.doodle-teal::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background: var(--sky-light);
}
.doodle-violet::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background: var(--matcha);
}

/* Inline doodle bg — apply directly to a decorative div */
.doodle-bg-teal   { background: var(--sky-light); }
.doodle-bg-violet { background: var(--matcha); }

/* Section divider — subtle fade separating sections */
.section-divider {
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    rgba(44,43,43,.06) 20%,
    rgba(44,43,43,.10) 50%,
    rgba(44,43,43,.06) 80%,
    transparent
  );
  margin: 0;
  border: none;
}

/* ── CARDS — cut-out paper, hard shadow ── */
.card {
  background: var(--paper);
  border-radius: 4px;
  border: var(--border-solid);
  padding: 32px;
  box-shadow: var(--shadow-hard);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card:hover {
  transform: translate(3px, 3px);
  box-shadow: 5px 5px 0 var(--ink);
}
.card-sm {
  background: var(--paper);
  border-radius: 4px;
  border: var(--border-solid);
  padding: 20px 22px;
  box-shadow: var(--shadow-hard-sm);
}
.card-cream {
  background: var(--cream);
  border-radius: 4px;
  border: var(--border-solid);
  padding: 32px;
  box-shadow: var(--shadow-hard);
}
.card-dark {
  background: var(--ink);
  border-radius: 4px;
  border: var(--border-solid);
  padding: 32px;
  color: var(--paper);
  box-shadow: 8px 8px 0 var(--sky);
}
/* พาสเทลเป็นพื้นการ์ด ตัวอักษรเป็นหมึกเสมอ */
.card-pink   { background: var(--pink-light);   border:var(--border-solid); border-radius:4px; padding:32px; box-shadow:var(--shadow-hard); }
.card-butter { background: var(--butter);       border:var(--border-solid); border-radius:4px; padding:32px; box-shadow:var(--shadow-hard); }
.card-sky    { background: var(--sky-light);    border:var(--border-solid); border-radius:4px; padding:32px; box-shadow:var(--shadow-hard); }
.card-matcha { background: var(--matcha);       border:var(--border-solid); border-radius:4px; padding:32px; box-shadow:var(--shadow-hard); }

/* พื้นเต็มความกว้าง คู่เข้ม ใช้กับ section แล้ววางการ์ดสีอ่อนทับ */
.band-pink   { background: var(--pink); }
.band-butter { background: var(--matcha); }
.band-sky    { background: var(--sky); }
.band-matcha { background: var(--matcha-dark); }
.band-cream  { background: var(--cream); }

/* ── ANNOUNCEMENT BAR ───────────────────── */
.announcement-bar {
  background: var(--brand-dark);
  color: var(--bg-base);
  text-align: center;
  padding: 11px var(--pad);
  font-size: 0.8125rem;
  font-weight: 500;
  position: relative;
  z-index: 101;
}
.announcement-bar a {
  color: var(--bg-base);
  display: inline-flex; align-items:center;
  gap:10px; flex-wrap:wrap; justify-content:center;
  transition: opacity 0.2s;
}
.announcement-bar a:hover { opacity: 0.75; }
.ann-badge {
  background: var(--accent);
  color: white;
  font-size: 0.625rem; font-weight:700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px; flex-shrink:0;
}
.ann-sep { opacity: 0.4; margin: 0 2px; }

/* ── NAV — frosted paper glass ──────────── */
.nav {
  position: sticky; top:0; z-index:100;
  background: var(--paper);
  -webkit-
  border-bottom: 1px solid var(--border-bold);
  box-shadow: var(--shadow-sm);
}
.nav-inner {
  display:flex; align-items:center; justify-content:space-between;
  height:68px; max-width:var(--max-w); margin:0 auto; padding:0 var(--pad);
}
.nav-logo { display:flex; align-items:center; gap:10px; }
.nav-logo img { height:42px; width:auto; border-radius:4px; display:block; mix-blend-mode:multiply; }

.nav-links { display:flex; align-items:center; gap:4px; }
.nav-links a {
  font-size: 0.875rem; font-weight: 600;
  color: var(--ink-mid);
  padding: 7px 14px; border-radius: var(--radius-md);
  transition: color 0.15s, background 0.15s;
  min-height: 36px; display:inline-flex; align-items:center;
}
.nav-links a:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.nav-links a:hover  { color:var(--ink); background:var(--bg-soft); }
.nav-links a.active {
  color:var(--ink);
  background: var(--white);
  box-shadow: var(--shadow-xs);
}

.nav-cta {
  background: var(--ink) !important;
  color: var(--white) !important;
  border-radius: var(--radius-md) !important;
  font-weight: 700 !important;
  padding: 8px 16px !important;
  transition: background 0.2s, transform 0.2s !important;
}
.nav-cta:hover {
  background: var(--accent) !important;
  color: white !important;
  transform: none !important;
  box-shadow: none !important;
}

.nav-hamburger {
  display:none; flex-direction:column; gap:5px;
  cursor:pointer; padding:6px; background:none; border:none;
}
.nav-hamburger span {
  display:block; width:22px; height:2px;
  background:var(--ink); border-radius:2px; transition:all 0.2s;
}

/* ── FLYOUT DRAWER (mobile) ─────────────── */
.flyout-overlay {
  position:fixed; inset:0; z-index:190;
  background: rgba(44,43,43,.35); -webkit-
  opacity:0; pointer-events:none;
  transition: opacity 0.3s;
}
.flyout-overlay.open { opacity:1; pointer-events:auto; }

.nav-mobile {
  position:fixed; top:0; right:0; bottom:0;
  width:min(320px,86vw); z-index:200;
  background: var(--bg-base);
  display:flex; flex-direction:column;
  transform: translateX(105%);
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
  overflow-y:auto;
  border-left: 1px solid var(--border-bold);
  box-shadow: -8px 0 0 var(--ink);
}
.nav-mobile.open { transform: translateX(0); }

.flyout-header {
  display:flex; align-items:center; justify-content:space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}
.flyout-logo { height:38px; width:auto; border-radius:4px; display:block; mix-blend-mode:multiply; }
.flyout-close {
  width:36px; height:36px; border-radius:50%;
  background:var(--bg-soft); border:1px solid var(--border-bold);
  color:var(--ink); font-size:1rem; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background 0.15s;
}
.flyout-close:hover { background:var(--bg-muted); }

.flyout-links {
  flex:1; display:flex; flex-direction:column;
  padding: 8px 0;
}
.flyout-links a {
  font-size: 0.9375rem; font-weight: 600;
  padding: 17px 24px;
  color: var(--ink-mid);
  border-bottom: 1px solid var(--divider);
  display:block; text-decoration:none;
  transition: color 0.15s, background 0.15s;
  min-height: 54px; display:flex; align-items:center;
}
.flyout-links a:hover { color:var(--ink); background:var(--bg-soft); }
.flyout-links a.active {
  color:var(--ink);
  background:var(--bg-soft);
  border-left: 3px solid var(--accent);
  padding-left: 21px;
}

.flyout-cta {
  padding: 20px 24px;
  border-top: 1px solid var(--border);
  display:flex; flex-direction:column; gap:12px;
}

.flyout-lang {
  display:flex; gap:0;
  border:1px solid var(--border-bold);
  border-radius: var(--radius-sm);
  overflow:hidden; width:fit-content;
}
.flyout-lang .lang-opt {
  padding: 7px 16px; font-size:0.75rem; font-weight:700;
  background:transparent; border:none; color:var(--ink-mid);
  cursor:pointer; font-family:var(--font); letter-spacing:0.08em;
  transition: background 0.15s, color 0.15s;
}
.flyout-lang .lang-opt.active { background:var(--ink); color:var(--white); }
.flyout-lang .lang-opt:hover:not(.active) { background:var(--bg-soft); }

/* ── BUTTONS — pill, dashed ink ─────────── */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding: 12px 28px;
  min-height: 44px;               /* WCAG 2.5.5 touch target */
  border-radius: 999px;
  font-family: var(--font); font-size:0.9375rem; font-weight:700;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  letter-spacing:0.01em;
  color: var(--ink);
  border: var(--border-dashed);
  box-shadow: var(--shadow-hard-sm);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.btn:hover  { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--ink); }
.btn:active { transform: translate(4px,4px); box-shadow: none; }
.btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.btn-primary { background: var(--sky); }
.btn-accent  { background: var(--matcha); }
.btn-cream   { background: var(--butter); }
.btn-outline { background: transparent; }
.btn-primary:hover, .btn-accent:hover, .btn-cream:hover, .btn-outline:hover { background: var(--cream); }

/* ปุ่มบนพื้นหมึก */
.card-dark .btn, .footer .btn, .announcement-bar .btn {
  color: var(--ink); background: var(--paper); border-color: var(--ink);
  box-shadow: 4px 4px 0 var(--sky);
}

.btn-sm  { padding:8px 20px; font-size:0.875rem; min-height:36px; }
.btn-lg  { padding:15px 36px; font-size:1rem; }

/* ── HERO ────────────────────────────────── */
.hero { padding:96px 0 88px; background:var(--bg-base); }
.hero-split {
  display:grid; grid-template-columns:1fr 1fr;
  gap:72px; align-items:center;
}
.hero-split.hero-60 { grid-template-columns:3fr 2fr; }

.hero-eyebrow {
  display:inline-block; margin-bottom:20px;
  font-family:var(--font-mono);
  font-size:0.8125rem; font-weight:400;
  letter-spacing:0.1em; text-transform:uppercase;
  color:var(--ink);
}

.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:36px; }

.hero-image-wrapper {
  position:relative;
  border-radius: var(--radius-xl);
  overflow:hidden; aspect-ratio:4/5;
  border: 1px solid var(--border-bold);
  box-shadow: var(--shadow-lg);
}
.hero-image-wrapper img { width:100%; height:100%; object-fit:cover; }
.hero-image-wrapper.square    { aspect-ratio:1; }
.hero-image-wrapper.landscape { aspect-ratio:3/2; }

/* ── PAGE HERO — cinema style, shared by LVD/BG5/About/Contact ── */
.page-hero {
  position: relative;
  height: clamp(560px, 72vh, 800px);
  overflow: hidden;
  background: var(--brand-dark);
}

/* Clickable image link — covers the bg, sits below content */
.page-hero-img-link {
  position: absolute; inset: 0; z-index: 1;
  display: block; cursor: pointer;
  text-decoration: none;
}
.page-hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 6s ease;
}
.page-hero-img-link:hover .page-hero-bg { transform: scale(1.03); }
.page-hero-img-link:focus-visible { outline: 3px solid var(--accent); outline-offset: -4px; }

/* Gradient overlay — heavy left, fades right */
.page-hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(44,43,43,.88) 0%, rgba(44,43,43,.55) 50%, rgba(44,43,43,.20) 100%);
}

/* Content sits above the link */
.page-hero-content {
  position: relative; z-index: 2;
  height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-bottom: 104px;
}
.page-hero-inner { max-width: 640px; display: flex; flex-direction: column; }

/* Badge */
.page-hero-badge {
  display: inline-block; width: fit-content;
  font-size: 0.625rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px; border: 1.5px solid;
  margin-bottom: 8px;
}
.page-hero-badge--open    { background: var(--accent); color: #fff; border-color: var(--accent); }
.page-hero-badge--inquire { background: transparent; color: var(--cream); border-color: rgba(255,255,255,.5); }
.page-hero-badge--about   { background: var(--violet); color: #fff; border-color: var(--violet); }
.page-hero-badge--contact { background: transparent; color: var(--cream); border-color: rgba(255,255,255,.4); }

/* Eyebrow */
.page-hero-eyebrow {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,.70); margin: 0 0 22px;
}

/* Title */
.page-hero-title {
  color: #fff;
  text-shadow: 0 2px 24px rgba(0,0,0,.22);
  margin: 0 0 28px;
  font-size: clamp(2rem, 5.5vw, 4rem);
  line-height: 1.25;
}

/* Sub description */
.page-hero-sub {
  color: rgba(255,255,255,.82);
  font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
  line-height: 1.65; max-width: 520px; margin: 0 0 24px;
}

/* Meta strip */
.page-hero-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-bottom: 36px;
}
.page-hero-meta-item { font-size: 0.875rem; font-weight: 600; color: rgba(255,255,255,.75); }
.page-hero-meta-sep  { color: rgba(255,255,255,.28); }

/* Actions */
.page-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Corner click hint */
.page-hero-hint {
  position: absolute; bottom: 28px; right: 28px; z-index: 2;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em;
  color: rgba(255,255,255,.45);
  display: flex; align-items: center; gap: 6px;
  pointer-events: none;
  transition: color .25s;
}
.page-hero:hover .page-hero-hint { color: rgba(255,255,255,.75); }
.page-hero-hint svg { opacity: .7; }

@media (max-width: 768px) {
  .page-hero { height: clamp(480px, 78vh, 640px); }
  .page-hero-overlay {
    background:
      linear-gradient(to bottom, rgba(44,43,43,.28) 0%, rgba(44,43,43,.88) 58%, rgba(44,43,43,.95) 100%),
      linear-gradient(to right, rgba(44,43,43,.88) 0%, rgba(44,43,43,.55) 50%, rgba(44,43,43,.20) 100%);
  }
  .page-hero-content { padding-bottom: 80px; }
  .page-hero-hint    { display: none; }
  .page-hero-eyebrow { margin-bottom: 16px; }
  .page-hero-title   { margin-bottom: 20px; }
  .page-hero-sub     { margin-bottom: 20px; }
  .page-hero-meta    { margin-bottom: 28px; }
}

/* ── EDITORIAL CARD — light version ─────── */
.editorial-card {
  background: var(--bg-soft);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-bold);
  padding: 80px 88px;
  text-align: center;
  box-shadow: var(--shadow-md);
  position:relative; overflow:hidden;
}
.editorial-card::before,
.editorial-card::after {
  content:'✦';
  position:absolute;
  font-size:1.25rem;
  color: rgba(44,43,43,.20);
}
.editorial-card::before { top:24px; left:32px; }
.editorial-card::after  { bottom:24px; right:32px; }
.editorial-card .display { max-width:840px; margin:0 auto; }
.editorial-card .label   { color:var(--accent); margin-bottom:20px; }
.editorial-card p { color:var(--ink-mid); margin-top:20px; font-size:1.125rem; }

/* ── FEATURE SPLIT ───────────────────────── */
.feature-split {
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  border-radius: var(--radius-xl); overflow:hidden;
  border: 1px solid var(--border-bold);
  box-shadow: var(--shadow-md);
}
.feature-split-image { position:relative; aspect-ratio:1; overflow:hidden; }
.feature-split-image img { width:100%; height:100%; object-fit:cover; }
.feature-split-content {
  background: var(--white);
  padding: 56px;
  display:flex; flex-direction:column; justify-content:center; gap:20px;
}

/* ── VALUE STRIP ─────────────────────────── */
.value-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.value-item {
  background: var(--white);
  border: 1px solid var(--border-bold);
  border-right-width: 0;
  padding: 32px 22px; text-align:center;
  transition: background 0.2s;
}
.value-item:last-child { border-right-width:1px; }
.value-item:hover { background:var(--bg-soft); }
.value-item-icon { font-size:1.75rem; margin-bottom:14px; }
.value-item h4  { font-size:0.875rem; font-weight:700; margin-bottom:7px; }
.value-item p   { font-size:0.8125rem; color:var(--ink-mid); line-height:1.55; }

/* ── ARTICLE CARD ────────────────────────── */
.article-card {
  border-radius: var(--radius-xl);
  overflow:hidden;
  background: var(--white);
  border: 1px solid var(--border-bold);
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display:flex; flex-direction:column;
}
.article-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.article-card-img { aspect-ratio:16/10; overflow:hidden; }
.article-card-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.4s; }
.article-card:hover .article-card-img img { transform:scale(1.04); }
.article-card-body { padding:22px 24px 28px; flex:1; display:flex; flex-direction:column; }
.article-card-tag {
  font-size:0.6875rem; font-weight:700; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--accent); margin-bottom:8px;
  display:inline-block;
}
.article-card-title { font-size:0.9375rem; font-weight:600; line-height:1.5; }
.article-card-arrow { margin-top:auto; padding-top:14px; color:var(--ink-mid); font-size:0.875rem; font-weight:600; }

/* ── PATH CARDS ──────────────────────────── */
.path-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-bold);
  padding: 40px 28px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:16px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  cursor:pointer; text-decoration:none; color:var(--ink);
  box-shadow: var(--shadow-sm);
}
.path-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  color:var(--ink);
}
.path-card-icon {
  width:64px; height:64px;
  display:flex; align-items:center; justify-content:center; font-size:1.5rem;
  background: var(--bg-soft);
  border-radius: var(--radius-lg);
}
.path-card-icon img { width:100%; height:100%; object-fit:contain; }
.path-card h4 { font-size:1rem; font-weight:700; }
.path-card p  { font-size:0.875rem; color:var(--ink-mid); line-height:1.65; }
.path-card .path-arrow { font-size:0.8125rem; color:var(--accent); font-weight:700; }

/* ── LANG TOGGLE ─────────────────────────── */
.lang-toggle {
  display:flex; align-items:center;
  border: 1px solid var(--border-bold);
  border-radius: var(--radius-sm);
  overflow:hidden; height:30px;
}
.lang-opt {
  padding: 0 10px; font-size:0.6875rem; font-weight:700;
  letter-spacing:0.08em; background:transparent; border:none;
  cursor:pointer; color:var(--ink-mid); height:100%;
  transition: background 0.15s, color 0.15s; line-height:1;
  font-family:var(--font);
}
.lang-opt.active { background:var(--ink); color:var(--white); }
.lang-opt:hover:not(.active) { background:var(--bg-soft); color:var(--ink); }

/* ── NOTICE BOX ──────────────────────────── */
.notice-box {
  background: var(--hl-teal);
  border: 1px solid rgba(255,212,59,.3);
  border-radius: var(--radius-lg);
  padding: 18px 22px; display:flex; gap:14px; align-items:flex-start;
}
.notice-box-icon { font-size:1.125rem; flex-shrink:0; display:flex; align-items:center; }
.notice-box-icon img { display:block; }
.notice-box-text { font-size:0.9375rem; color:var(--ink-mid); line-height:1.75; }

/* ── FAQ ─────────────────────────────────── */
.faq-list {
  display:flex; flex-direction:column; gap:0;
  border: 1px solid var(--border-bold);
  border-radius: var(--radius-xl); overflow:hidden;
  box-shadow: var(--shadow-sm);
}
.faq-item { background:var(--white); border-bottom:1px solid var(--divider); }
.faq-item:last-child { border-bottom:none; }
.faq-question {
  width:100%; display:flex; justify-content:space-between; align-items:center;
  padding: 22px 28px; background:none; border:none;
  font-family:var(--font); font-size:0.9375rem; font-weight:600;
  color:var(--ink); cursor:pointer; text-align:left; gap:16px;
  transition: background 0.15s;
  min-height: 56px; /* comfortable touch target */
}
.faq-question:hover { background:var(--bg-soft); }
.faq-question:focus-visible { outline:3px solid var(--accent); outline-offset:-3px; }
.faq-icon {
  flex-shrink:0; width:26px; height:26px;
  border: 1px solid var(--border-bold); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition: all 0.25s; font-size:0.9rem; color:var(--ink-mid); font-weight:700;
}
.faq-item.open .faq-icon { background:var(--ink); color:var(--white); border-color:var(--ink); transform:rotate(45deg); }
.faq-answer {
  max-height:0; overflow:hidden;
  transition: max-height 0.45s ease, padding 0.3s;
  padding:0 28px; color:var(--ink-mid); font-size:0.9375rem; line-height:1.85;
}
.faq-item.open .faq-answer { max-height:600px; padding:4px 28px 28px; }
.faq-answer p + p { margin-top:12px; }
.faq-answer p { margin:0; }

/* ── CTA BAND — only allowed dark section ── */
.cta-band {
  background: var(--brand-dark);
  border-radius: var(--radius-xl);
  padding: 80px 88px; text-align:center; color:var(--bg-base);
  box-shadow: var(--shadow-lg);
  position:relative; overflow:hidden;
}
.cta-band::before { content:'✦'; position:absolute; top:28px; left:36px; font-size:1.1rem; color:rgba(255,255,255,.10); }
.cta-band::after  { content:'✦'; position:absolute; bottom:28px; right:36px; font-size:1.1rem; color:rgba(255,255,255,.10); }
.cta-band h2 { color:var(--bg-base); margin-bottom:16px; }
.cta-band p  { color:rgba(255,255,255,.78); margin-bottom:32px; font-size:1.0625rem; }

/* ── PRICE BOX ───────────────────────────── */
.price-box {
  background: var(--white);
  border: 1px solid var(--border-bold);
  border-radius: var(--radius-xl); padding:52px 44px; text-align:center;
  box-shadow: var(--shadow-md);
}
.price-main {
  font-size: clamp(2.5rem,5vw,4rem); font-weight:700;
  color:var(--ink); line-height:1; margin:12px 0 4px;
}
.price-sub { font-size:0.9rem; color:var(--ink-mid); }
.price-early {
  display:inline-block;
  background: var(--hl-teal);
  border: 1px solid rgba(255,212,59,.3);
  border-radius: var(--radius-lg);
  padding:16px 24px; margin-top:20px;
}
.price-early-amount { font-size:1.75rem; font-weight:700; color:var(--accent); display:block; }
.price-early-note   { font-size:0.8125rem; color:var(--ink-mid); margin-top:4px; }

/* ── CERTIFICATE CAROUSEL ────────────────── */
.carousel-wrapper  { position:relative; }
.carousel-overflow { overflow:hidden; border-radius:var(--radius-lg); }
.carousel-track    { display:flex; gap:16px; transition:transform 0.4s cubic-bezier(0.25,0.1,0.25,1); }
.cert-card {
  flex-shrink:0; width:260px; border-radius:var(--radius-lg);
  overflow:hidden; border:1px solid var(--border-bold);
  background:var(--white); box-shadow:var(--shadow-sm);
  transition: transform 0.25s, box-shadow 0.25s;
}
.cert-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.cert-card img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.cert-card-label { padding:14px 16px; font-size:0.8rem; font-weight:600; color:var(--ink-mid); line-height:1.4; }
.carousel-btns { display:flex; gap:10px; margin-top:20px; justify-content:center; }
.carousel-btn {
  width:40px; height:40px; border-radius:var(--radius-md);
  background:var(--white); border:1px solid var(--border-bold);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:0.875rem; font-weight:700; transition:all 0.2s;
  box-shadow: var(--shadow-xs);
}
.carousel-btn:hover {
  background:var(--ink); color:var(--white); border-color:var(--ink);
  transform:translateY(-1px); box-shadow:var(--shadow-sm);
}

/* ── DATA TABLE ──────────────────────────── */
.data-table { width:100%; border-collapse:collapse; border:1px solid var(--border-bold); border-radius:var(--radius-lg); overflow:hidden; }
.data-table th {
  background: var(--brand-dark); color:var(--bg-base);
  font-weight:700; padding:14px 20px; text-align:left; font-size:0.875rem;
}
.data-table td {
  padding:14px 20px; border-bottom:1px solid var(--divider);
  font-size:0.9375rem; color:var(--ink-mid); background:var(--white);
}
.data-table tr:last-child td { border-bottom:none; }
.data-table tr:hover td { background:var(--bg-soft); }

/* ── FORM ────────────────────────────────── */
.form-group { display:flex; flex-direction:column; gap:7px; margin-bottom:20px; }
.form-label { font-size:0.875rem; font-weight:700; color:var(--ink); }
.form-input, .form-select, .form-textarea {
  font-family:var(--font); font-size:1rem; color:var(--ink);
  background:var(--white); border:1.5px solid var(--border-bold);
  border-radius:var(--radius-md); padding:13px 16px; width:100%;
  transition: border-color 0.15s, box-shadow 0.15s; outline:none; appearance:none;
  /* Prevent iOS auto-zoom on focus (must be ≥ 16px) */
  -webkit-text-size-adjust: 100%;
}
/* Minimum 44px touch target for all inputs */
.form-input, .form-select { min-height: 48px; }
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color:var(--accent);
  box-shadow: 0 0 0 3px rgba(44,43,43,.12);
}
.form-textarea { resize:vertical; min-height:140px; line-height:1.7; }
.form-status { font-size:0.875rem; line-height:1.6; min-height:1.2em; }
.form-status.success { color:var(--sage); font-weight:600; }
.form-status.error   { color:var(--accent); }

/* ── WORKSHOP EVENT CARD ─────────────────── */
.workshop-card {
  border-radius:var(--radius-xl); overflow:hidden;
  display:grid; grid-template-columns:1fr 1fr;
  border:1px solid var(--border-bold); box-shadow:var(--shadow-lg);
  min-height:360px;
}
.workshop-card-image { position:relative; overflow:hidden; }
.workshop-card-image img { width:100%; height:100%; object-fit:cover; transition:transform 0.4s; }
.workshop-card:hover .workshop-card-image img { transform:scale(1.03); }
.workshop-card-content {
  background: var(--brand-dark); color:var(--bg-base);
  padding:48px 44px;
  display:flex; flex-direction:column; justify-content:center; gap:20px;
}
.workshop-card-meta { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.workshop-chip {
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius-sm);
  padding: 4px 12px; font-size:0.75rem; font-weight:700;
  letter-spacing:0.05em;
}
.workshop-chip.free { background:var(--accent); color:white; border-color:var(--accent); }
.workshop-card-content h3 { color:var(--bg-base); }
.workshop-card-content p  { color:rgba(255,255,255,.78); font-size:0.9375rem; line-height:1.75; }

/* ── FOOTER ──────────────────────────────── */
.footer {
  background: var(--brand-dark); color:rgba(255,255,255,.72);
  margin-top: 96px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.footer-inner { max-width:var(--max-w); margin:0 auto; padding:0 var(--pad); }
.footer-top {
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:48px; padding:64px 0 56px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.footer-logo { height:52px; width:auto; border-radius:5px; display:block; filter:invert(1); mix-blend-mode:screen; }
.footer-brand-desc { font-size:0.875rem; line-height:1.8; margin-top:16px; max-width:260px; }
.footer-col h5 {
  font-size:0.6875rem; font-weight:800; letter-spacing:0.14em;
  text-transform:uppercase; color:rgba(255,255,255,.9); margin-bottom:18px;
}
.footer-links { display:flex; flex-direction:column; gap:11px; }
.footer-links a { font-size:0.875rem; color:rgba(255,255,255,.72); transition:color 0.15s; }
.footer-links a:hover { color:rgba(255,255,255,.95); }
.footer-bottom {
  display:flex; justify-content:space-between; align-items:center;
  padding:24px 0; font-size:0.8rem;
}

/* ── SECTION HEADER ──────────────────────── */
.section-header { margin-bottom:52px; }
.section-header.center { text-align:center; }
.section-header .label { margin-bottom:12px; }

/* ── QUALS ───────────────────────────────── */
.qual-group { margin-bottom:22px; }
.qual-group:last-child { margin-bottom:0; }
.qual-label {
  font-size:0.625rem; font-weight:800; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--accent);
  border-bottom:1px solid var(--border); padding-bottom:6px;
  display:block; margin-bottom:10px;
}
.qual-list { display:flex; flex-direction:column; gap:7px; }
.qual-list li {
  font-size:0.875rem; color:var(--ink-mid);
  padding-left:18px; position:relative; line-height:1.65;
}
.qual-list li::before { content:'—'; position:absolute; left:0; color:var(--accent); font-weight:700; }

/* ── LEARN LIST ──────────────────────────── */
.learn-list { display:flex; flex-direction:column; gap:13px; }
.learn-list li {
  display:flex; gap:12px; align-items:flex-start;
  font-size:0.9375rem; color:var(--ink-mid); line-height:1.7;
}
.learn-list li::before {
  content:'✓'; color:var(--sage); font-weight:800;
  flex-shrink:0; margin-top:1px; font-size:0.875rem;
}

/* ── LINK CARDS ──────────────────────────── */
.link-card {
  display:flex; align-items:center; gap:16px;
  background:var(--white); border-radius:var(--radius-lg);
  border:1px solid var(--border-bold); padding:16px 20px;
  transition: transform 0.2s, box-shadow 0.2s; color:var(--ink);
  box-shadow: var(--shadow-xs);
}
.link-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.link-card-icon {
  width:42px; height:42px; border-radius:var(--radius-md);
  background:var(--bg-soft); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:1.125rem; flex-shrink:0;
}
.link-card-info h5 { font-size:0.9375rem; font-weight:700; }
.link-card-info p  { font-size:0.8125rem; color:var(--ink-mid); margin-top:2px; }
.link-card-arrow { margin-left:auto; color:var(--ink-mid); font-size:0.875rem; font-weight:600; }

/* ── READING FLOW ────────────────────────── */
/* Cap prose paragraphs for comfortable line length (65–75 chars) */
.body-lg, .body-md { max-width: 68ch; }
/* Contained sections: remove max-width cap on full-width contexts */
.hero-text .body-lg,
.hero-text .body-md,
.feature-split-content .body-md,
.cta-band .body-lg,
.cta-band .body-md { max-width: none; }

/* ── SKIP LINK (keyboard nav) ────────────── */
.skip-link {
  position:absolute; top:-100%; left:16px;
  background:var(--ink); color:var(--white);
  padding:8px 16px; border-radius:0 0 var(--radius-sm) var(--radius-sm);
  font-size:0.875rem; font-weight:700; z-index:999;
  transition: top 0.1s;
}
.skip-link:focus { top:0; }

/* ── MISC ────────────────────────────────── */
.divider { height:1px; background:var(--divider); margin:32px 0; }

.avatar-card { display:flex; gap:24px; align-items:flex-start; }
.avatar-img {
  width:96px; height:96px; border-radius:var(--radius-lg);
  object-fit:cover; flex-shrink:0;
  border:1px solid var(--border-bold); box-shadow:var(--shadow-sm);
}

.chip {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--bg-soft); border:1px solid var(--border-bold);
  border-radius:var(--radius-sm); padding:5px 12px;
  font-size:0.8125rem; font-weight:600; color:var(--ink-mid);
}

/* ── COURSE HERO SLIDER ──────────────────── */
.chs { position:relative; overflow:hidden; }
.chs-slide { display:none; }
.chs-slide.active { display:block; }

/* ── RESPONSIVE ───────────────────────────── */
@media (max-width:1024px) {
  .grid-4      { grid-template-columns:repeat(2,1fr); }
  .value-strip { grid-template-columns:repeat(2,1fr); }
  .value-item              { border-right-width:0; border-bottom-width:0; }
  .value-item:nth-child(2n){ border-right-width:1px; }
  .value-item:nth-last-child(-n+2) { border-bottom-width:1px; }
  .footer-top  { grid-template-columns:1fr 1fr; gap:40px; }
}

@media (max-width:768px) {
  :root { --pad:18px; }

  /* ── MOBILE NAV — more breathing room ──── */
  .nav-inner {
    height: 76px;
    padding: 0 22px;
  }
  .nav-logo img { height: 40px; }
  .nav-hamburger {
    display: flex;
    padding: 10px;
    min-width: 44px; min-height: 44px;
    align-items: center; justify-content: center;
    margin-right: -10px; /* align to edge */
  }

  .nav-links    { display:none; }

  /* ── MOBILE HERO — text + simple hero ─── */
  .hero         { padding:64px 0 56px; }
  .hero-split   { grid-template-columns:1fr; gap:32px; }
  .hero-split.hero-60 { grid-template-columns:1fr; }
  .hero-image-wrapper { aspect-ratio:4/3; }
  .hero-actions { flex-direction:column; align-items:stretch; }
  .hero-actions .btn { text-align:center; justify-content:center; width:100%; }

  .grid-2  { grid-template-columns:1fr; }
  .grid-3  { grid-template-columns:1fr; }
  .grid-4  { grid-template-columns:1fr; }
  .value-strip { grid-template-columns:1fr 1fr; }
  .value-item              { border-right-width:0; border-bottom-width:0; }
  .value-item:nth-child(2n){ border-right-width:1px; }
  .value-item:nth-last-child(-n+2) { border-bottom-width:1px; }

  .section    { padding:56px 0; }
  .section-lg { padding:72px 0; }

  .feature-split   { grid-template-columns:1fr; }
  .feature-split-content { padding:32px 24px; }
  .feature-split-image   { aspect-ratio:4/3; }

  .editorial-card { padding:48px 24px; }
  .editorial-card::before,.editorial-card::after { font-size:0.9rem; }
  .editorial-card .display { font-size:clamp(1.5rem,6vw,2.8rem); }
  .cta-band { padding:52px 24px; }
  .cta-band::before,.cta-band::after { font-size:0.9rem; }
  .cta-band-grid { grid-template-columns:1fr !important; }
  .cta-band-img { aspect-ratio:16/7; min-height:unset !important; height:auto; }
  .cta-band-img img { height:260px; }
  .cta-band-content { padding:48px 32px !important; }

  .workshop-card { grid-template-columns:1fr; }
  .workshop-card-image { aspect-ratio:16/9; }
  .workshop-card-content { padding:32px 24px; }

  .path-card { padding:28px 18px; }
  .path-card-icon { width:52px; height:52px; }

  .chip { font-size:0.75rem; padding:4px 10px; }
  .notice-box { padding:14px 16px; gap:12px; }
  .notice-box-icon img { width:28px; height:28px; }

  .footer-top    { grid-template-columns:1fr; gap:36px; padding:48px 0 40px; }
  .footer-bottom { flex-direction:column; gap:10px; text-align:center; }

  /* ── MOBILE UX IMPROVEMENTS ────────────── */
  /* Larger touch targets for cards that are links */
  .path-card, .article-card, .link-card { min-height:60px; }

  /* FAQ question — easier to tap */
  .faq-question { padding:20px 18px; font-size:0.9rem; }
  .faq-answer   { padding:0 18px; }
  .faq-item.open .faq-answer { padding:4px 18px 20px; }

  /* Increase card padding on mobile for breathing room */
  .card    { padding:24px; }
  .card-sm { padding:16px 18px; }

  /* CTA band more compact on mobile */
  .cta-band { padding:40px 20px; border-radius:var(--radius-lg); }

  /* Editorial card */
  .editorial-card { padding:40px 20px; }

  /* feature-split: stack correctly */
  .feature-split { border-radius:var(--radius-lg); }

  /* Value strip: always 2-col on mobile (better than 1 cramped col) */
  .value-strip { grid-template-columns:1fr 1fr; }
  .value-item  { padding:24px 16px; }

  /* Body text stays readable on small screens */
  .body-lg { font-size:1rem; }
  .body-md { font-size:0.9375rem; }

  /* Section rhythm tighter on mobile */
  .section    { padding:48px 0; }
  .section-lg { padding:60px 0; }

  /* ── PAGE HERO — mobile actions ─────────── */
  .page-hero-actions { flex-direction: column; align-items: stretch; }
  .page-hero-actions .btn { text-align: center; justify-content: center; }

  /* ── FIRST SECTION AFTER HERO ─────────── */
  .page-hero + section,
  .chs + section {
    margin-top: 48px;
  }
}

@media (max-width:480px) {
  :root { --pad:16px; }
  .value-strip { grid-template-columns:1fr; }
  .value-item              { border-right-width:1px; border-bottom-width:0; }
  .value-item:last-child   { border-bottom-width:1px; }
  .price-main  { font-size:2.25rem; }
  .cert-card   { width:220px; }
  .hero-actions .btn { padding:14px 20px; font-size:0.9rem; }
}

/* ── COOKIE / PDPA CONSENT BANNER ─────────── */
#cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9999;
  padding: 0 var(--pad) calc(var(--pad) + env(safe-area-inset-bottom, 0px));
  transform: translateY(120%);
  transition: transform .26s cubic-bezier(.22,1,.36,1);
}
#cookie-banner.is-visible { transform: translateY(0); }

.cookie-banner-inner {
  max-width: 900px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--border-bold);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 20px 22px;
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.cookie-banner-text { flex: 1 1 380px; min-width: 0; }
.cookie-banner-title {
  font-size: .95rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}
.cookie-banner-body {
  font-size: .84rem;
  line-height: 1.6;
  color: var(--ink-mid);
}
.cookie-banner-body a { color: var(--accent); text-decoration: underline; }
.cookie-banner-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .cookie-banner-inner { padding: 18px; }
  .cookie-banner-actions { width: 100%; }
  .cookie-banner-actions .btn { flex: 1; justify-content: center; }
}

/* consent placeholder shown in place of a blocked embed */
.consent-placeholder {
  border: 1px dashed var(--border-bold);
  border-radius: var(--radius-lg);
  background: var(--bg-soft);
  padding: 40px 24px;
  text-align: center;
}
.consent-placeholder p { color: var(--ink-mid); font-size: .9rem; margin-bottom: 16px; }

/* PDPA consent row on forms */
.consent-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 14px;
}
.consent-row input[type="checkbox"] {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--accent);
}
.consent-row label {
  font-size: .82rem;
  line-height: 1.6;
  color: var(--ink-mid);
}
.consent-row label a { color: var(--accent); text-decoration: underline; }


/* ── STICKER SCRAPBOOK — utilities ───────── */
.mono { font-family: var(--font-mono); font-size:0.8125rem; letter-spacing:0.1em; text-transform:uppercase; }

/* สติกเกอร์ วางทับขอบ section และหัวข้อ หมุน 6–15 องศา */
.sticker { position:absolute; z-index:3; pointer-events:none; user-select:none; }
.sticker--tl { top:-18px; left:-14px;  transform: rotate(-9deg); }
.sticker--tr { top:-22px; right:-10px; transform: rotate(11deg); }
.sticker--br { bottom:-18px; right:-12px; transform: rotate(-7deg); }
.sticker--bl { bottom:-16px; left:-14px;  transform: rotate(8deg); }
.has-sticker { position:relative; }

/* แถบ marquee ใกล้ footer สองรางทับกัน ไม่ใช่ DOM ซ้ำสี่สิบตัว */
.marquee {
  overflow:hidden; border-top:var(--border-solid); border-bottom:var(--border-solid);
  background: var(--matcha); padding:14px 0;
}
.marquee__track {
  display:flex; width:max-content; gap:48px;
  font-family:var(--font-mono); font-size:0.875rem;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--ink);
  animation: marquee 28s linear infinite;
}
.marquee__track > * { flex:0 0 auto; }
@keyframes marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }

/* รูปคน ขาวดำคอนทราสต์สูง */
.portrait-bw { filter: grayscale(1) contrast(1.18); }

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation:none; }
  .sticker { transform:none; }
  .btn:hover, .card:hover { transform:none; }
}

code {
  font-family: var(--font-mono); font-size:0.86em;
  background: var(--butter); border:1px solid var(--ink);
  border-radius:3px; padding:1px 5px;
}