@font-face{
  font-family:'Newsreader';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('/assets/fonts/newsreader-latin.woff2') format('woff2');
  unicode-range:U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+2010,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2032-2033,U+2039-203A,U+2044,U+2052,U+20A6,U+20AC,U+2122,U+2212,U+2215;
}
@font-face{
  font-family:'Newsreader';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('/assets/fonts/newsreader-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-0131,U+0134-0148,U+014A-017E,U+018F,U+0192,U+01A0-01A1,U+01AF-01B0,U+01C4-01CC,U+01E6-01E7,U+01EA-01EB,U+01FA-021B,U+022A-022D,U+0230-0233,U+0237,U+0259,U+02B9-02BA,U+02C7,U+02DD,U+0304,U+0308,U+1E80-1E85,U+1E9E,U+1EF2-1EF9,U+2020,U+20A1,U+20A3-20A4,U+20A6-20A7,U+20A9,U+20AB,U+20AD,U+20B1-20B2,U+20B5,U+20B9-20BA,U+20BC-20BD;
}
@font-face{
  font-family:'Newsreader';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('/assets/fonts/newsreader-vietnamese.woff2') format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+1EA0-1EF9,U+20AB;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000,U+0020-007E,U+00A0-00AC,U+00AE-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+2000-200B,U+2010-2027,U+202F-2055,U+2057,U+205F,U+20A6,U+20AC,U+2122,U+2191,U+2193,U+2212,U+FEFF;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-0148,U+014A-01C3,U+01C5-0254,U+0256-027B,U+027E-0284,U+0286-0290,U+0292-02A4,U+02A6-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+1D00,U+1D0D,U+1D1B,U+1D43,U+1D47-1D49,U+1D4D,U+1D4F-1D50,U+1D52,U+1D56-1D58,U+1D5B,U+1D62-1D65,U+1D9C,U+1DA0,U+1DBB,U+1DBF,U+1E00-1E9B,U+1E9D-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20AF,U+20B1-20B5,U+20B8-20BA,U+20BC-20BF,U+2113,U+2C7C,U+2C7F,U+A7FF;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('/assets/fonts/inter-vietnamese.woff2') format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+1EA0-1EF9,U+20AB;
}
/* ==========================================================================
   tokens.css — generated for this business from the colours in its own photos.
   This is the ONLY file in the site that contains a raw colour or length.
   Roles: surface / ink / accent / muted. Components name roles, never colours.
   accent rgb(201, 162, 39)  ·  on-accent rgb(17, 17, 17) (contrast 7.81:1)
   page surface: light
   ========================================================================== */
:root{
  /* ---- fluid type (Utopia 360->1240, verified endpoints) ---- */
  --step--1: clamp(0.8333rem, 0.8061rem + 0.1212vw, 0.9rem);
  --step-0:  clamp(1rem, 0.9489rem + 0.2273vw, 1.125rem);
  --step-1:  clamp(1.2rem, 1.1156rem + 0.375vw, 1.4062rem);
  --step-2:  clamp(1.44rem, 1.31rem + 0.5778vw, 1.7578rem);
  --step-3:  clamp(1.728rem, 1.536rem + 0.8532vw, 2.1973rem);
  --step-4:  clamp(2.0736rem, 1.7983rem + 1.2236vw, 2.7466rem);
  --step-5:  clamp(2.4883rem, 2.1018rem + 1.718vw, 3.4332rem);
  --step-6:  clamp(2.986rem, 2.4519rem + 2.3737vw, 4.2915rem);

  /* Semantic roles. These are NOT just the nearest step: they follow the documented UI scale
     (caption 13->14, body 16->18, H3 20->24, H2 26->36, H1 34->60 at 360->1240). The old mapping
     climbed two steps at a time and rendered an H3 at 28px, which reads as a headline. */
  --text-caption: clamp(0.75rem, 0.7273rem + 0.0909vw, 0.875rem);     /* 12   -> 14   */
  --text-small:   clamp(0.875rem, 0.8409rem + 0.1818vw, 1rem);        /* 14   -> 16   */
  --text-body:    clamp(1rem,      0.9489rem + 0.2273vw, 1.125rem);    /* 16   -> 18   */
  --text-lede:    clamp(1.125rem, 1.0511rem + 0.3284vw, 1.5rem);      /* 18   -> 24   */
  --text-h3:      clamp(1.125rem,  1.0rem    + 0.558vw,  1.5rem);      /* 18   -> 24   */
  --text-h2:      clamp(1.5rem,    1.2116rem + 1.2824vw, 2.5rem);      /* 24   -> 40   */
  --text-h1:      clamp(1.875rem,  1.5091rem + 1.7642vw, 3.375rem);    /* 30   -> 54   */
  --text-display: clamp(1.875rem,  1.5091rem + 1.7642vw, 3.375rem);    /* hero == H1   */

  /* Icon scale — a fixed set, in rem, so an icon never drifts with the text it sits beside. */
  --icon-s: 1rem;      /* 16px: inside buttons, nav links, inline with body text */
  --icon-m: 1.25rem;   /* 20px: feature/fact icons                       */
  --icon-l: 1.5rem;    /* 24px: decorative plates, standalone marks      */

  --leading-tight: 1.06;
  --leading-heading: 1.16;
  --leading-body: 1.6;

  /* WCAG 2.2 SC 1.4.8 forbids text blocks wider than 80 characters */
  --measure: 65ch;
  --measure-narrow: 48ch;
  --measure-wide: 78ch;

  /* ---- fluid space (one density multiplier scales the whole rhythm) ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: clamp(1rem, 0.8182rem + 0.909vw, 1.5rem);
  --space-m: clamp(1.5rem, 0.6818rem + 3.6364vw, 3.5rem);
  --space-l: clamp(2rem, 0.7727rem + 5.4545vw, 5rem);
  --space-xl: clamp(2.5rem, 0.6591rem + 8.1818vw, 7rem);
  --space-2xl: clamp(3rem, 0.5455rem + 10.909vw, 9rem);

  /* ---- shape + depth ---- */
  --radius-s: 8px; --radius-m: 14px; --radius-l: 22px; --radius-xl: 32px; --radius-pill: 999px;
  --border-hair: 1px;
  --border-strong: 2px;
  --border-soft: color-mix(in oklab, var(--ink) 14%, var(--surface));
  --border-line: color-mix(in oklab, var(--ink) 28%, var(--surface));
  --elev-0: none;
  --elev-1: 0 1px 2px color-mix(in oklab, var(--ink) 8%, transparent), 0 2px 6px -2px color-mix(in oklab, var(--ink) 10%, transparent);
  --elev-2: 0 4px 10px -4px color-mix(in oklab, var(--ink) 14%, transparent), 0 12px 24px -12px color-mix(in oklab, var(--ink) 18%, transparent);
  --elev-3: 0 20px 44px -18px color-mix(in oklab, var(--ink) 30%, transparent);

  /* ---- colour roles (derived, never authored) ---- */
  --surface: rgb(252, 251, 251);
  --surface-raised: rgb(255, 255, 255);
  --surface-sunken: rgb(243, 239, 239);
  --ink: rgb(47, 44, 34);
  --ink-muted: rgb(102, 97, 82);
  --accent: rgb(201, 162, 39);
  --accent-ink: rgb(127, 102, 23);
  --accent-soft: color-mix(in oklab, var(--accent) 12%, var(--surface));
  --accent-deep: color-mix(in oklab, var(--accent) 78%, var(--ink));
  --on-accent: rgb(17, 17, 17);
  --focus: var(--accent-ink);
  --danger: rgb(178, 58, 46);
  --success: rgb(46, 120, 88);

  /* ---- brand ramp: 12 perceptual steps from the brand colour (Radix method, docs/design/01) ---- */
  --brand-1: #F9F8F6;
  --brand-2: #F7F5F0;
  --brand-3: #F1ECDC;
  --brand-4: #EDE3C2;
  --brand-5: #E8D79E;
  --brand-6: #E8CC70;
  --brand-7: #ECC33E;
  --brand-8: #F5BE0A;
  --brand-9: #C9A227;
  --brand-10: #8B6C03;
  --brand-11: #5E4905;
  --brand-12: #473808;

  /* ---- layout ---- */
  --container: 1240px;
  --container-text: 720px;
  --gutter: var(--space-s);
  --gutter-wide: clamp(1rem, 3vw, 2.5rem);

  /* ---- motion ---- */
  --dur-fast: 150ms;
  --dur-base: 260ms;
  --ease-out: cubic-bezier(.22, .61, .36, 1);

  /* ---- type ---- */
  --font-display: 'Newsreader', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;
}
[data-theme="dark"]{--surface: rgb(26, 24, 17);
  --surface-raised: rgb(42, 38, 27);
  --surface-sunken: rgb(15, 14, 10);
  --ink: rgb(247, 246, 246);
  --ink-muted: rgb(190, 187, 177);
  --accent-ink: rgb(233, 213, 144);
  --accent-soft: color-mix(in oklab, var(--accent) 20%, var(--surface));
  --on-accent: rgb(17, 17, 17);
  --border-soft: rgba(255,255,255,.12);
  --border-line: rgba(255,255,255,.22);}


@media (prefers-reduced-motion: reduce){
  :root{ --dur-fast: 0ms; --dur-base: 0ms; }
}