/* Gentry Club design system - flattened for static hosting. */

/* ---- tokens/fonts.css ---- */
/* Gentry Club webfonts. Marcellus = primary (display / titles), Uncut Sans = secondary (body / UI),
   Noto Serif HK (思源宋體) = primary Chinese, Noto Sans HK = secondary Chinese / UI Chinese. */
@font-face{font-family:"Marcellus";src:url("../fonts/Marcellus-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:optional}

@font-face{font-family:"Uncut Sans";src:url("../fonts/UncutSans-Light.otf") format("opentype");font-weight:300;font-style:normal;font-display:optional}
@font-face{font-family:"Uncut Sans";src:url("../fonts/UncutSans-Book.otf") format("opentype");font-weight:350;font-style:normal;font-display:optional}
@font-face{font-family:"Uncut Sans";src:url("../fonts/UncutSans-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:optional}
@font-face{font-family:"Uncut Sans";src:url("../fonts/UncutSans-Medium.otf") format("opentype");font-weight:500;font-style:normal;font-display:optional}
@font-face{font-family:"Uncut Sans";src:url("../fonts/UncutSans-Semibold.otf") format("opentype");font-weight:600;font-style:normal;font-display:optional}
@font-face{font-family:"Uncut Sans";src:url("../fonts/UncutSans-Bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:optional}
@font-face{font-family:"Uncut Sans";src:url("../fonts/UncutSans-RegularItalic.otf") format("opentype");font-weight:400;font-style:italic;font-display:optional}
@font-face{font-family:"Uncut Sans";src:url("../fonts/UncutSans-MediumItalic.otf") format("opentype");font-weight:500;font-style:italic;font-display:optional}

@font-face{font-family:"Noto Serif HK";src:url("../fonts/NotoSerifHK-Light.ttf") format("truetype");font-weight:300;font-style:normal;font-display:optional}
@font-face{font-family:"Noto Serif HK";src:url("../fonts/NotoSerifHK-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:optional}
@font-face{font-family:"Noto Serif HK";src:url("../fonts/NotoSerifHK-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:optional}
@font-face{font-family:"Noto Serif HK";src:url("../fonts/NotoSerifHK-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:optional}
@font-face{font-family:"Noto Serif HK";src:url("../fonts/NotoSerifHK-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:optional}

@font-face{font-family:"Noto Sans HK";src:url("../fonts/NotoSansHK-Light.ttf") format("truetype");font-weight:300;font-style:normal;font-display:optional}
@font-face{font-family:"Noto Sans HK";src:url("../fonts/NotoSansHK-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:optional}
@font-face{font-family:"Noto Sans HK";src:url("../fonts/NotoSansHK-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:optional}
@font-face{font-family:"Noto Sans HK";src:url("../fonts/NotoSansHK-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:optional}
@font-face{font-family:"Noto Sans HK";src:url("../fonts/NotoSansHK-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:optional}


/* ---- tokens/colors.css ---- */
/* ── Gentry Club colour palette ────────────────────────────────────────────────
   Three official brand colours: SMOKY OAK, LIQUID GOLD, EMERALD LEATHER.
   The remaining five are approved secondary options.
   Hex values are transcribed verbatim from Brand Guideline v3 (Jul 2026). */
:root{
  /* Official brand colours */
  --gc-smoky-oak:#371E06;            /* PMS 4695 U / 462 C */
  --gc-liquid-gold:#9A822A;          /* PMS 613 U / 112 C  */
  --gc-emerald-leather:#3E6666;      /* PMS 549 U / 5483 C */

  /* Approved secondary colours */
  --gc-british-racing-green:#003F20; /* PMS 349 U / 343 C */
  --gc-royal-navy:#0E1A30;           /* PMS 282 U */
  --gc-black:#000000;
  --gc-beige:#FFF0D1;                /* PMS 7499 U — the club's signature stock */
  --gc-core-grey:#EFEFEF;            /* Cool Gray 1 U */
  --gc-white:#FFFFFF;

  /* Derived neutrals — tinted with Smoky Oak so greys never read cold */
  --gc-oak-90:color-mix(in oklab,var(--gc-smoky-oak) 90%,var(--gc-beige));
  --gc-oak-70:color-mix(in oklab,var(--gc-smoky-oak) 70%,var(--gc-beige));
  --gc-oak-45:color-mix(in oklab,var(--gc-smoky-oak) 45%,var(--gc-beige));
  --gc-oak-24:color-mix(in oklab,var(--gc-smoky-oak) 24%,var(--gc-beige));
  --gc-oak-12:color-mix(in oklab,var(--gc-smoky-oak) 12%,var(--gc-beige));
  --gc-oak-06:color-mix(in oklab,var(--gc-smoky-oak) 6%,var(--gc-beige));

  /* Derived gold steps — hovers, pressed states, hairlines */
  --gc-gold-bright:color-mix(in oklab,var(--gc-liquid-gold) 82%,var(--gc-beige));
  --gc-gold-deep:color-mix(in oklab,var(--gc-liquid-gold) 82%,var(--gc-smoky-oak));
  --gc-gold-24:color-mix(in oklab,var(--gc-liquid-gold) 24%,var(--gc-beige));
  --gc-gold-12:color-mix(in oklab,var(--gc-liquid-gold) 12%,var(--gc-beige));

  /* ── Semantic aliases — use these in components ── */
  --surface-page:var(--gc-beige);
  --surface-card:var(--gc-white);
  --surface-raised:color-mix(in oklab,var(--gc-beige) 60%,var(--gc-white));
  --surface-sunken:var(--gc-oak-06);
  --surface-inverse:var(--gc-smoky-oak);
  --surface-inverse-alt:var(--gc-royal-navy);
  --surface-accent:var(--gc-liquid-gold);
  --surface-muted:var(--gc-core-grey);

  --text-heading:var(--gc-smoky-oak);
  --text-body:var(--gc-oak-90);
  --text-muted:var(--gc-oak-45);
  --text-accent:var(--gc-liquid-gold);
  --text-on-dark:var(--gc-beige);
  --text-on-dark-muted:color-mix(in oklab,var(--gc-beige) 62%,var(--gc-smoky-oak));
  --text-on-accent:var(--gc-smoky-oak);
  --text-link:var(--gc-liquid-gold);
  --text-link-hover:var(--gc-gold-deep);

  --border-hairline:var(--gc-oak-24);
  --border-subtle:var(--gc-oak-12);
  --border-strong:var(--gc-smoky-oak);
  --border-accent:var(--gc-liquid-gold);
  --border-on-dark:color-mix(in oklab,var(--gc-beige) 34%,transparent);

  /* Status — drawn from the approved secondary palette, never invented hues */
  --status-positive:var(--gc-british-racing-green);
  --status-info:var(--gc-emerald-leather);
  --status-notice:var(--gc-liquid-gold);
  --status-critical:#6E1F14;         /* oxblood: Smoky Oak shifted red, print-safe */
  --status-neutral:var(--gc-oak-45);
}
/* Dark / lounge scope — apply to any section that inverts */
.gc-dark{
  --surface-page:var(--gc-smoky-oak);
  --surface-card:color-mix(in oklab,var(--gc-smoky-oak) 88%,var(--gc-beige));
  --surface-raised:color-mix(in oklab,var(--gc-smoky-oak) 80%,var(--gc-beige));
  --surface-sunken:#241203;
  --surface-inverse:var(--gc-beige);
  --text-heading:var(--gc-beige);
  --text-body:color-mix(in oklab,var(--gc-beige) 84%,var(--gc-smoky-oak));
  --text-muted:color-mix(in oklab,var(--gc-beige) 52%,var(--gc-smoky-oak));
  --text-accent:var(--gc-gold-bright);
  --border-hairline:color-mix(in oklab,var(--gc-beige) 24%,transparent);
  --border-subtle:color-mix(in oklab,var(--gc-beige) 12%,transparent);
  --border-strong:var(--gc-beige);
}


/* ---- tokens/typography.css ---- */
/* ── Typography ───────────────────────────────────────────────────────────────
   Marcellus: headlines and ALL-CAPS titles only, never body copy.
   Uncut Sans: body, UI, menus, captions — must never out-shout Marcellus.
   Chinese sets pair 1:1 — Noto Serif HK with Marcellus, Noto Sans HK with Uncut Sans. */
:root{
  --font-display:"Marcellus","Noto Serif HK",Georgia,serif;
  --font-body:"Uncut Sans","Noto Sans HK","Helvetica Neue",Arial,sans-serif;
  --font-zh-display:"Noto Serif HK","Marcellus",serif;
  --font-zh-body:"Noto Sans HK","Uncut Sans",sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,monospace;

  --fw-light:300;/* @kind other */
  --fw-book:350;/* @kind other */
  --fw-regular:400;/* @kind other */
  --fw-medium:500;/* @kind other */
  --fw-semibold:600;/* @kind other */
  --fw-bold:700;/* @kind other */

  /* Type scale — 1.25 major third off a 16px body */
  --fs-caption:11px;
  --fs-micro:12px;
  --fs-small:14px;
  --fs-body:16px;
  --fs-body-lg:18px;
  --fs-title-sm:22px;
  --fs-title:28px;
  --fs-title-lg:36px;
  --fs-display-sm:48px;
  --fs-display:64px;
  --fs-display-lg:84px;

  --lh-tight:1.06;/* @kind other */
  --lh-heading:1.18;/* @kind other */
  --lh-snug:1.35;/* @kind other */
  --lh-body:1.6;/* @kind other */
  --lh-loose:1.8;/* @kind other */

  /* Marcellus caps need generous tracking; Uncut Sans wants near-zero */
  --ls-display:0.01em;/* @kind other */
  --ls-title:0.02em;/* @kind other */
  --ls-caps:0.14em;/* @kind other */      /* ALL-CAPS Marcellus titles, eyebrows, nav */
  --ls-caps-wide:0.24em;/* @kind other */ /* small ALL-CAPS labels, 11–12px */
  --ls-body:0em;/* @kind other */
  --ls-body-tight:-0.006em;/* @kind other */

  /* Composed roles */
  --type-display:var(--fw-regular) var(--fs-display)/var(--lh-tight) var(--font-display);
  --type-title:var(--fw-regular) var(--fs-title)/var(--lh-heading) var(--font-display);
  --type-body:var(--fw-book) var(--fs-body)/var(--lh-body) var(--font-body);
  --type-body-strong:var(--fw-medium) var(--fs-body)/var(--lh-body) var(--font-body);
  --type-label:var(--fw-medium) var(--fs-micro)/1.3 var(--font-body);
  --type-caption:var(--fw-regular) var(--fs-caption)/1.4 var(--font-body);
}


/* ---- tokens/spacing.css ---- */
/* ── Space & layout ───────────────────────────────────────────────────────────
   4px base. Gentry Club layouts are generous: prefer --space-8 and up between
   blocks, and let emptiness do the work (see the letterhead: one mark, one
   footer, an acre of nothing between). */
:root{
  --space-0:0;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --space-20:80px;
  --space-24:96px;
  --space-32:128px;
  --space-40:160px;

  --gutter-inline:var(--space-6);
  --gutter-inline-lg:var(--space-12);
  --section-y:var(--space-24);
  --stack-tight:var(--space-2);
  --stack:var(--space-4);
  --stack-loose:var(--space-8);

  --measure-narrow:46ch;/* @kind spacing */   /* club prose — short, calm paragraphs */
  --measure:62ch;/* @kind spacing */
  --measure-wide:76ch;/* @kind spacing */
  --container:1200px;
  --container-narrow:820px;

  /* Logo clear space = 1× emblem cap-height on every side; enforce with this */
  --logo-clearspace:var(--space-8);
  --logo-emblem-sm:28px;
  --logo-emblem-md:44px;
  --logo-emblem-lg:72px;
  --logo-logotype-sm:96px;
  --logo-logotype-md:160px;
  --logo-logotype-lg:260px;
}


/* ---- tokens/borders.css ---- */
/* ── Borders & radii ──────────────────────────────────────────────────────────
   The identity is drawn with hairlines and an ellipse. Corners are square or
   fully elliptical — never a mid-size "app" radius. */
:root{
  --radius-none:0px;
  --radius-xs:2px;    /* the largest radius allowed on a rectangular surface */
  --radius-sm:3px;
  --radius-pill:999px;
  --radius-oval:50%;  /* the emblem's ellipse — chips, avatars, dot markers */

  --border-width-hairline:1px;
  --border-width-rule:1px;
  --border-width-emphasis:2px;
  --border-width-frame:3px; /* double-rule certificate / invitation frames */

  --rule-hairline:var(--border-width-hairline) solid var(--border-hairline);
  --rule-subtle:var(--border-width-hairline) solid var(--border-subtle);
  --rule-accent:var(--border-width-hairline) solid var(--border-accent);
  --rule-strong:var(--border-width-emphasis) solid var(--border-strong);

  --focus-ring:2px solid var(--gc-liquid-gold);
  --focus-offset:2px;/* @kind spacing */
}


/* ---- tokens/elevation.css ---- */
/* ── Elevation ────────────────────────────────────────────────────────────────
   Shadows are warm (tinted with Smoky Oak, never neutral black) and used
   sparingly — a printed card sits on paper, it does not float. Prefer a
   hairline over a shadow whenever both would read. */
:root{
  --shadow-none:none;
  --shadow-print:0 1px 2px rgba(55,30,6,.08);
  --shadow-card:0 2px 10px rgba(55,30,6,.07);
  --shadow-raised:0 8px 28px rgba(55,30,6,.10);
  --shadow-overlay:0 24px 64px rgba(55,30,6,.22);
  --shadow-inset-hairline:inset 0 0 0 1px rgba(55,30,6,.14);

  /* Protection gradient — for type sitting over photography */
  --scrim-bottom:linear-gradient(to top,rgba(55,30,6,.82) 0%,rgba(55,30,6,.42) 42%,rgba(55,30,6,0) 100%);/* @kind color */
  --scrim-full:linear-gradient(to bottom,rgba(55,30,6,.55),rgba(55,30,6,.55));/* @kind color */
  --veil-beige:rgba(255,240,209,.06); /* glass panels on dark imagery */
  --blur-glass:blur(14px) saturate(115%);/* @kind other */
}


/* ---- tokens/motion.css ---- */
/* ── Motion ───────────────────────────────────────────────────────────────────
   Discreet. Fades and small slides; nothing bounces, nothing springs.
   A club does not announce itself. */
:root{
  --ease-standard:cubic-bezier(.4,0,.2,1);/* @kind other */
  --ease-out-quiet:cubic-bezier(.16,.84,.44,1);/* @kind other */
  --ease-in-quiet:cubic-bezier(.5,0,.75,0);/* @kind other */

  --dur-instant:90ms;/* @kind other */
  --dur-fast:160ms;/* @kind other */
  --dur-base:240ms;/* @kind other */
  --dur-slow:420ms;/* @kind other */
  --dur-curtain:720ms;/* @kind other */ /* full-bleed image reveals, page curtains */

  --transition-hover:color var(--dur-fast) var(--ease-standard),background-color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),opacity var(--dur-fast) var(--ease-standard);
  --transition-transform:transform var(--dur-base) var(--ease-out-quiet);

  --press-scale:0.995;/* @kind other */ /* barely there — pressure, not squash */
  --hover-opacity:0.72;/* @kind other */
}


/* ---- tokens/base.css ---- */
/* ── Base element defaults ───────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-body);font:var(--type-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5{margin:0;font-family:var(--font-display);font-weight:var(--fw-regular);color:var(--text-heading);letter-spacing:var(--ls-title);line-height:var(--lh-heading);text-wrap:balance}
h1{font-size:var(--fs-display-sm);line-height:var(--lh-tight);letter-spacing:var(--ls-display)}
h2{font-size:var(--fs-title-lg)}
h3{font-size:var(--fs-title)}
h4{font-size:var(--fs-title-sm)}
h5{font-size:var(--fs-small);text-transform:uppercase;letter-spacing:var(--ls-caps)}
p{margin:0 0 var(--space-4);max-width:var(--measure);text-wrap:pretty}
a{color:var(--text-link);text-decoration:none;border-bottom:1px solid color-mix(in oklab,var(--text-link) 40%,transparent);transition:var(--transition-hover)}
a:hover{color:var(--text-link-hover);border-bottom-color:var(--text-link-hover)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
small{font-size:var(--fs-small)}
hr{border:0;border-top:var(--rule-hairline);margin:var(--space-8) 0}
img{max-width:100%;display:block}
::selection{background:var(--gc-gold-24);color:var(--gc-smoky-oak)}

/* Utility: the club's ALL-CAPS label voice */
.gc-eyebrow{font:var(--type-label);text-transform:uppercase;letter-spacing:var(--ls-caps-wide);color:var(--text-muted)}
.gc-caps-title{font-family:var(--font-display);text-transform:uppercase;letter-spacing:var(--ls-caps);color:var(--text-heading)}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}