/* Glass-on-real-photo kit (owner request 2026-10-05): <x-photo-section> + .ag-card / .ag-* helpers + <x-flag>.
   Loaded once by the component (@push head) - the public layout is not touched.
   Photo layer: a viewport-tall sticky frame inside the section, so a long section keeps one well-framed photo
   behind it instead of a giant cover crop; no background-attachment:fixed (broken on iOS).
   Contrast: plum/ink veil (--brand-rgb) + darker glass. Audited on rendered screenshots (text hidden, worst pixel
   behind every text box): >= 4.5:1 at 320..1920 px. Without backdrop-filter the glass falls back to near-solid plum. */
.ag { position: relative; isolation: isolate; color: #fff; background: rgb(var(--brand-rgb, 61,22,95)); }
.ag-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; overflow: clip; pointer-events: none; }
.ag-bg__pin { position: sticky; top: 0; height: 100vh; height: 100lvh; max-height: 100%; }
.ag-bg__pin img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ag-bg__pin::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(30,10,48,.84) 0%, rgba(var(--brand-rgb, 61,22,95),.58) 50%, rgba(30,10,48,.80) 100%); }
/* bright photos (sky, snow, white walls): deeper veil */
.ag--deep .ag-bg__pin::after { background: linear-gradient(180deg, rgba(30,10,48,.90) 0%, rgba(var(--brand-rgb, 61,22,95),.70) 50%, rgba(30,10,48,.84) 100%); }
.ag-bg__fill { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0, rgba(30,10,48,.35) 100%); }

.ag .eyebrow.eyebrow { color: #FFE3C9; text-shadow: 0 1px 2px rgba(20,6,34,.6); }
.ag-lead { color: rgba(255,255,255,.9); }
.ag-link { color: #FFD7B0; font-weight: 600; }
.ag-link:hover { color: #fff; }
.ag a:focus-visible, .ag button:focus-visible, .ag summary:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 10px; }

/* glass card - fallback first (no backdrop-filter): nearly solid plum */
.ag-card {
  background: rgba(40,14,64,.84);
  border: 1px solid rgba(198,161,230,.45);
  border-radius: 1rem;
  box-shadow: 0 10px 30px -12px rgba(10,2,20,.55);
  color: #fff;
}
.ag-card a.ag-card__title:hover, a.ag-card:hover .ag-card__title { color: #FFD7B0; }
a.ag-card { transition: border-color .2s ease, transform .2s ease; }
a.ag-card:hover { border-color: #FFD7B0; transform: translateY(-2px); }
.ag-muted { color: rgba(255,255,255,.9); }
.ag-chip { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); color: #fff; }
.ag-pill { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.28); color: #fff; transition: border-color .2s ease, background-color .2s ease; }
.ag-pill:hover { border-color: #FFD7B0; background: rgba(255,255,255,.18); }
.ag-rule { border-color: rgba(198,161,230,.55); }
.ag-icon { color: #FFD7B0; }
/* long text inside a glass panel: comfortable measure */
.ag-prose { color: rgba(255,255,255,.92); line-height: 1.8; }
.ag-prose a { color: #FFD7B0; text-decoration: underline; }
.ag-prose strong, .ag-prose b, .ag-prose h2, .ag-prose h3, .ag-prose h4 { color: #fff; }

/* filter buttons / tabs on a photo */
.ag-filter { background: rgba(30,10,48,.55); border: 1px solid rgba(255,255,255,.4); color: #fff; transition: background-color .2s ease, color .2s ease; }
.ag-filter:hover { background: rgba(30,10,48,.75); }
.ag-filter[aria-pressed="true"], .ag-filter[aria-current] { background: #fff; color: var(--ink-950); border-color: #fff; }

/* the shared memberships partial (tone dark) inside a glass section */
.ag-cert ul[aria-label] > li { background: rgba(40,14,64,.84); border-color: rgba(198,161,230,.45) !important; border-radius: 1rem; }
.ag-cert ul[aria-label] > li .text-white\/60 { color: rgba(255,255,255,.85); }
.ag-reg { color: rgba(255,255,255,.88); }

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ag-card, .ag-cert ul[aria-label] > li {
    background: linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.06)), rgba(30,10,48,.42);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
  }
  .ag-filter { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
}

/* flags (<x-flag>): small rounded 4:3, decorative next to the printed country name */
.flag { display: inline-block; width: 20px; height: 15px; border-radius: 3px; object-fit: cover; flex-shrink: 0; vertical-align: -2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.flag--sm { width: 16px; height: 12px; border-radius: 2px; }
.flag--lg { width: 28px; height: 21px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  .ag-pill, .ag-filter, a.ag-card { transition: none; }
  a.ag-card:hover { transform: none; }
}

/* ---- page hero on a real photo (<x-photo-hero>, 2026-10-05). Text sits bottom-left over a plum veil: phones darken from the middle
   down (the text block), tablets/desktop darken from the left (text column) and the bottom, the right side keeps the photo bright.
   Height ~56svh phones / 60vh desktop as a minimum, content can grow it (never clipped). */
.ph { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; color: #fff;
  min-height: max(26rem, 56svh); padding: 7.5rem 1.5rem 2.5rem; background: rgb(var(--brand-rgb, 61,22,95)); }
@media (min-width: 768px) { .ph { min-height: max(28rem, 60vh); padding: 10rem 1.5rem 3.5rem; } }
.ph-inner { position: relative; width: 100%; margin-left: auto; margin-right: auto; }
.ph-bg, .ph-bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ph-bg { z-index: -2; }
.ph-bg img { object-fit: cover; object-position: var(--ph-pos-sm, 50% 50%); }
@media (min-width: 768px) { .ph-bg img { object-position: var(--ph-pos, 50% 50%); } }
.ph-veil { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(30,10,48,.55) 0%, rgba(30,10,48,.50) 18%, rgba(40,14,64,.80) 40%, rgba(30,10,48,.90) 66%, rgba(26,8,42,.95) 100%); }
.ph--deep .ph-veil { background: linear-gradient(180deg, rgba(30,10,48,.65) 0%, rgba(30,10,48,.62) 18%, rgba(40,14,64,.86) 40%, rgba(30,10,48,.93) 66%, rgba(26,8,42,.96) 100%); }
@media (min-width: 768px) {
  .ph-veil { background:
    linear-gradient(0deg, rgba(26,8,42,.70) 0%, rgba(26,8,42,.25) 38%, rgba(26,8,42,0) 60%),
    linear-gradient(90deg, rgba(30,10,48,.90) 0%, rgba(40,14,64,.82) 35%, rgba(40,14,64,.55) 55%, rgba(40,14,64,.15) 80%, rgba(40,14,64,.05) 100%); }
  .ph--deep .ph-veil { background:
    linear-gradient(0deg, rgba(26,8,42,.75) 0%, rgba(26,8,42,.35) 38%, rgba(26,8,42,.1) 60%),
    linear-gradient(90deg, rgba(30,10,48,.93) 0%, rgba(40,14,64,.87) 35%, rgba(40,14,64,.65) 55%, rgba(40,14,64,.25) 80%, rgba(40,14,64,.12) 100%); }
}
.ph--flat .ph-veil { display: none; }
.ph h1 { color: #fff; text-shadow: 0 2px 18px rgba(20,6,34,.45); }
.ph .eyebrow, .ph .eyebrow.eyebrow { color: #FFE3C9; text-shadow: 0 1px 2px rgba(20,6,34,.6); }
.ph-lead { color: rgba(255,255,255,.92); text-shadow: 0 1px 2px rgba(20,6,34,.5); }
.ph-crumb { color: rgba(255,255,255,.88); }
.ph-crumb a:hover { color: #fff; text-decoration: underline; }
.ph em { text-shadow: 0 2px 6px rgba(20,6,34,.45); }
.ph a:focus-visible, .ph button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 999px; }
/* tabs / quick links on the photo: glass pills, the current one solid white */
.ph-pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.ph-pill { display: inline-flex; align-items: center; gap: .375rem; min-height: 44px; padding: 0 1.15rem; border-radius: 999px; font-size: .875rem; line-height: 1.2;
  color: #fff; background: rgba(30,10,48,.76); border: 1px solid rgba(255,255,255,.45); cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.ph-pill:hover { background: rgba(30,10,48,.86); border-color: #FFD7B0; }
.ph-pill.is-active, .ph-pill[aria-current="page"], .ph-pill[aria-selected="true"] { background: #fff; color: var(--ink-950, #3D165F); border-color: #fff; font-weight: 600; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ph-pill { background: rgba(30,10,48,.66); -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); }
}
@media (prefers-reduced-motion: reduce) { .ph-pill { transition: none; } }
/* blk() headlines carry an inline accent colour made for light pages: on the photo use the light peach accent */
.ph h1 em[style] { color: var(--pastel-peach, #FFD7B0) !important; }

/* hero photo mirrored left-right (config showcase.heroes ... 'flip' => true) */
.ph--flip .ph-bg img { transform: scaleX(-1); }

/* ---- season palette for the month pages (/when?m=, month tab bar, month chips; owner 5 Oct 2026 "เปลี่ยนสีตาม season").
   Europe seasons: winter Dec-Feb icy blue · spring Mar-May blossom pink + fresh green · summer Jun-Aug sea teal + sunny gold ·
   autumn Sep-Nov russet + amber. App\Support\Season maps month -> .season-<key>. Header, footer and CTA buttons stay brand.
   Contrast (WCAG): --season-accent on #fff 6.48 / 6.28 / 5.59 / 6.09, on --season-soft 5.67 / 5.44 / 5.06 / 5.19;
   --season-ink on --season-soft 9.54 / 9.67 / 8.36 / 8.82; --season-glow on the hero veil >= 12.8 (winter/spring/summer/autumn).
   --season-dot is decorative only (dots, underline, icons next to text). --season-veil-rgb: dark tint for the photo veil. */
.season-winter { --season-accent: #1D6296; --season-ink: #12405F; --season-soft: #E7F1FA; --season-dot: #4FA3D9; --season-glow: #BFE3FF; --season-veil-rgb: 12,34,58; }
.season-spring { --season-accent: #AD2E62; --season-ink: #6E1A3E; --season-soft: #FCEAF1; --season-dot: #E86A9A; --season-glow: #FFC9DD; --season-veil-rgb: 54,14,44; --season-alt: #2F7A3A; }
.season-summer { --season-accent: #0B7472; --season-ink: #08504F; --season-soft: #FFF3D1; --season-dot: #E3A20B; --season-glow: #FFE08A; --season-veil-rgb: 6,44,50; }
.season-autumn { --season-accent: #A3461B; --season-ink: #6E2C0E; --season-soft: #FBEADB; --season-dot: #D9861C; --season-glow: #FFCF99; --season-veil-rgb: 56,22,10; }

/* small season marker: coloured icon (or dot) before a month name */
.season-ico { font-size: 16px; line-height: 1; color: var(--season-dot); }
.season-dotmark { display: inline-block; width: 8px; height: 8px; border-radius: 999px; background: var(--season-dot); flex-shrink: 0; }

/* month tab bar (/when): each tab carries its own season class */
.mtab { color: var(--ink-700, #675774); border-bottom: 3px solid transparent; transition: color .2s ease, background-color .2s ease, border-color .2s ease; }
.mtab:hover { color: var(--season-accent); background: var(--season-soft); }
.mtab[aria-current="page"] { color: var(--season-ink); background: var(--season-soft); border-bottom-color: var(--season-accent); font-weight: 600; }
.mtab__n { font-size: 11px; color: var(--season-accent); font-weight: 600; }
.mtab:focus-visible { outline: 3px solid var(--season-accent); outline-offset: -3px; border-radius: 6px; }
.season-legend { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: 12px; color: var(--ink-700, #675774); }
.season-legend > span { display: inline-flex; align-items: center; gap: .3rem; }
.season-legend > span.is-on { color: var(--season-ink); font-weight: 600; }

/* the month page itself: <div class="season-page season-<key>"> around the content below the header */
.ph.ph--season .ph-veil { background: linear-gradient(180deg, rgba(var(--season-veil-rgb),.60) 0%, rgba(var(--season-veil-rgb),.60) 18%, rgba(var(--season-veil-rgb),.86) 40%, rgba(30,10,48,.90) 66%, rgba(26,8,42,.95) 100%); }
.ph.ph--season.ph--deep .ph-veil { background: linear-gradient(180deg, rgba(var(--season-veil-rgb),.65) 0%, rgba(var(--season-veil-rgb),.62) 18%, rgba(var(--season-veil-rgb),.86) 40%, rgba(30,10,48,.93) 66%, rgba(26,8,42,.96) 100%); }
@media (min-width: 768px) {
  .ph.ph--season .ph-veil { background:
    linear-gradient(0deg, rgba(26,8,42,.70) 0%, rgba(26,8,42,.25) 38%, rgba(26,8,42,0) 60%),
    linear-gradient(90deg, rgba(var(--season-veil-rgb),.90) 0%, rgba(var(--season-veil-rgb),.82) 35%, rgba(var(--season-veil-rgb),.55) 55%, rgba(var(--season-veil-rgb),.15) 80%, rgba(var(--season-veil-rgb),.05) 100%); }
  .ph.ph--season.ph--deep .ph-veil { background:
    linear-gradient(0deg, rgba(26,8,42,.75) 0%, rgba(26,8,42,.35) 38%, rgba(26,8,42,.1) 60%),
    linear-gradient(90deg, rgba(var(--season-veil-rgb),.93) 0%, rgba(var(--season-veil-rgb),.87) 35%, rgba(var(--season-veil-rgb),.65) 55%, rgba(var(--season-veil-rgb),.25) 80%, rgba(var(--season-veil-rgb),.12) 100%); }
}
.ph.ph--season h1 em[style] { color: var(--season-glow) !important; }
.ph-season { display: inline-flex; align-items: center; gap: .375rem; min-height: 32px; padding: 0 .85rem; border-radius: 999px; font-size: .875rem; font-weight: 600;
  color: var(--season-ink); background: var(--season-soft); }
.ph-season .msi { font-size: 18px; color: var(--season-accent); }
.season-page .eyebrow { color: var(--season-accent); }
.season-page h2.season-h { color: var(--season-ink); display: flex; align-items: center; gap: .5rem; }
.season-page h2.season-h .msi { color: var(--season-accent); }
.season-chip { display: inline-flex; align-items: center; gap: .375rem; min-height: 44px; padding: 0 1rem; border-radius: 999px; font-size: .875rem; font-weight: 500;
  color: var(--season-ink); background: var(--season-soft); border: 1px solid transparent; transition: border-color .2s ease, background-color .2s ease; }
.season-chip .msi { font-size: 18px; color: var(--season-accent); }
.season-chip:hover { border-color: var(--season-accent); background: #fff; }
.season-chip:focus-visible { outline: 3px solid var(--season-accent); outline-offset: 2px; }
.season-box { background: var(--season-soft); border-left: 4px solid var(--season-accent); }
.season-page .season-band { background: var(--season-soft); }
/* country filter chips of the shared tour grid, active state in the season ink */
.season-page button[aria-pressed="true"].rounded-full { background: var(--season-ink) !important; border-color: transparent !important; color: #fff !important; }

/* month cards (/themes "เลือกจากเดือน"): season edge + icon */
.mcard { border-top: 3px solid var(--season-dot) !important; }
.mcard:hover { border-color: var(--season-accent) !important; background: var(--season-soft) !important; }
.mcard__s { color: var(--season-accent); }

@media (prefers-reduced-motion: reduce) { .mtab, .season-chip { transition: none; } }
.season-box .season-chip { background: #fff; }

/* travel-style photo cards (partials/style-card): real photo + glass label (white on >= .80 plum glass: >= 4.5:1 on any photo) */
.style-card { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 1rem; overflow: hidden; isolation: isolate;
  background: var(--ink-950, #3D165F); border: 2px solid var(--season-dot, var(--sand-200, #EADFF3));
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.style-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; transition: transform .5s ease; }
.style-card:hover { border-color: var(--season-accent, var(--copper-500, #C4510A)); transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(30,10,48,.55); }
.style-card:hover img { transform: scale(1.05); }
.style-card:focus-visible { outline: 3px solid var(--season-accent, var(--copper-500, #C4510A)); outline-offset: 3px; }
.style-card__label { position: absolute; left: .5rem; right: .5rem; bottom: .5rem; display: flex; align-items: center; gap: .4rem;
  min-height: 40px; padding: .4rem .75rem; border-radius: .75rem; color: #fff; font-size: .875rem; font-weight: 600; line-height: 1.25;
  background: rgba(28,14,38,.84); border: 1px solid rgba(255,255,255,.15); box-shadow: 0 8px 24px -12px rgba(0,0,0,.6); }
.style-card__label .msi { font-size: 20px; color: var(--season-glow, #FFD7B0); flex-shrink: 0; }
/* same blurred glass panel as the /destinations cards (bg rgba(28,14,38,.62) + backdrop-blur-md) */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .style-card__label { background: rgba(28,14,38,.62); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
}
@media (min-width: 768px) { .style-card__label { font-size: 1rem; left: .75rem; right: .75rem; bottom: .75rem; border-radius: 1rem; padding: .55rem .9rem; } }
/* many cards on phones: one horizontal snap row inside its own scroller (the page never scrolls sideways) */
.style-row { display: grid; grid-auto-flow: column; grid-auto-columns: 46%; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory;
  margin: 0 -1rem; padding: 0 1rem .25rem; scrollbar-width: none; }
.style-row > * { scroll-snap-align: start; }
@media (min-width: 640px) { .style-row { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 0; } }
@media (min-width: 1024px) { .style-row { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .style-card, .style-card img { transition: none; } .style-card:hover, .style-card:hover img { transform: none; } }

/* ---- /prepare: 5 trip steps, one accent each (owner 5 Oct 2026 "ออกแบบหัวแต่ละหัวข้อ ปรับสีปุ่มให้แตกต่างกัน 5 สี").
   1 ก่อนจอง plum · 2 ก่อนออกเดินทาง teal · 3 ที่สนามบิน blue · 4 ระหว่างทริป copper · 5 หลังทริป amber.
   The step section carries .step-<key>; every part (sticky tab, number badge, photo header tint, chips, next link) reads the vars.
   Contrast (WCAG): --step-accent on #fff 8.17 / 5.59 / 6.48 / 4.64 / 5.93 (white digits on the badge the same);
   --step-ink on --step-soft 9.56 / 8.09 / 9.54 / 6.90 / 9.13; --step-glow on the header glass >= 9. */
.step-book { --step-accent: #6A329F; --step-ink: #4B1E83; --step-soft: #EFE6F7; --step-glow: #E3CCFA; --step-rgb: 106,50,159; }
.step-pack { --step-accent: #0B7472; --step-ink: #08504F; --step-soft: #E3F3F2; --step-glow: #A8ECE8; --step-rgb: 11,116,114; }
.step-airport { --step-accent: #1D6296; --step-ink: #12405F; --step-soft: #E7F1FA; --step-glow: #BFE3FF; --step-rgb: 29,98,150; }
.step-trip { --step-accent: #C4510A; --step-ink: #8A3505; --step-soft: #FBEADB; --step-glow: #FFCF99; --step-rgb: 196,81,10; }
.step-after { --step-accent: #8A5A00; --step-ink: #5C3B00; --step-soft: #FFF3D1; --step-glow: #FFE08A; --step-rgb: 138,90,0; }

/* sticky step bar: one row that scrolls sideways inside itself on phones (the page never scrolls sideways) */
.step-tabs { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.step-tabs::-webkit-scrollbar { display: none; }
.step-tab { display: inline-flex; align-items: center; gap: .4rem; min-height: 48px; padding: 0 .75rem; white-space: nowrap; font-size: .875rem;
  color: var(--ink-800, #503367); border-bottom: 3px solid transparent; transition: color .2s ease, background-color .2s ease, border-color .2s ease; }
.step-tab__n { width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; flex-shrink: 0;
  background: var(--step-accent); color: #fff; font-size: 12px; font-weight: 700; line-height: 1; }
.step-tab:hover { color: var(--step-ink); background: var(--step-soft); }
.step-tab[aria-current="true"] { color: var(--step-ink); background: var(--step-soft); border-bottom-color: var(--step-accent); font-weight: 600; }
.step-tab:focus-visible { outline: 3px solid var(--step-accent); outline-offset: -3px; border-radius: 6px; }
@media (min-width: 768px) { .step-tab { padding: 0 1rem; } }

/* the section card: step-coloured top edge */
.step-card { border-top: 4px solid var(--step-accent); }

/* step header: real photo + step tint, text on a blurred glass panel (the /destinations card glass, darker: measured >= 4.5:1 behind every word on these photos) */
.step-head { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; border-radius: 1rem;
  min-height: 13.5rem; background: var(--step-ink); color: #fff; }
.step-head img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; object-position: var(--step-pos-sm, 50% 50%); }
.step-head__veil { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--step-rgb),.34) 0%, rgba(var(--step-rgb),.20) 40%, rgba(28,14,38,.62) 70%, rgba(28,14,38,.88) 100%); }
.step-head__glass { position: relative; margin: .5rem; max-width: 36rem; padding: .75rem .9rem; border-radius: .75rem;
  background: rgba(28,14,38,.86); border: 1px solid rgba(255,255,255,.2); box-shadow: 0 8px 24px -12px rgba(0,0,0,.6); text-shadow: 0 1px 3px rgba(0,0,0,.75); }
.step-head__eyebrow { display: flex; align-items: center; gap: .5rem; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .18em; color: var(--step-glow); }
.step-head__n { width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; flex-shrink: 0; text-shadow: none;
  background: var(--step-accent); color: #fff; font-family: "Prompt", sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0; border: 1px solid rgba(255,255,255,.5); }
.step-head h2 { color: #fff; margin-top: .25rem; }
.step-head__lead { margin-top: .25rem; color: rgba(255,255,255,.92); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .step-head__glass { background: rgba(28,14,38,.62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}
@media (min-width: 768px) {
  .step-head { min-height: 16rem; }
  .step-head img { object-position: var(--step-pos, 50% 50%); }
  .step-head__glass { margin: .75rem; padding: 1rem 1.25rem; border-radius: 1rem; }
}

/* links / details inside the step */
.step-chip { display: inline-flex; align-items: center; gap: .375rem; min-height: 44px; max-width: 100%; padding: 0 1rem; border-radius: 999px; font-size: .875rem;
  color: var(--step-ink); background: #fff; border: 1px solid rgba(var(--step-rgb),.4); transition: border-color .2s ease, background-color .2s ease; }
.step-chip .msi { font-size: 18px; color: var(--step-accent); flex-shrink: 0; }
.step-chip:hover { border-color: var(--step-accent); background: var(--step-soft); }
.step-chip:focus-visible { outline: 3px solid var(--step-accent); outline-offset: 2px; }
.step-ico { color: var(--step-accent); }
.step-next { color: var(--step-ink); font-weight: 600; }
.step-next:hover { color: var(--step-accent); }
@media (prefers-reduced-motion: reduce) { .step-tab, .step-chip { transition: none; } }

/* ---- section head on a narrow photo band (<x-section-head>, owner 5 Oct 2026 "หัวแต่ละหัวข้อ เหมือน header แต่แคบกว่า ตัวหนังสือเบลอใส").
   One real photo per section (config/showcase.php "sections"), brand plum tint (--sh-rgb, or the page's season / step colour),
   eyebrow + title + lead on the /prepare glass panel: rgba(28,14,38,.62) + blur 10px, near-solid plum without backdrop-filter.
   Height ~8.5rem phones / 11rem desktop (min; the glass can grow it). Contrast audited on screenshots: >= 4.5:1 behind every word. */
.sh { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; border-radius: 1rem;
  min-height: 8.5rem; background: rgb(var(--sh-rgb, 61,22,95)); color: #fff; }
.sh-pic, .sh-pic img { position: absolute; inset: 0; width: 100%; height: 100%; }
.sh-pic { z-index: -2; }
.sh-pic img { object-fit: cover; object-position: var(--sh-pos-sm, 50% 50%); }
.sh--flip .sh-pic img { transform: scaleX(-1); }
.sh--blur .sh-pic img { filter: blur(10px); transform: scale(1.12); }
.sh--blur.sh--flip .sh-pic img { transform: scale(1.12) scaleX(-1); }
.sh-veil { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--sh-rgb, 61,22,95),.38) 0%, rgba(var(--sh-rgb, 61,22,95),.22) 42%, rgba(28,14,38,.66) 100%); }
.sh--flat .sh-veil { background: linear-gradient(120deg, rgba(var(--sh-rgb, 61,22,95),.92) 0%, rgba(28,14,38,.96) 100%); }
.sh--flat::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .35;
  background: radial-gradient(60% 120% at 85% 10%, rgba(255,215,176,.55), transparent 60%); }
.sh-row { position: relative; width: 100%; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .5rem .75rem; padding: .5rem; }
.sh-glass { max-width: 40rem; padding: .7rem .9rem; border-radius: .75rem; min-width: 0;
  background: rgba(28,14,38,.86); border: 1px solid rgba(255,255,255,.2); box-shadow: 0 8px 24px -12px rgba(0,0,0,.6); text-shadow: 0 1px 3px rgba(0,0,0,.75); }
.sh-eyebrow { display: flex; align-items: center; gap: .45rem; font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--sh-glow, #FFD7B0); }
.sh-eyebrow .msi { font-size: 18px; flex-shrink: 0; text-shadow: none; }
.sh-title { color: #fff; margin-top: .2rem; font-size: 1.5rem; line-height: 1.2; }
.sh-title em[style] { color: var(--sh-glow, #FFD7B0) !important; }
.sh-title .nw { white-space: nowrap; }
.sh-lead { margin-top: .3rem; color: rgba(255,255,255,.92); font-size: .9375rem; line-height: 1.5; }
.sh-aside { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; max-width: 100%; }
.sh-aside > label, .sh-aside > form { flex: 1 1 14rem; max-width: 100%; }
.sh a:focus-visible, .sh button:focus-visible, .sh input:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sh-glass { background: rgba(28,14,38,.62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}
@media (min-width: 768px) {
  .sh { min-height: 11rem; }
  .sh-pic img { object-position: var(--sh-pos, 50% 50%); }
  .sh-row { padding: .75rem; gap: .75rem 1rem; }
  .sh-glass { padding: .9rem 1.2rem; border-radius: 1rem; }
  .sh-title { font-size: 1.875rem; }
  .sh-lead { font-size: 1rem; }
}
@media (min-width: 1024px) { .sh-title { font-size: 2.125rem; } }
/* a section head centred under a centred layout (3 steps, FAQ): same band, glass in the middle */
.sh--center .sh-row { justify-content: center; }
.sh--center .sh-glass { text-align: center; }
.sh--center .sh-eyebrow { justify-content: center; }
@media (prefers-reduced-motion: reduce) { .sh--blur .sh-pic img { filter: blur(10px); } }

/* ---- /themes month cards (owner 5 Oct 2026 "เลือกเป็นรูป"): the style card with the month's hero photo, season border, stacked label
   (month + season icon / programme count / school-holiday line, the last one small and muted: "ส่วนนี้ไม่ต้องเด่น").
   White .92 and .78 on the glass (>= .62 plum + blur, measured >= 4.5:1 behind the words on these photos). */
.style-card--month { aspect-ratio: 3 / 4; }
.style-card--flip img { transform: scaleX(-1); }
.style-card--flip:hover img { transform: scaleX(-1) scale(1.05); }
.style-card__label--stack { flex-direction: column; align-items: flex-start; gap: .15rem; }
.mcard__sub { font-size: 12px; font-weight: 500; color: rgba(255,255,255,.92); line-height: 1.3; }
.mcard__school { font-size: 11.5px; font-weight: 400; color: rgba(255,255,255,.78); line-height: 1.3; }
@media (min-width: 768px) { .style-card--month { aspect-ratio: 4 / 3; } .mcard__sub { font-size: 13px; } .mcard__school { font-size: 12px; } }