/* hip.golf — the website's shared chrome (22 Oct 2026).
 *
 * The homepage, About, Privacy, Terms and Delete-account all load this: the
 * header with Log in / Sign up, the footer, the wordmark and the buttons. The
 * page bodies keep their own styles.
 *
 * Everything here is prefixed: classes hg-, tokens --hg-. The legal pages have
 * their own :root (--ink, --line, --green) and .wrap, and a shared name would
 * silently restyle one or the other.
 *
 * Fonts are the app's own files under /fonts/, never Google Fonts: the CSP in
 * netlify.toml is font-src 'self', so a Google stylesheet is refused and the
 * page falls back to Arial without a word. Absolute paths, because this file
 * is served from /site/ while the pages that use it sit at the root.
 */
@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/archivo-black-regular.woff2') format('woff2');}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/fraunces-600-normal-latin.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:300 900;font-display:swap;src:url('/fonts/inter-normal-latin.woff2') format('woff2');}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/dm-mono-400-normal-latin.woff2') format('woff2');}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/dm-mono-500-normal-latin.woff2') format('woff2');}

:root{
  --hg-pine:#0d2419;        /* header, hero, groups band, footer */
  --hg-pine-2:#163d2a;
  --hg-fairway:#1c8a52;     /* the app's green: buttons */
  --hg-fairway-ink:#136b3f; /* green text on light ground */
  --hg-paper:#f3f6f2;       /* the app's page ground */
  --hg-card:#ffffff;
  --hg-ink:#10201a;
  --hg-ink-2:#3c4f46;
  --hg-ink-3:#5f7067;
  --hg-line:#dbe4dd;
  --hg-flag:#d92121;        /* the .GOLF bar. Logo only: red is double bogey in the app */
  --hg-on-pine:#e9f2ec;
  --hg-on-pine-2:#a9c2b3;
  --hg-mint:#8fd6ad;        /* eyebrows and ticks on pine */

  --hg-f-word:'Archivo Black',Impact,sans-serif;
  --hg-f-display:'Fraunces',Georgia,'Times New Roman',serif;
  --hg-f-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --hg-f-mono:'DM Mono',ui-monospace,Menlo,Consolas,monospace;
  --hg-t-micro:.72rem;
  --hg-max:1160px;
}

.hg-wrap{max-width:var(--hg-max);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));box-sizing:border-box}
.hg-eyebrow{font-family:var(--hg-f-mono);font-size:var(--hg-t-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--hg-fairway-ink);font-weight:500}

/* ── Wordmark: HIP beside .GOLF in a skewed red bar, as on the icon ── */
.hg-brand{display:inline-flex;align-items:center;gap:6px;line-height:1;text-decoration:none}
.hg-brand-word{font-family:var(--hg-f-word);font-size:1.45rem;color:#fff;letter-spacing:-.01em}
.hg-brand-bar{display:inline-block;background:var(--hg-flag);padding:4px 8px 5px;transform:skewX(-6deg)}
.hg-brand-bar span{display:inline-block;font-family:var(--hg-f-word);font-size:.74rem;color:#fff;transform:skewX(6deg)}

/* ── Buttons ── */
.hg-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 .98rem/1 var(--hg-f-body);padding:15px 22px;border-radius:12px;border:0;cursor:pointer;text-decoration:none;white-space:nowrap;transition:transform .15s ease,background .15s ease,box-shadow .15s ease;-webkit-tap-highlight-color:transparent}
.hg-btn:active{transform:scale(.97)}
.hg-btn:hover,.hg-brand:hover{text-decoration:none}
.hg-btn-primary{background:var(--hg-fairway);color:#fff;box-shadow:0 6px 18px rgba(28,138,82,.28)}
.hg-btn-primary:hover{background:#18784a}
.hg-btn-light{background:#fff;color:var(--hg-pine)}
.hg-btn-light:hover{background:#e6f1ea}
.hg-btn-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45)}
.hg-btn-ghost:hover{box-shadow:inset 0 0 0 1.5px #fff}
.hg-btn-sm{padding:10px 15px;font-size:.9rem;border-radius:10px}
.hg-nav :focus-visible,.hg-foot :focus-visible,.hg-btn:focus-visible{outline:3px solid #7fd3a4;outline-offset:2px;border-radius:8px}

/* ── Header: always Log in and Sign up, phone width included ── */
.hg-nav{position:sticky;top:0;z-index:50;background:rgba(13,36,25,.94);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid rgba(255,255,255,.07);font-family:var(--hg-f-body);padding-top:env(safe-area-inset-top,0px)}
.hg-nav-in{display:flex;align-items:center;gap:28px;height:66px}
.hg-nav-links{display:flex;gap:24px;margin-right:auto;margin-left:12px}
.hg-nav-links a{color:var(--hg-on-pine-2);text-decoration:none;font-weight:500;font-size:.94rem}
.hg-nav-links a:hover{color:#fff;text-decoration:none}
.hg-nav-auth{display:flex;align-items:center;gap:8px}
.hg-nav-login{color:#fff;font:600 .94rem var(--hg-f-body);padding:10px 12px;border-radius:8px;text-decoration:none}
.hg-nav-login:hover{background:rgba(255,255,255,.08);text-decoration:none}
/* Signed in on this browser: one "Open Hip.Golf" instead of Log in + Sign up.
   Set by the script at the top of each page (html.hg-in). */
.hg-only-in{display:none !important}
html.hg-in .hg-only-in{display:inline-flex !important}
html.hg-in .hg-only-out{display:none !important}
@media (max-width:860px){.hg-nav-links{display:none}.hg-nav-auth{margin-left:auto}.hg-nav-in{gap:10px}}
@media (max-width:380px){.hg-brand-word{font-size:1.2rem}.hg-nav-login{padding:10px 6px}}

/* ── Footer ── */
.hg-foot{background:var(--hg-pine);color:var(--hg-on-pine-2);font-family:var(--hg-f-body);font-size:.88rem;line-height:1.6;padding-block:56px 40px;border-top:1px solid rgba(255,255,255,.08)}
.hg-foot-grid{display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:32px}
.hg-foot h4{margin:0 0 12px;font-family:var(--hg-f-mono);font-weight:500;font-size:var(--hg-t-micro);letter-spacing:.14em;text-transform:uppercase;color:#fff}
.hg-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.hg-foot li{margin:0}
.hg-foot a{color:var(--hg-on-pine-2);text-decoration:none;font-weight:400}
.hg-foot a:hover{color:#fff;text-decoration:none}
.hg-foot-strap{margin-top:14px;font-family:var(--hg-f-mono);font-size:.72rem;letter-spacing:.16em;color:var(--hg-mint)}
.hg-foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:44px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08);font-size:.8rem}
@media (max-width:860px){.hg-foot-grid{grid-template-columns:1fr 1fr}.hg-foot-grid > div:first-child{grid-column:1/-1}}

@media (prefers-reduced-motion:reduce){.hg-btn{transition:none}}