/* ==========================================================================
   naporsong — Design v4 · "Royal Thai Heritage"
   เรียบหรู · ลายไทย · สีทอง (ivory + antique gold + night)
   Mobile-first, reduced-motion aware, scoped to <body class="v4">
   ========================================================================== */

:root {
  --v4-pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%23C9A24B' stroke-width='1'%3E%3Cpath d='M22 0 44 22 22 44 0 22Z'/%3E%3Cpath d='M0 0q11 11 0 22'/%3E%3Cpath d='M44 0q-11 11 0 22'/%3E%3Cpath d='M0 44q11-11 0-22'/%3E%3Cpath d='M44 44q-11-11 0-22'/%3E%3C/g%3E%3Cpath d='M22 13c4 5 4 9 0 14c-4-5-4-9 0-14z' fill='%23C9A24B' fill-opacity='.5'/%3E%3C/svg%3E");
}

/* ---------- 1 · base ---------------------------------------------------- */

html { scroll-behavior: smooth; }

body.v4 {
  --ink: #1b1712;
  --muted: #6d6253;
  --paper: #fcf9f3;
  --linen: #f4eddf;
  --line: #e6dbc4;
  --gold: #c1972f;
  --gold-lt: #ebcf87;
  --gold-ink: #8a6a24;
  --night: #14100c;
  --night-2: #1f1913;
  --serif: "Trirong", "Noto Serif Thai", Georgia, serif;
  --sans: "Noto Sans Thai", system-ui, -apple-system, "Segoe UI", sans-serif;
  --max: 1180px;
  --shadow: 0 24px 50px -30px rgba(72, 52, 14, .55);
  --grad-gold: linear-gradient(100deg, #a37c1f 0%, #e7c978 28%, #fff6de 46%, #e7c978 64%, #a37c1f 100%);
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.v4 *,
body.v4 *::before,
body.v4 *::after { box-sizing: border-box; }

body.v4 .container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: 20px; }
body.v4 .narrow { max-width: 780px; }
body.v4 .center { text-align: center; }
body.v4 p { margin: 0 0 1em; }
body.v4 img, body.v4 svg { max-width: 100%; }
body.v4 figure { margin: 0; }
body.v4 address { font-style: normal; }
body.v4 code { background: var(--linen); border: 1px solid var(--line); padding: 1px 7px; font-size: .86em; }
body.v4 :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
body.v4 a { color: var(--gold-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
body.v4 a:hover { color: var(--ink); }

body.v4 h1, body.v4 h2, body.v4 h3, body.v4 h4 {
  font-family: var(--serif);
  color: var(--ink);
  line-height: 1.45;
  margin: 0 0 .5em;
  font-weight: 700;
  letter-spacing: .01em;
}

body.v4 .dim { color: var(--muted); }
body.v4 .meta { font-size: .85rem; color: var(--muted); letter-spacing: .02em; }
body.v4 .lead { font-size: 1.05rem; color: var(--muted); }

body.v4 .skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 500;
  background: var(--night); color: var(--gold-lt); padding: 12px 20px;
  font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--gold);
}
body.v4 .skip-link:focus { left: 0; }

/* placeholder art (mirrors data/images.json slots) */
body.v4 .ph {
  position: relative; overflow: hidden; width: 100%; display: block;
  background: var(--night-2); border: 1px solid rgba(193, 151, 47, .45);
}
body.v4 .ph-art { position: absolute; inset: 0; width: 100%; height: 100%; }
body.v4 .ph-tag {
  position: absolute; left: 10px; right: 10px; bottom: 10px;
  display: flex; flex-direction: column; gap: 2px;
  background: rgba(20, 16, 12, .82); color: #f3ead8;
  border: 1px dashed rgba(235, 207, 135, .75); padding: 7px 11px;
  font-size: .78rem; line-height: 1.5;
}
body.v4 .ph-key { font-weight: 700; color: var(--gold-lt); letter-spacing: .04em; font-size: .74rem; }
body.v4 .ph-label { opacity: .9; }
body.v4 .ph-fig { margin: 0; }
body.v4 .ph-img { width: 100%; height: auto; display: block; object-fit: cover; }
body.v4 .img-credit { font-size: .76rem; color: var(--muted); padding-top: 8px; margin: 0; }

/* ---------- 2 · ornaments ------------------------------------------------ */

body.v4 .v4-eyebrow,
body.v4 .kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-size: .84rem; font-weight: 700;
  letter-spacing: .16em; text-transform: none;
  color: var(--gold-ink); margin: 0 0 .7em;
}
body.v4 .v4-eyebrow::before,
body.v4 .kicker::before {
  content: ""; width: 26px; height: 1px; background: var(--gold); flex: none;
}
body.v4 .v4-eyebrow.on-dark,
body.v4 .kicker.on-dark { color: var(--gold-lt); }
body.v4 .v4-eyebrow.on-dark::before,
body.v4 .kicker.on-dark::before { background: var(--gold-lt); }
body.v4 .v4-eyebrow.center,
body.v4 .kicker.center { justify-content: center; }

body.v4 .v4-orn {
  display: flex; justify-content: center; color: var(--gold);
  margin: 14px auto 0; pointer-events: none;
}
body.v4 .v4-orn svg { width: min(300px, 78vw); height: auto; display: block; }
body.v4 .v4-orn.tight { margin-top: 8px; }

/* gold foil text (use on dark only) */
body.v4 .v4-shine {
  background: var(--grad-gold);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: v4shine 9s linear infinite;
}
@keyframes v4shine { 0% { background-position: 180% 0; } 100% { background-position: -80% 0; } }

/* double gold frame */
body.v4 .v4-frame { position: relative; }
body.v4 .v4-frame::before {
  content: ""; position: absolute; inset: -10px; pointer-events: none;
  border: 1px solid rgba(193, 151, 47, .55);
  transition: inset .45s cubic-bezier(.2, .7, .3, 1), border-color .45s ease;
}
body.v4 .v4-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border: 1px solid rgba(193, 151, 47, .85);
}
body.v4 .v4-frame:hover::before { inset: -16px; border-color: var(--gold); }

/* corner brackets (cards) */
body.v4 .v4-corners { position: relative; }
body.v4 .v4-corners::before,
body.v4 .v4-corners::after {
  content: ""; position: absolute; width: 20px; height: 20px; z-index: 3;
  border: 2px solid var(--gold); opacity: 0;
  transition: opacity .35s ease, transform .35s cubic-bezier(.2, .7, .3, 1);
}
body.v4 .v4-corners::before { top: 9px; left: 9px; border-right: 0; border-bottom: 0; transform: translate(-8px, -8px); }
body.v4 .v4-corners::after { bottom: 9px; right: 9px; border-left: 0; border-top: 0; transform: translate(8px, 8px); }
body.v4 .v4-corners:hover::before,
body.v4 .v4-corners:hover::after,
body.v4 a.v4-corners:focus-visible::before,
body.v4 a.v4-corners:focus-visible::after { opacity: 1; transform: none; }

/* pattern layer for dark surfaces */
body.v4 .v4-pat::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--v4-pat); background-size: 44px 44px;
  opacity: .13;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 10%, #000 30%, transparent 100%);
  mask-image: radial-gradient(120% 90% at 50% 10%, #000 30%, transparent 100%);
}

/* ---------- 3 · progress / topbar / nav ---------------------------------- */

body.v4 .v4-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 400;
  background: var(--grad-gold); background-size: 200% 100%;
  box-shadow: 0 0 12px rgba(235, 207, 135, .7);
}

body.v4 .v4-topbar {
  background: var(--night); color: #cbbfa8; font-size: .76rem;
  letter-spacing: .04em; border-bottom: 1px solid rgba(193, 151, 47, .35);
  position: relative; z-index: 210;
}
body.v4 .v4-topbar-inner {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; min-height: 38px;
}
body.v4 .v4-topbar p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.v4 .v4-topbar nav { display: flex; align-items: center; gap: 2px; flex: none; }
body.v4 .v4-topbar nav span { color: var(--gold-lt); margin-right: 4px; font-weight: 600; }
body.v4 .v4-topbar nav a {
  color: #cbbfa8; text-decoration: none; padding: 3px 8px;
  border: 1px solid transparent; white-space: nowrap; transition: .2s ease;
}
body.v4 .v4-topbar nav a:hover { color: var(--gold-lt); border-color: rgba(193, 151, 47, .5); }
body.v4 .v4-topbar nav a[aria-current="true"] {
  color: var(--night); background: var(--gold-lt); border-color: var(--gold-lt); font-weight: 700;
}

body.v4 .v4-nav {
  position: sticky; top: 0; z-index: 220;
  background: rgba(252, 249, 243, .92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s ease, background .3s ease;
}
body.v4 .v4-nav.scrolled { box-shadow: 0 10px 30px -22px rgba(40, 28, 8, .7); background: rgba(252, 249, 243, .98); }
body.v4 .v4-nav-inner { display: flex; align-items: center; gap: 12px; min-height: 70px; }

body.v4 .v4-brand {
  display: flex; align-items: center; gap: 11px; margin-right: auto;
  min-width: 0; text-decoration: none;
}
body.v4 .v4-brand-mark { flex: none; width: 40px; height: 40px; display: block; }
body.v4 .v4-brand-mark svg { width: 40px; height: 40px; display: block; }
body.v4 .v4-brand-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
body.v4 .v4-brand-text strong {
  font-family: var(--serif); font-size: 1.06rem; color: var(--ink); font-weight: 700;
  white-space: nowrap;
}
body.v4 .v4-brand-text small {
  font-size: .66rem; color: var(--gold-ink); letter-spacing: .14em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

body.v4 .v4-burger {
  display: none; background: transparent; border: 1px solid var(--line);
  padding: 10px 11px; cursor: pointer; flex: none; border-radius: 2px;
}
body.v4 .v4-burger span { display: block; width: 20px; height: 2px; background: var(--ink); margin: 4px 0; transition: .3s ease; }
body.v4 .v4-burger[aria-expanded="true"] { border-color: var(--gold); }
body.v4 .v4-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.v4 .v4-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
body.v4 .v4-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

body.v4 .v4-menu { display: flex; align-items: center; gap: 4px; }
body.v4 .v4-menu a {
  position: relative; text-decoration: none; color: var(--ink);
  font-size: .93rem; font-weight: 500; padding: 8px 11px; transition: color .25s ease;
}
body.v4 .v4-menu a::after {
  content: ""; position: absolute; left: 11px; right: 11px; bottom: 2px; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .3s cubic-bezier(.2, .7, .3, 1);
}
body.v4 .v4-menu a:hover { color: var(--gold-ink); }
body.v4 .v4-menu a:hover::after { transform: scaleX(1); }
body.v4 .v4-menu a.on { color: var(--gold-ink); font-weight: 700; }
body.v4 .v4-menu a.on::after { transform: scaleX(1); height: 2px; }
body.v4 .v4-menu .v4-cta {
  margin-left: 8px; border: 1px solid var(--gold); color: var(--gold-ink);
  font-weight: 700; padding: 9px 16px; border-radius: 2px;
  background: linear-gradient(180deg, rgba(235, 207, 135, .18), rgba(235, 207, 135, .05));
  transition: .3s ease;
}
body.v4 .v4-menu .v4-cta::after { display: none; }
body.v4 .v4-menu .v4-cta:hover { background: var(--gold); color: var(--night); box-shadow: 0 10px 24px -14px rgba(163, 124, 31, .9); }

/* ---------- 4 · buttons --------------------------------------------------- */

body.v4 .v4-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 1.6em; }
body.v4 .v4-actions.center { justify-content: center; }

body.v4 .btn4 {
  position: relative; overflow: hidden; display: inline-flex; align-items: center;
  justify-content: center; gap: 8px; text-decoration: none; cursor: pointer;
  font-family: var(--sans); font-weight: 700; font-size: .95rem;
  padding: 13px 26px; border-radius: 2px; border: 1px solid transparent;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
body.v4 .btn4::before {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-20deg); transition: left .6s ease;
}
body.v4 .btn4:hover::before { left: 140%; }
body.v4 .btn4:hover { transform: translateY(-2px); }
body.v4 .btn4:active { transform: translateY(0); }

body.v4 .btn4-gold {
  background: var(--grad-gold); background-size: 200% 100%;
  color: #2a2007; border-color: #b48d2b;
  box-shadow: 0 14px 30px -18px rgba(163, 124, 31, .95);
}
body.v4 .btn4-gold:hover { color: #1c1503; background-position: 90% 0; box-shadow: 0 20px 34px -18px rgba(163, 124, 31, .95); }

body.v4 .btn4-dark { background: var(--night); color: var(--gold-lt); border-color: var(--night); }
body.v4 .btn4-dark:hover { background: var(--night-2); color: #fff4d8; }

body.v4 .btn4-ghost {
  background: transparent; color: var(--ink); border-color: rgba(193, 151, 47, .75);
}
body.v4 .btn4-ghost:hover { background: rgba(235, 207, 135, .18); color: var(--ink); }

body.v4 .btn4-ghost.on-dark { color: var(--gold-lt); border-color: rgba(235, 207, 135, .6); }
body.v4 .btn4-ghost.on-dark:hover { background: rgba(235, 207, 135, .14); color: #fff4d8; }

body.v4 .btn4[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
body.v4 .btn4[disabled]::before { display: none; }

body.v4 .v4-arrow {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  font-weight: 700; font-size: .9rem; color: var(--gold-ink);
}
body.v4 .v4-arrow span { transition: transform .3s cubic-bezier(.2, .7, .3, 1); }
body.v4 .v4-arrow:hover { color: var(--ink); }
body.v4 .v4-arrow:hover span { transform: translateX(5px); }

/* ---------- 5 · hero ------------------------------------------------------ */

body.v4 .v4-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--night); color: #ece2cd;
  padding: clamp(46px, 8vw, 92px) 0 clamp(52px, 8vw, 96px);
}
body.v4 .v4-hero::after {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background:
    radial-gradient(60% 55% at 18% 26%, rgba(193, 151, 47, .30), transparent 68%),
    radial-gradient(50% 50% at 88% 78%, rgba(163, 124, 31, .24), transparent 70%);
}
body.v4 .v4-hero-grid { display: grid; grid-template-columns: 1fr; gap: 44px; align-items: center; position: relative; z-index: 2; }
body.v4 .v4-hero h1 { color: #fff; margin-bottom: .3em; font-weight: 700; }
body.v4 .v4-hero h1 .h-main {
  display: block; font-size: clamp(2.1rem, 7vw, 3.5rem); line-height: 1.25; letter-spacing: .02em;
}
body.v4 .v4-hero h1 .h-sub {
  display: block; font-size: clamp(1.05rem, 3.4vw, 1.5rem); font-weight: 500;
  color: var(--gold-lt); line-height: 1.6; margin-top: .3em; font-style: italic;
}
body.v4 .v4-hero-sub { color: #cec3ab; max-width: 36em; font-size: 1rem; }
body.v4 .v4-hero .v4-eyebrow { color: var(--gold-lt); }
body.v4 .v4-hero .v4-eyebrow::before { background: var(--gold-lt); }

body.v4 .v4-hero-facts { display: flex; gap: 10px; margin: 1.9em 0 0; padding: 0; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
body.v4 .v4-hero-facts::-webkit-scrollbar { height: 0; }
body.v4 .v4-hero-facts div {
  flex: 0 0 auto; scroll-snap-align: start; min-width: 178px;
  border: 1px solid rgba(193, 151, 47, .45); border-left-width: 3px;
  padding: 11px 15px; background: rgba(255, 255, 255, .03);
}
body.v4 .v4-hero-facts dt { font-size: .72rem; letter-spacing: .14em; color: var(--gold-lt); font-weight: 700; }
body.v4 .v4-hero-facts dd { margin: 2px 0 0; font-size: .92rem; color: #f2ead8; font-weight: 500; }

body.v4 .v4-hero-media { position: relative; min-width: 0; }
body.v4 .v4-hero-media .ph,
body.v4 .v4-hero-media .ph-img,
body.v4 .v4-hero-media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  border: 1px solid rgba(235, 207, 135, .55);
  animation: v4heroIn 1.2s cubic-bezier(.2, .7, .3, 1) both;
}
body.v4 .v4-hero-media figcaption { font-size: .79rem; color: #a99e88; padding-top: 22px; }
body.v4 .v4-hero-media .img-credit { color: #a99e88; }
@keyframes v4heroIn { from { opacity: 0; transform: scale(1.05); } to { opacity: 1; transform: none; } }

body.v4 .v4-spark {
  position: absolute; color: var(--gold-lt); font-size: 14px; opacity: .0;
  animation: v4twinkle 4.5s ease-in-out infinite; pointer-events: none; z-index: 1;
}
body.v4 .v4-spark.s1 { top: 14%; left: 6%; animation-delay: .2s; }
body.v4 .v4-spark.s2 { top: 32%; right: 8%; animation-delay: 1.4s; font-size: 18px; }
body.v4 .v4-spark.s3 { bottom: 18%; left: 14%; animation-delay: 2.6s; font-size: 12px; }
body.v4 .v4-spark.s4 { bottom: 30%; right: 22%; animation-delay: 3.4s; }
@keyframes v4twinkle {
  0%, 100% { opacity: 0; transform: translateY(8px) scale(.7); }
  45% { opacity: .95; transform: translateY(-6px) scale(1); }
}

/* intro animation for hero copy */
body.v4 .v4-rise { opacity: 0; transform: translateY(22px); animation: v4rise .9s cubic-bezier(.2, .7, .3, 1) both; }
body.v4 .v4-rise.d1 { animation-delay: .1s; }
body.v4 .v4-rise.d2 { animation-delay: .24s; }
body.v4 .v4-rise.d3 { animation-delay: .38s; }
body.v4 .v4-rise.d4 { animation-delay: .52s; }
@keyframes v4rise { to { opacity: 1; transform: none; } }

/* ---------- 6 · marquee --------------------------------------------------- */

body.v4 .v4-marquee {
  overflow: hidden; background: var(--night-2); color: var(--gold-lt);
  border-block: 1px solid rgba(193, 151, 47, .55); padding: 12px 0;
  position: relative;
}
body.v4 .v4-marquee::before,
body.v4 .v4-marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 70px; z-index: 2; pointer-events: none;
}
body.v4 .v4-marquee::before { left: 0; background: linear-gradient(90deg, var(--night-2), transparent); }
body.v4 .v4-marquee::after { right: 0; background: linear-gradient(270deg, var(--night-2), transparent); }
body.v4 .v4-marquee-track {
  display: inline-flex; gap: 24px; white-space: nowrap; padding-left: 24px;
  font-weight: 600; font-size: .92rem; letter-spacing: .04em;
  animation: v4slide 34s linear infinite;
}
body.v4 .v4-marquee-track i { font-style: normal; color: var(--gold); }
body.v4 .v4-marquee:hover .v4-marquee-track { animation-play-state: paused; }
@keyframes v4slide { to { transform: translateX(-50%); } }

/* ---------- 7 · sections -------------------------------------------------- */

body.v4 .v4-section { padding: clamp(56px, 9vw, 96px) 0; position: relative; }
body.v4 .v4-section.linen { background: var(--linen); }
body.v4 .v4-section.linen::before,
body.v4 .v4-section.linen::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(193, 151, 47, .6), transparent);
}
body.v4 .v4-section.linen::before { top: 0; }
body.v4 .v4-section.linen::after { bottom: 0; }

body.v4 .v4-sec-head { text-align: center; max-width: 720px; margin: 0 auto 40px; }
body.v4 .v4-sec-head h2 { font-size: clamp(1.55rem, 4.4vw, 2.3rem); margin-bottom: .1em; }
body.v4 .v4-sec-head p.v4-note { color: var(--muted); margin: .7em 0 0; font-size: .97rem; }
body.v4 .v4-sec-head .v4-arrow { margin-top: 14px; }

body.v4 .v4-pagehero {
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(48px, 8vw, 84px) 0 clamp(38px, 6vw, 62px);
  background: var(--night); color: #ece2cd;
}
body.v4 .v4-pagehero::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(70% 100% at 50% 0%, rgba(193, 151, 47, .26), transparent 70%);
}
body.v4 .v4-pagehero .container { position: relative; z-index: 2; }
body.v4 .v4-pagehero h1 {
  color: #fff; font-size: clamp(1.9rem, 6vw, 3rem); margin-bottom: .18em; font-weight: 700;
}
body.v4 .v4-pagehero .lead { color: #c6bba3; max-width: 40em; margin-inline: auto; }
body.v4 .v4-pagehero .kicker a { color: var(--gold-lt); text-decoration: none; }
body.v4 .v4-pagehero .kicker a:hover { text-decoration: underline; }
body.v4 .v4-pagehero .meta { color: #a99e88; }
body.v4 .v4-pagehero .v4-orn { color: var(--gold-lt); margin-top: 18px; }

/* ---------- 8 · highlight cards ------------------------------------------ */

body.v4 .v4-cards { display: grid; grid-template-columns: 1fr; gap: 20px; }
body.v4 .v4-card {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--paper); border: 1px solid var(--line);
  border-top: 2px solid var(--gold);
  box-shadow: 0 1px 0 rgba(193, 151, 47, .18);
  transition: transform .35s cubic-bezier(.2, .7, .3, 1), box-shadow .35s ease, border-color .35s ease;
}
body.v4 .v4-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: rgba(193, 151, 47, .8); }
body.v4 .v4-card-media { position: relative; overflow: hidden; }
body.v4 .v4-card-media .ph,
body.v4 .v4-card-media .ph-img,
body.v4 .v4-card-media img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block;
  transition: transform .7s cubic-bezier(.2, .7, .3, 1);
}
body.v4 .v4-card:hover .v4-card-media .ph,
body.v4 .v4-card:hover .v4-card-media .ph-img,
body.v4 .v4-card:hover .v4-card-media img { transform: scale(1.06); }
body.v4 .v4-card-media .img-credit { display: none; }
body.v4 .v4-card-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
body.v4 .v4-num {
  font-family: var(--serif); font-size: .95rem; font-weight: 700; letter-spacing: .18em;
  color: var(--gold); display: block; margin-bottom: 10px;
}
body.v4 .v4-card h3 { font-size: 1.15rem; margin-bottom: .3em; }
body.v4 .v4-card p { color: var(--muted); font-size: .94rem; margin: 0 0 1.1em; }
body.v4 .v4-card .v4-arrow { margin-top: auto; }

/* ---------- 9 · news ------------------------------------------------------ */

body.v4 .v4-news { display: grid; grid-template-columns: 1fr; gap: 20px; }
body.v4 .v4-news-card {
  background: var(--paper); border: 1px solid var(--line); position: relative;
  display: flex; flex-direction: column; min-width: 0;
  transition: transform .35s cubic-bezier(.2, .7, .3, 1), box-shadow .35s ease, border-color .35s ease;
}
body.v4 .v4-news-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: rgba(193, 151, 47, .75); }
body.v4 .v4-news-card .ph,
body.v4 .v4-news-card .ph-img { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; display: block; }
body.v4 .v4-news-card .img-credit { display: none; }
body.v4 .v4-news-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
body.v4 .v4-news-body h3 { font-size: 1.08rem; margin: .1em 0 .35em; }
body.v4 .v4-news-body p { color: var(--muted); font-size: .93rem; }
body.v4 .v4-news-body .v4-arrow { margin-top: auto; padding-top: 8px; }

body.v4 .v4-empty {
  border: 1px solid var(--line); background: var(--paper); text-align: center;
  padding: 40px 26px; position: relative;
}
body.v4 .v4-empty::before {
  content: ""; position: absolute; inset: 8px; border: 1px dashed rgba(193, 151, 47, .5); pointer-events: none;
}
body.v4 .v4-empty-title { font-family: var(--serif); font-size: 1.2rem; font-weight: 700; color: var(--ink); }
body.v4 .v4-empty p { color: var(--muted); margin-bottom: 0; }

/* ---------- 10 · vision / dark bands -------------------------------------- */

body.v4 .v4-band {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--night); color: #e5dcc7; padding: clamp(56px, 9vw, 92px) 0;
}
body.v4 .v4-band::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(65% 70% at 50% 40%, rgba(193, 151, 47, .24), transparent 72%);
}
body.v4 .v4-band .container { position: relative; z-index: 2; text-align: center; }
body.v4 .v4-band blockquote { margin: 0 auto 1.4em; max-width: 860px; }
body.v4 .v4-band blockquote p {
  font-family: var(--serif); font-size: clamp(1.2rem, 3.6vw, 1.85rem);
  color: #fff8e6; line-height: 1.75; margin: 0 0 .5em; font-weight: 600;
}
body.v4 .v4-band cite { color: var(--gold-lt); font-style: italic; font-weight: 600; font-size: 1rem; }

body.v4 .v4-mission-strip {
  list-style: none; margin: 2em auto 2.2em; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: 10px; max-width: 940px; text-align: left;
}
body.v4 .v4-mission-strip li {
  display: flex; align-items: baseline; gap: 12px; min-width: 0;
  border: 1px solid rgba(193, 151, 47, .4); border-left: 3px solid var(--gold);
  background: rgba(255, 255, 255, .035); padding: 12px 16px;
  transition: background .3s ease, transform .3s ease;
}
body.v4 .v4-mission-strip li:hover { background: rgba(235, 207, 135, .12); transform: translateX(4px); }
body.v4 .v4-mission-strip li span { font-family: var(--serif); color: var(--gold-lt); font-weight: 700; flex: none; }
body.v4 .v4-mission-strip li strong { color: #f4ecda; font-weight: 600; font-size: .95rem; }

/* ---------- 11 · CTA band -------------------------------------------------- */

body.v4 .v4-cta-band {
  position: relative; text-align: center; padding: clamp(38px, 6vw, 58px) clamp(20px, 5vw, 56px);
  background: var(--linen); border: 1px solid rgba(193, 151, 47, .75);
}
body.v4 .v4-cta-band::before {
  content: ""; position: absolute; inset: 7px; border: 1px solid rgba(193, 151, 47, .35); pointer-events: none;
}
body.v4 .v4-cta-band h2 { font-size: clamp(1.4rem, 4vw, 2rem); margin-bottom: .25em; }
body.v4 .v4-cta-band p { color: var(--muted); max-width: 44em; margin-inline: auto; }
body.v4 .v4-cta-band .v4-actions { justify-content: center; }

/* ---------- 12 · page blocks (split / timeline / lists) -------------------- */

body.v4 .v4-split { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: center; }
body.v4 .v4-split .ph, body.v4 .v4-split .ph-img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; display: block; }
body.v4 .v4-split .img-credit { display: block; }

body.v4 .v4-shot { position: relative; min-width: 0; }
body.v4 .v4-shot .ph, body.v4 .v4-shot .ph-img { border: 1px solid rgba(193, 151, 47, .55); }

body.v4 .v4-timeline { position: relative; list-style: none; margin: 1.4em 0 0; padding: 0 0 0 30px; counter-reset: v4step; }
body.v4 .v4-timeline::before {
  content: ""; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 1px;
  background: linear-gradient(180deg, var(--gold), rgba(193, 151, 47, .25));
}
body.v4 .v4-timeline li { position: relative; padding: 0 0 26px; counter-increment: v4step; }
body.v4 .v4-timeline li::before {
  content: ""; position: absolute; left: -30px; top: 9px; width: 13px; height: 13px;
  background: var(--paper); border: 2px solid var(--gold); transform: rotate(45deg);
}
body.v4 .v4-timeline h3 { font-size: 1.05rem; margin-bottom: .15em; }
body.v4 .v4-timeline h3::before {
  content: counter(v4step, decimal-leading-zero) " · "; color: var(--gold); font-weight: 700;
}
body.v4 .v4-timeline p { color: var(--muted); font-size: .94rem; margin: 0; }

body.v4 .v4-source { font-size: .86rem; color: var(--gold-ink); font-style: italic; }
body.v4 .v4-todo {
  font-size: .9rem; color: var(--muted); background: rgba(235, 207, 135, .14);
  border-left: 3px solid var(--gold); padding: 12px 16px; margin-top: 1.4em;
}
body.v4 .v4-todo strong { color: var(--gold-ink); }

/* ---------- 13 · places ---------------------------------------------------- */

body.v4 .v4-filter { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 8px; }
body.v4 .v4-chip {
  font-family: var(--sans); font-size: .88rem; font-weight: 600; cursor: pointer;
  background: var(--paper); color: var(--ink); border: 1px solid var(--line);
  padding: 9px 18px; border-radius: 999px; transition: .25s ease;
}
body.v4 .v4-chip:hover { border-color: var(--gold); color: var(--gold-ink); }
body.v4 .v4-chip.on {
  background: var(--night); color: var(--gold-lt); border-color: var(--night);
  box-shadow: 0 10px 24px -16px rgba(20, 16, 12, .9);
}

body.v4 .v4-place {
  display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center;
  padding: clamp(30px, 5vw, 46px) 0; border-bottom: 1px solid var(--line);
}
body.v4 .v4-place[hidden] { display: none; }
body.v4 .v4-place .ph, body.v4 .v4-place .ph-img {
  aspect-ratio: 16 / 10; width: 100%; object-fit: cover; display: block;
  border: 1px solid rgba(193, 151, 47, .55);
}
body.v4 .v4-place .img-credit { display: block; }
body.v4 .v4-place h2 { font-size: clamp(1.3rem, 4vw, 1.75rem); margin: .2em 0 .35em; }
body.v4 .v4-place p { color: var(--muted); }

body.v4 .v4-badge {
  display: inline-flex; align-items: center; gap: 7px; font-size: .76rem; font-weight: 700;
  letter-spacing: .1em; padding: 5px 14px; border: 1px solid var(--gold);
  color: var(--gold-ink); background: rgba(235, 207, 135, .16);
}
body.v4 .v4-badge.in { background: var(--night); color: var(--gold-lt); border-color: var(--night); }

/* ---------- 14 · products -------------------------------------------------- */

body.v4 .v4-prod { display: grid; grid-template-columns: 1fr; gap: 20px; }
body.v4 .v4-prod-card {
  position: relative; background: var(--paper); border: 1px solid var(--line);
  border-bottom: 2px solid var(--gold); min-width: 0; overflow: hidden;
  transition: transform .35s cubic-bezier(.2, .7, .3, 1), box-shadow .35s ease, border-color .35s ease;
}
body.v4 .v4-prod-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: rgba(193, 151, 47, .8); }
body.v4 .v4-prod-card .ph, body.v4 .v4-prod-card .ph-img {
  aspect-ratio: 16 / 10; width: 100%; object-fit: cover; display: block;
  transition: transform .7s cubic-bezier(.2, .7, .3, 1);
}
body.v4 .v4-prod-card:hover .ph, body.v4 .v4-prod-card:hover .ph-img { transform: scale(1.06); }
body.v4 .v4-prod-card .img-credit { display: none; }
body.v4 .v4-prod-body { padding: 20px 22px 24px; }
body.v4 .v4-prod-body h2 { font-size: 1.14rem; }
body.v4 .v4-prod-body p { color: var(--muted); font-size: .93rem; margin: 0; }

/* ---------- 15 · forms / faq / notice ------------------------------------- */

body.v4 .v4-notice {
  position: relative; border: 1px solid rgba(193, 151, 47, .7); background: rgba(235, 207, 135, .14);
  padding: 20px 22px; margin-bottom: 2em;
}
body.v4 .v4-notice::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gold);
}
body.v4 .v4-notice strong { display: block; font-family: var(--serif); font-size: 1.08rem; color: var(--ink); margin-bottom: .3em; }
body.v4 .v4-notice p { margin: 0; color: var(--muted); font-size: .94rem; }

body.v4 .v4-check { list-style: none; padding: 0; margin: 0 0 2em; }
body.v4 .v4-check li {
  position: relative; padding: 12px 0 12px 34px; border-bottom: 1px solid var(--line); font-size: .97rem;
}
body.v4 .v4-check li::before {
  content: "◆"; position: absolute; left: 6px; top: 12px; color: var(--gold); font-size: .85rem;
}

body.v4 .v4-form {
  border: 1px solid var(--line); background: var(--paper); padding: 24px 20px;
  margin: 1em 0 2.4em; position: relative;
}
body.v4 .v4-form::before {
  content: ""; position: absolute; inset: 6px; border: 1px dashed rgba(193, 151, 47, .4); pointer-events: none;
}
body.v4 .v4-form fieldset { border: none; padding: 0; margin: 0; min-width: 0; position: relative; }
body.v4 .v4-form label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 13px; }
body.v4 .v4-form input,
body.v4 .v4-form select,
body.v4 .v4-form textarea {
  display: block; width: 100%; margin-top: 6px; padding: 12px 13px;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  font-family: var(--sans); font-size: .95rem; border-radius: 2px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
body.v4 .v4-form input:focus,
body.v4 .v4-form select:focus,
body.v4 .v4-form textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(235, 207, 135, .3); outline: none; }
body.v4 .v4-form-grid { display: grid; grid-template-columns: 1fr; gap: 0 16px; }

body.v4 .v4-faq details {
  border: 1px solid var(--line); background: var(--paper); padding: 0; margin-bottom: 10px;
  transition: border-color .25s ease;
}
body.v4 .v4-faq details[open] { border-color: rgba(193, 151, 47, .75); }
body.v4 .v4-faq summary {
  cursor: pointer; font-weight: 700; color: var(--ink); padding: 15px 44px 15px 18px;
  position: relative; list-style: none; font-size: .98rem;
}
body.v4 .v4-faq summary::-webkit-details-marker { display: none; }
body.v4 .v4-faq summary::after {
  content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  color: var(--gold); font-size: 1.3rem; font-weight: 400; transition: transform .3s ease;
}
body.v4 .v4-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
body.v4 .v4-faq details p { padding: 0 18px 16px; margin: 0; color: var(--muted); font-size: .94rem; }

body.v4 .v4-article h2 {
  font-size: 1.28rem; margin-top: 1.8em; padding-top: .7em; position: relative;
}
body.v4 .v4-article h2::before {
  content: ""; position: absolute; top: 0; left: 0; width: 54px; height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
body.v4 .v4-article h2:first-child { margin-top: 0; }
body.v4 .v4-article p { color: var(--muted); }
body.v4 .v4-article p strong { color: var(--ink); }

body.v4 .v4-address {
  border: 1px solid var(--line); border-left: 3px solid var(--gold);
  background: var(--linen); padding: 20px 22px; font-size: 1rem;
}
body.v4 .v4-map-note { border: 1px solid var(--line); background: var(--linen); padding: 22px; }
body.v4 .v4-map-note strong { display: block; font-family: var(--serif); font-size: 1.05rem; margin-bottom: .3em; }
body.v4 .v4-map-frame { width: 100%; min-height: 340px; border: 1px solid rgba(193, 151, 47, .55); }

body.v4 .v4-error-code {
  font-family: var(--serif); font-size: clamp(4rem, 18vw, 7rem); font-weight: 700;
  line-height: 1; margin: 0; color: transparent;
  background: var(--grad-gold); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  animation: v4shine 8s linear infinite;
}
body.v4 .v4-portrait { max-width: 400px; }
body.v4 .v4-portrait .ph, body.v4 .v4-portrait .ph-img {
  aspect-ratio: 3 / 4; width: 100%; object-fit: cover; display: block;
  border: 1px solid rgba(193, 151, 47, .55);
}

/* ---------- 16 · footer ---------------------------------------------------- */

body.v4 .v4-footer {
  position: relative; overflow: hidden; background: var(--night); color: #b8ad97;
  padding-top: 62px; isolation: isolate;
}
body.v4 .v4-footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 44px;
  background-image: var(--v4-pat); background-size: 44px 44px; opacity: .35;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent);
  mask-image: linear-gradient(180deg, #000, transparent);
}
body.v4 .v4-footer-grid {
  display: grid; grid-template-columns: 1fr; gap: 30px; padding-bottom: 44px;
}
body.v4 .v4-footer strong { display: block; color: var(--gold-lt); font-family: var(--serif); font-size: 1.05rem; margin-bottom: .7em; letter-spacing: .03em; }
body.v4 .v4-footer p { font-size: .9rem; margin: 0 0 .8em; }
body.v4 .v4-footer a { display: block; color: #cec3ab; text-decoration: none; font-size: .92rem; padding: 5px 0; transition: color .25s ease, transform .25s ease; }
body.v4 .v4-footer a:hover { color: var(--gold-lt); transform: translateX(4px); }
body.v4 .v4-footer nav strong { border-bottom: 1px solid rgba(193, 151, 47, .45); padding-bottom: 8px; }
body.v4 .v4-footer-brand strong { font-size: 1.3rem; }
body.v4 .v4-footer-note { font-size: .83rem; color: #8e8471; border-left: 2px solid rgba(193, 151, 47, .55); padding-left: 12px; }
body.v4 .v4-footer .dim { color: #8e8471; }
body.v4 .v4-footer-bottom { border-top: 1px solid rgba(193, 151, 47, .3); }
body.v4 .v4-footer-bottom-inner {
  display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between;
  align-items: center; padding-block: 18px; font-size: .83rem; color: #8e8471;
}
body.v4 .v4-footer-bottom p { margin: 0; }
body.v4 .v4-footer-bottom a { display: inline; color: var(--gold-lt); padding: 0; }

body.v4 .v4-top {
  position: fixed; right: 16px; bottom: 16px; z-index: 300; width: 46px; height: 46px;
  border: 1px solid var(--gold); background: var(--night); color: var(--gold-lt);
  font-size: 1.1rem; cursor: pointer; border-radius: 2px;
  transition: transform .3s ease, background .3s ease, opacity .3s ease;
}
body.v4 .v4-top:hover { background: var(--gold); color: var(--night); transform: translateY(-4px); }
body.v4 .v4-top[hidden] { display: none; }

/* ---------- 17 · reveal ---------------------------------------------------- */

body.v4 .v4-reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.2, .7, .3, 1), transform .7s cubic-bezier(.2, .7, .3, 1); }
body.v4 .v4-reveal.in { opacity: 1; transform: none; }
body.v4 .v4-reveal[data-delay="1"] { transition-delay: .1s; }
body.v4 .v4-reveal[data-delay="2"] { transition-delay: .2s; }
body.v4 .v4-reveal[data-delay="3"] { transition-delay: .3s; }

/* ---------- 18 · responsive ------------------------------------------------ */

@media (min-width: 640px) {
  body.v4 .v4-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.v4 .v4-news { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.v4 .v4-mission-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.v4 .v4-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.v4 .v4-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  body.v4 .v4-hero-grid { grid-template-columns: 1.04fr .96fr; gap: 56px; }
  body.v4 .v4-split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 52px; }
  body.v4 .v4-split.flip > :first-child { order: 2; }
  body.v4 .v4-news { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.v4 .v4-prod { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  body.v4 .v4-place { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 46px; }
  body.v4 .v4-place.flip > :first-child { order: 2; }
  body.v4 .v4-mission-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.v4 .v4-footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.1fr; }
  body.v4 .v4-portrait { max-width: none; }
}

@media (min-width: 1080px) {
  body.v4 .v4-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.v4 .v4-hero-facts div { min-width: 196px; }
}

/* mobile navigation: drawer from the right */
@media (max-width: 1023px) {
  body.v4 .v4-burger { display: block; }
  body.v4 .v4-menu {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(320px, 86vw);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 2px; padding: 86px 22px 30px; background: var(--night);
    border-left: 1px solid rgba(193, 151, 47, .55);
    transform: translateX(100%); transition: transform .4s cubic-bezier(.2, .7, .3, 1);
    overflow-y: auto; z-index: 240; box-shadow: -30px 0 60px -40px rgba(0, 0, 0, .9);
  }
  body.v4 .v4-menu.open { transform: none; }
  body.v4 .v4-menu a {
    color: #e6dcc6; font-size: 1rem; padding: 14px 4px;
    border-bottom: 1px solid rgba(193, 151, 47, .22);
  }
  body.v4 .v4-menu a::after { display: none; }
  body.v4 .v4-menu a.on { color: var(--gold-lt); box-shadow: inset 3px 0 0 var(--gold); padding-left: 12px; }
  body.v4 .v4-menu .v4-cta { margin: 18px 0 0; text-align: center; border-color: var(--gold-lt); color: var(--gold-lt); }
  body.v4 .v4-nav { position: sticky; }
  body.v4 .v4-scrim {
    position: fixed; inset: 0; background: rgba(10, 8, 5, .55); z-index: 230;
    opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s ease;
  }
  body.v4 .v4-scrim.open { opacity: 1; visibility: visible; }
  body.v4 .v4-hero-facts { padding-bottom: 4px; }
}

@media (min-width: 1024px) {
  body.v4 .v4-scrim { display: none; }
}

/* ---------- 19 · reduced motion ------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body.v4 .v4-reveal { opacity: 1; transform: none; transition: none; }
  body.v4 .v4-rise { opacity: 1; transform: none; animation: none; }
  body.v4 .v4-marquee-track { animation: none; }
  body.v4 .v4-shine, body.v4 .v4-error-code { animation: none; -webkit-text-fill-color: currentColor; }
  body.v4 .v4-error-code { color: var(--gold); background: none; }
  body.v4 .v4-spark { animation: none; opacity: .5; }
  body.v4 .v4-hero-media .ph, body.v4 .v4-hero-media .ph-img, body.v4 .v4-hero-media img { animation: none; }
  body.v4 .v4-card, body.v4 .v4-news-card, body.v4 .v4-prod-card, body.v4 .btn4 { transition: none; }
  body.v4 .v4-card:hover, body.v4 .v4-news-card:hover, body.v4 .v4-prod-card:hover { transform: none; }
}