/*
Theme Name:  Vikin Homes
Theme URI:   https://vikinhomes.com
Author:      Vikin Homes
Description: Custom portfolio theme for Vikin Homes — a bespoke property company.
Version:     1.0.0
Requires at least: 6.2
Tested up to: 6.5
Requires PHP: 8.0
License:     Private
Text Domain: vikin-homes
Tags:        custom-theme, portfolio, real-estate
*/

/* ============================================================
   BRAND TOKENS
============================================================ */
:root {
  /* Palette */
  --teal:        #5ea6a5;
  --teal-dark:   #4a8a89;
  --teal-darker: #2f5b5a;
  --teal-light:  #e8f1f1;
  --teal-pale:   #f4f9f9;
  --ink:         #1a1a1a;
  --ink-soft:    #2c2c2c;
  --charcoal:    #3d3d3d;
  --stone:       #6b6b6b;
  --bone:        #f5f3ee;
  --paper:       #faf8f3;
  --white:       #ffffff;
  --line:        rgba(26, 26, 26, 0.12);
  --line-soft:   rgba(26, 26, 26, 0.06);

  /* Typography */
  --font-display: 'Bebas Neue', 'Oswald', sans-serif;
  --font-serif:   'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing (8px base) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 16px;
  --sp-4: 24px;
  --sp-5: 40px;
  --sp-6: 64px;
  --sp-7: 96px;
  --sp-8: 120px;

  /* Layout */
  --container:  1240px;
  --radius:     2px;
  --transition: 0.28s cubic-bezier(0.4, 0, 0.2, 1);

  /* Header height for offset */
  --header-h: 72px;
}

/* ============================================================
   RESET & BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
input, textarea, select { font-family: inherit; }
address { font-style: normal; }

/* ============================================================
   LAYOUT
============================================================ */
.site { display: flex; flex-direction: column; min-height: 100vh; }
.site-content { flex: 1; padding-top: var(--header-h); }
.container { max-width: var(--container); margin: 0 auto; padding: 0 40px; }
.container-narrow { max-width: 880px; margin: 0 auto; padding: 0 40px; }

/* ============================================================
   UTILITY
============================================================ */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  clip-path: inset(50%); white-space: nowrap;
}
.section-label {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--teal); font-weight: 600; margin-bottom: 24px;
}
.section-label::before {
  content: ''; width: 24px; height: 1px; background: var(--teal);
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, 88px);
  line-height: 0.95;
  letter-spacing: 0.005em;
  margin-bottom: 20px;
}
.section-intro {
  font-family: var(--font-serif);
  font-size: 20px; line-height: 1.6;
  color: var(--charcoal); font-weight: 300;
  max-width: 600px;
}