/* base.css — reset, shared tokens and per-script typography for every Bonvo page.
   Landing pages restyle by overriding the custom properties below in their own page.css. */

/* fonts:begin — generated by tools/fonts/build-fonts.mjs, edit the script not this block */
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:300 400;font-display:swap;src:url(/assets/fonts/cormorant-garamond/cormorant-garamond-i300-400-latin-ext.e3908a15.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:300 400;font-display:swap;src:url(/assets/fonts/cormorant-garamond/cormorant-garamond-i300-400-latin.01c9275a.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300 500;font-display:swap;src:url(/assets/fonts/cormorant-garamond/cormorant-garamond-n300-500-latin-ext.6b8bf3dd.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300 500;font-display:swap;src:url(/assets/fonts/cormorant-garamond/cormorant-garamond-n300-500-latin.5a7f94a1.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Jost";font-style:normal;font-weight:300 500;font-display:swap;src:url(/assets/fonts/jost/jost-n300-500-latin-ext.7a55c062.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Jost";font-style:normal;font-weight:300 500;font-display:swap;src:url(/assets/fonts/jost/jost-n300-500-latin.180347d9.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Cormorant Garamond Fallback";font-style:normal;src:local("Times New Roman"),local("TimesNewRomanPSMT");size-adjust:97.05%;ascent-override:95.21%;descent-override:29.57%;line-gap-override:0.00%;}
@font-face{font-family:"Cormorant Garamond Fallback";font-style:italic;src:local("Times New Roman Italic"),local("TimesNewRomanPS-ItalicMT");size-adjust:87.33%;ascent-override:105.80%;descent-override:32.86%;line-gap-override:0.00%;}
@font-face{font-family:"Cormorant Garamond Fallback Android";font-style:normal;src:local("Noto Serif"),local("NotoSerif-Regular"),local("NotoSerif");size-adjust:81.39%;ascent-override:113.53%;descent-override:35.26%;line-gap-override:0.00%;}
@font-face{font-family:"Cormorant Garamond Fallback Android";font-style:italic;src:local("Noto Serif Italic"),local("NotoSerif-Italic");size-adjust:75.62%;ascent-override:122.20%;descent-override:37.95%;line-gap-override:0.00%;}
@font-face{font-family:"Jost Fallback";font-style:normal;src:local("Arial"),local("ArialMT");size-adjust:96.03%;ascent-override:111.42%;descent-override:39.05%;line-gap-override:0.00%;}
@font-face{font-family:"Jost Fallback Android";font-style:normal;src:local("Roboto"),local("Roboto-Regular"),local("Roboto Regular");size-adjust:95.81%;ascent-override:111.68%;descent-override:39.14%;line-gap-override:0.00%;}
@font-face{font-family:"Amiri Fallback";font-style:normal;font-weight:400;src:local("Geeza Pro"),local("GeezaPro"),local("Geeza Pro Regular");size-adjust:92.12%;ascent-override:122.01%;descent-override:68.82%;line-gap-override:0.00%;}
@font-face{font-family:"Amiri Fallback";font-style:normal;font-weight:700;src:local("Geeza Pro Bold"),local("GeezaPro-Bold");size-adjust:77.18%;ascent-override:145.64%;descent-override:82.15%;line-gap-override:0.00%;}
@font-face{font-family:"Amiri Fallback Android";font-style:normal;font-weight:400;src:local("Noto Naskh Arabic"),local("NotoNaskhArabic-Regular");size-adjust:87.49%;ascent-override:128.48%;descent-override:72.47%;line-gap-override:0.00%;}
@font-face{font-family:"Amiri Fallback Android";font-style:normal;font-weight:700;src:local("Noto Naskh Arabic Bold"),local("NotoNaskhArabic-Bold");size-adjust:84.02%;ascent-override:133.77%;descent-override:75.46%;line-gap-override:0.00%;}
@font-face{font-family:"IBM Plex Sans Arabic Fallback";font-style:normal;font-weight:400;src:local("Geeza Pro"),local("GeezaPro"),local("Geeza Pro Regular");size-adjust:107.92%;ascent-override:100.53%;descent-override:38.45%;line-gap-override:0.00%;}
@font-face{font-family:"IBM Plex Sans Arabic Fallback Android";font-style:normal;font-weight:400;src:local("Noto Naskh Arabic"),local("NotoNaskhArabic-Regular");size-adjust:102.49%;ascent-override:105.86%;descent-override:40.49%;line-gap-override:0.00%;}
@font-face{font-family:"Aref Ruqaa Fallback";font-style:normal;font-weight:400;src:local("Geeza Pro"),local("GeezaPro"),local("Geeza Pro Regular");size-adjust:85.91%;ascent-override:142.13%;descent-override:28.40%;line-gap-override:11.41%;}
@font-face{font-family:"Aref Ruqaa Fallback Android";font-style:normal;font-weight:400;src:local("Noto Naskh Arabic"),local("NotoNaskhArabic-Regular");size-adjust:80.51%;ascent-override:151.65%;descent-override:30.31%;line-gap-override:12.17%;}
/* fonts:end */

:root {
  /* palette: ivory paper, warm ink, first-light gold */
  --ivory: #F7F3EE;
  --ivory-2: #EFE9E1;
  --paper: #FFFDFA;
  --ink: #1D1B18;
  --ink-2: #5C554D;
  --ink-3: #6E675F; /* ≥ 4.5:1 on ivory, paper and ivory-2 */
  --night: #14120F;
  --night-2: #1E1B17;
  --on-night: #EFE8DF;
  --on-night-2: #B7ADA1;
  --bronze: #806249;
  --gold: #C39A6B;
  --dawn: #E8C9A8;
  --line: rgba(29, 27, 24, .12);
  --line-strong: rgba(29, 27, 24, .28);
  --line-night: rgba(239, 232, 223, .14);

  /* type */
  --font-latin-display: "Cormorant Garamond", "Cormorant Garamond Fallback", "Cormorant Garamond Fallback Android", "Times New Roman", serif;
  --font-latin-sans: "Jost", "Jost Fallback", "Jost Fallback Android", "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-latin-display);
  --font-sans: var(--font-latin-sans);
  --tracking-caps: .18em;
  --caps: uppercase;

  /* rhythm */
  --gutter: clamp(20px, 5vw, 72px);
  --max: 1320px;
  --radius: 2px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: 180ms;
  --t: 420ms;
  --t-slow: 900ms;
  color-scheme: light;
}

/* ---------- per-script typography ---------- */
:lang(ja) {
  --font-display: "Cormorant Garamond", "Cormorant Garamond Fallback", "Cormorant Garamond Fallback Android", "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  --font-sans: "Jost", "Jost Fallback", "Jost Fallback Android", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Meiryo", sans-serif;
  --tracking-caps: .12em;
  --caps: none;
  line-break: strict;
  word-break: normal;
  overflow-wrap: anywhere;
  font-feature-settings: "palt" 1;
}
:lang(zh) {
  --font-display: "Cormorant Garamond", "Cormorant Garamond Fallback", "Cormorant Garamond Fallback Android", "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --font-sans: "Jost", "Jost Fallback", "Jost Fallback Android", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --tracking-caps: .12em;
  --caps: none;
  line-break: strict;
  overflow-wrap: anywhere;
}
:lang(ko) {
  --font-display: "Cormorant Garamond", "Cormorant Garamond Fallback", "Cormorant Garamond Fallback Android", "Nanum Myeongjo", "Noto Serif KR", "AppleMyungjo", serif;
  --font-sans: "Jost", "Jost Fallback", "Jost Fallback Android", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --tracking-caps: .08em;
  --caps: none;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
:lang(ar) {
  --font-display: "Amiri", "Amiri Fallback", "Amiri Fallback Android", "Noto Naskh Arabic", "Geeza Pro", "Times New Roman", serif;
  --font-sans: "IBM Plex Sans Arabic", "IBM Plex Sans Arabic Fallback", "IBM Plex Sans Arabic Fallback Android", "Noto Sans Arabic", "Geeza Pro", Tahoma, sans-serif;
  --tracking-caps: 0;            /* Arabic is never letter-spaced */
  --caps: none;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; hanging-punctuation: first last; }
/* full-width CJK brackets and stops would hang a whole em outside the text box (sideways scroll on phones) */
:lang(ja), :lang(zh), :lang(ko) { hanging-punctuation: none; }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-variant-numeric: lining-nums;
  overflow-x: hidden;
}
:lang(ja) body, body:lang(ja), :lang(zh) body, body:lang(zh) { line-height: 1.85; }
:lang(ar) body, body:lang(ar) { line-height: 1.8; font-size: 17px; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 300; line-height: 1.05; letter-spacing: -.01em; text-wrap: balance; }
:lang(ja) :is(h1, h2, h3) { word-break: auto-phrase; }
:lang(ja) :is(h1, h2, h3), :lang(zh) :is(h1, h2, h3), :lang(ko) :is(h1, h2, h3) { font-weight: 400; line-height: 1.35; letter-spacing: .02em; }
:lang(ar) :is(h1, h2, h3) { font-weight: 400; line-height: 1.45; letter-spacing: 0; }
p { text-wrap: pretty; }
[hidden] { display: none !important; }
:focus-visible { outline: 1.5px solid var(--bronze); outline-offset: 3px; }
::selection { background: var(--dawn); color: var(--ink); }

/* ---------- shared utilities for landing pages ---------- */
.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.eyebrow {
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: var(--caps);
  color: var(--ink-3);
}
.display { font-family: var(--font-display); font-weight: 300; font-size: clamp(44px, 7vw, 104px); line-height: .98; }
.lede { font-size: clamp(16px, 1.3vw, 19px); color: var(--ink-2); max-width: 56ch; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 48px; padding: 0 28px;
  border: 1px solid var(--ink); border-radius: var(--radius);
  background: var(--ink); color: var(--ivory);
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  letter-spacing: var(--tracking-caps); text-transform: var(--caps);
  text-decoration: none; white-space: nowrap;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.btn:hover { background: transparent; color: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--ivory); }
.btn--light { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }
.btn--light:hover { background: transparent; color: var(--ivory); }

/* ---------- background video (video-bg.js) ----------
   Paint order: dominant colour + LQIP (inline --vbg-lqip-p / --vbg-lqip-l, per orientation) → the poster
   (a server-rendered <picture class="bv-vbg__poster">, preloaded, never hidden: it is the LCP image; or an
   <img> added by video-bg.js, faded in on load) → the video, faded in once its first frame is on screen. */
.bv-vbg {
  --vbg-default: radial-gradient(120% 80% at 70% 85%, #E9B98A 0%, #B98A78 22%, #5E5670 52%, #232336 80%, #15141C 100%);
  position: absolute; inset: 0; overflow: hidden;
  background-color: var(--vbg-color, #2a2019);
  background-image: var(--vbg-lqip, var(--vbg-lqip-l, var(--vbg-fallback, var(--vbg-default))));
  background-size: cover;
  background-position: var(--vbg-position, 50% 50%);
}
@media (orientation: portrait) {
  .bv-vbg { background-image: var(--vbg-lqip, var(--vbg-lqip-p, var(--vbg-lqip-l, var(--vbg-fallback, var(--vbg-default))))); }
}
.bv-vbg__poster, .bv-vbg__video, .bv-vbg__poster img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--vbg-position, 50% 50%);
}
.bv-vbg__poster { opacity: 0; transition: opacity var(--t-slow) var(--ease); }
.bv-vbg.has-poster .bv-vbg__poster, picture.bv-vbg__poster { opacity: 1; }
picture.bv-vbg__poster { transition: none; }
.bv-vbg__video { opacity: 0; transition: opacity 1.4s var(--ease); }
.bv-vbg.is-playing .bv-vbg__video { opacity: 1; }

/* ---------- consent bar (analytics.js) ---------- */
.bv-consent {
  position: fixed; inset-inline: 12px; inset-block-end: 12px; z-index: 2147483000;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px;
  max-width: 640px; margin-inline: auto; padding: 16px 18px;
  background: var(--paper); color: var(--ink); border: 1px solid var(--line);
  box-shadow: 0 20px 60px -20px rgba(20, 16, 12, .35);
  font-family: var(--font-sans); font-size: 13.5px; line-height: 1.5;
}
.bv-consent p { flex: 1 1 260px; color: var(--ink-2); }
.bv-consent div { display: flex; gap: 8px; }
.bv-consent button {
  min-height: 44px; padding: 0 18px; border: 1px solid var(--ink); background: transparent;
  font-size: 12px; letter-spacing: var(--tracking-caps); text-transform: var(--caps);
}
.bv-consent button[data-v="1"] { background: var(--ink); color: var(--ivory); }

/* ---------- lazy images: the container's colour first, then a short fade (class set by an inline head script) ---------- */
.js-fade img[loading="lazy"]:not(.is-loaded) { opacity: 0; }
.js-fade img[loading="lazy"].is-loaded { animation: bv-img-in .6s var(--ease); }
@keyframes bv-img-in { from { opacity: 0; } }

/* ---------- page to page: cross-document View Transition, a short crossfade (Chrome/Edge 126+, Safari 18.2+) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: bv-page-out .2s var(--ease) both; }
::view-transition-new(root) { animation: bv-page-in .34s var(--ease-out) both; }
@keyframes bv-page-out { to { opacity: 0; } }
@keyframes bv-page-in { from { opacity: 0; } }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}