/* css/base.css */
/* Fonts: Gloock (display serif) + Jost (geometric sans) — loaded via <link> in index.html */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Ensure the HTML hidden attribute always wins, even against display:flex rules */
[hidden] { display: none !important; }

:root {
  --font-display:  'Gloock', Georgia, serif;
  --font-body:     'Jost', system-ui, sans-serif;

  --color-bg:            #F5F2EC;
  --color-bg-secondary:  #E8E3D9;
  --color-primary:       #2B2B27;
  --color-accent:        #8C7355;
  --color-accent-muted:  rgba(140, 115, 85, 0.12);

  --max-width:      1280px;
  --section-pad:    80px;

  --letter-spacing-wide: 0.08em;
  --letter-spacing-xl:   0.13em;

  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
}

html {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: none;
  scroll-behavior: smooth;
}

html, body { overflow-x: hidden; max-width: 100vw; }

img { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button { font-family: var(--font-body); cursor: none; border: none; background: none; }

/* ── Eyebrow ───────────────────────────────── */
.section-eyebrow {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: var(--letter-spacing-xl);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 16px;
}

/* ── Section title ─────────────────────────── */
.section-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 68px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--color-primary);
}

/* ── Buttons ───────────────────────────────── */
.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: 2px;
  cursor: none;
  white-space: nowrap;
  isolation: isolate;
  transition: background 0.2s var(--ease-out-quart),
              color 0.2s var(--ease-out-quart),
              border-color 0.2s var(--ease-out-quart),
              transform 0.2s var(--ease-out-quart);
}

/* Shimmer sweep on hover */
.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.20) 50%,
    transparent 100%
  );
  transform: skewX(-18deg);
  pointer-events: none;
  z-index: 0;
  transition: left 0.7s var(--ease-out-quart);
}
.btn:hover::before { left: 130%; }
.btn > * { position: relative; z-index: 1; }

.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: scale(0.975) translateY(0px); }

.btn-primary {
  background: var(--color-primary);
  color: var(--color-bg);
}
.btn-primary:hover { background: #3d3d38; }

.btn-ghost {
  background: transparent;
  color: var(--color-primary);
  border: 1.5px solid rgba(43, 43, 39, 0.28);
}
.btn-ghost:hover {
  border-color: var(--color-primary);
  background: rgba(43, 43, 39, 0.04);
}

.btn-accent {
  background: var(--color-accent);
  color: var(--color-bg);
}
.btn-accent:hover { background: #7a6449; }

/* ── Mobile ────────────────────────────────── */
@media (max-width: 768px) {
  html { cursor: auto; }
  :root { --section-pad: 48px; }
  button { cursor: pointer; }
  .btn { cursor: pointer; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}