/* ============================================================
   BASE — Reset, Variables, Typography
   WIN NAHA · winnaha.com
   ============================================================ */

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

:root {
  /* Colour palette */
  --black:      #080808;
  --white:      #f4f2ef;
  --gold:       #c9a84c;
  --gold-dim:   rgba(201, 168, 76, 0.35);
  --border:     rgba(255, 255, 255, 0.09);
  --dim:        rgba(255, 255, 255, 0.40);
  --mid:        rgba(255, 255, 255, 0.65);

  /* Typography */
  --serif: 'Playfair Display', Georgia, serif;
  --sans:  'Inter', system-ui, sans-serif;

  /* Layout */
  --nav-h:      72px;
  --gutter:     64px;
  --gutter-sm:  24px;
}

html {
  scroll-behavior: smooth;
}

body {
  background:   var(--black);
  color:        var(--white);
  font-family:  var(--sans);
  font-size:    15px;
  line-height:  1.6;
  overflow-x:   hidden;
}

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

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

button {
  font-family: inherit;
  cursor: pointer;
}

/* Page router */
.page          { display: none; min-height: 100vh; }
.page.active   { display: block; }

/* Shared section labels */
.sec-label {
  padding:         48px var(--gutter) 0;
  font-size:       9px;
  letter-spacing:  0.3em;
  text-transform:  uppercase;
  color:           var(--dim);
  border-top:      0.5px solid var(--border);
}

.sec-title {
  padding:      16px var(--gutter) 48px;
  font-family:  var(--serif);
  font-size:    38px;
  font-weight:  400;
}

.sec-title em {
  font-style: italic;
  color:      var(--dim);
}

/* Shared page hero */
.page-hero {
  padding:       80px var(--gutter) 64px;
  border-bottom: 0.5px solid var(--border);
}

.page-ey {
  font-size:       9px;
  letter-spacing:  0.3em;
  text-transform:  uppercase;
  color:           var(--dim);
  margin-bottom:   16px;
}

.page-h1 {
  font-family:     var(--serif);
  font-size:       clamp(48px, 7vw, 80px);
  font-weight:     700;
  line-height:     0.92;
  letter-spacing:  -0.01em;
}

.page-h1 em {
  font-style: italic;
  color:      var(--dim);
}

/* Buttons */
.btn-p {
  display:         inline-block;
  padding:         16px 48px;
  background:      var(--white);
  color:           var(--black);
  font-family:     var(--sans);
  font-size:       10px;
  letter-spacing:  0.2em;
  text-transform:  uppercase;
  border:          none;
  cursor:          pointer;
  transition:      opacity 0.2s;
}
.btn-p:hover { opacity: 0.88; }

.btn-o {
  display:         inline-block;
  padding:         16px 48px;
  border:          0.5px solid rgba(255, 255, 255, 0.4);
  color:           var(--white);
  font-family:     var(--sans);
  font-size:       10px;
  letter-spacing:  0.2em;
  text-transform:  uppercase;
  background:      none;
  cursor:          pointer;
  margin-left:     16px;
  transition:      border-color 0.2s;
}
.btn-o:hover { border-color: rgba(255, 255, 255, 0.8); }

/* Footer */
footer {
  padding:         32px var(--gutter);
  border-top:      0.5px solid var(--border);
  display:         flex;
  justify-content: space-between;
  align-items:     center;
}

.footer-logo {
  font-family:     var(--serif);
  font-size:       15px;
  color:           rgba(255, 255, 255, 0.35);
  letter-spacing:  0.08em;
}

.footer-links {
  display: flex;
  gap:     28px;
}

.footer-links a {
  font-size:       9px;
  letter-spacing:  0.16em;
  text-transform:  uppercase;
  color:           rgba(255, 255, 255, 0.28);
  transition:      color 0.2s;
}
.footer-links a:hover { color: var(--mid); }

.footer-copy {
  font-size:       9px;
  letter-spacing:  0.1em;
  color:           rgba(255, 255, 255, 0.18);
}