/* ============================================
   STEP 1 OF 4 — CSS VARIABLES
   Think of this like your brand settings panel.
   Change a color once here, it updates everywhere.
   The colon + value is just how you define them.
   You read them back with var(--name).
   ============================================ */

:root {
  /* Your Global Village palette from the style guide */
  --parchment:    #F2E8D5;   /* warm page background   */
  --cream:        #EDE0C4;   /* slightly darker surface */
  --tan:          #DBA165;   /* body text on dark       */
  --orange:       #D88442;   /* hero accents, the "7"   */
  --amber:        #B3712C;   /* primary accent, borders */
  --teal:         #4A8C8C;   /* eyebrow labels          */
  --purple:       #513985;   /* shadow on wordmark      */
  --mahogany:     #723824;   /* borders, rules          */
  --ink:          #1C0F05;   /* near-black for footer   */
  --ink-soft:     #2C1A0A;   /* body text color         */
}


/* ============================================
   STEP 2 OF 4 — RESET & BASE
   Browsers have their own default styles that
   differ from each other. This reset clears them
   so we start from the same place everywhere.
   ============================================ */

*, *::before, *::after {
  box-sizing: border-box;  /* padding doesn't add to width — trust me, you want this */
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth; /* clicking nav links scrolls gently instead of jumping */
}

body {
  background-color: var(--parchment);
  color: var(--ink-soft);
  font-family: 'IM Fell English', Georgia, serif;
  line-height: 1.8;
  min-height: 100vh;
  overflow-x: hidden; /* nothing bleeds off the right edge */
}


/* ============================================
   STEP 3 OF 4 — FOLK ART STRIPE
   This is just a colored div with a repeating
   gradient as its background. No images needed.
   ============================================ */

.folk-stripe {
  height: 10px;
  background: repeating-linear-gradient(
    90deg,
    var(--amber)    0px,   var(--amber)    24px,
    var(--orange)   24px,  var(--orange)   48px,
    var(--teal)     48px,  var(--teal)     72px,
    var(--purple)   72px,  var(--purple)   96px,
    var(--mahogany) 96px,  var(--mahogany) 120px
  );
}


/* ============================================
   STEP 4 OF 4 — NAVIGATION
   ============================================ */

nav {
  display: flex;                  /* puts logo and links side by side */
  justify-content: space-between; /* pushes logo left, links right */
  align-items: center;            /* vertically centers both */
  padding: 20px 48px;
  background: var(--parchment);
  border-bottom: 2px solid var(--amber);
}

.nav-logo {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: 1.6rem;
  text-decoration: none;
  letter-spacing: -0.02em;
}

/* .word and .num are the two spans inside the logo */
.nav-logo .word { color: var(--mahogany); }
.nav-logo .num  { color: var(--orange);   }

.nav-links {
  display: flex;
  gap: 36px;
  list-style: none; /* removes the bullet points from the <ul> */
}

.nav-links a {
  font-family: 'Oswald', sans-serif;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;        /* removes the underline */
  transition: color 0.2s;       /* color change animates over 0.2 seconds */
}

.nav-links a:hover {
  color: var(--amber);          /* link turns amber when you hover */
}


/* ============================================
   HERO SECTION
   "position: relative" on the parent lets us
   use "position: absolute" on children to layer
   them on top of each other — like stacking
   sheets of paper on a desk.
   ============================================ */

.hero {
  position: relative;
  min-height: 100vh;        /* fills the full screen height */
  display: flex;            /* flexbox centers the content */
  align-items: center;      /* vertically centered */
  justify-content: center;  /* horizontally centered */
  overflow: hidden;         /* polygons won't bleed outside */
  padding: 80px 48px;
}

/* ============================================
   HERO BACKGROUND — polygon layer
   position: absolute pulls it out of normal
   flow and pins it to the hero edges.
   z-index: 0 puts it behind everything else.
   pointer-events: none means clicks pass
   through it like it isn't there.
   ============================================ */

.hero-bg {
  position: absolute;
  inset: 0;                 /* shorthand for top/right/bottom/left: 0 */
  z-index: 0;
  pointer-events: none;
}

/* ============================================
   HERO CONTENT — sits on top of the background
   z-index: 2 puts it above the polygon layer.
   text-align: center pulls everything to middle.
   ============================================ */

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 700px;
  animation: fadeUp 0.9s ease both; /* gentle entrance */
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   EYEBROW — small label above the wordmark
   Oswald uppercase, teal, wide letter spacing
   ============================================ */

.eyebrow {
  display: block;           /* forces it onto its own line */
  font-family: 'Oswald', sans-serif;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 24px;
}

/* ============================================
   WORDMARK — the big Point7 headline
   clamp() means: "never smaller than 4rem,
   ideally 10vw, never bigger than 7.5rem"
   This makes it scale smoothly on all screens.

   text-shadow is the signature offset effect
   from your brand guide — two layers:
   first a purple shadow, then a near-black one.
   ============================================ */

.wordmark {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: clamp(4rem, 10vw, 7.5rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  text-shadow:
    4px 4px 0px var(--purple),
    8px 8px 0px var(--ink);
}

.wordmark .word { color: var(--mahogany); }
.wordmark .num  { color: var(--orange);   }

/* ============================================
   TAGLINE — italic, sits under the wordmark
   ============================================ */

.tagline {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  color: var(--amber);
  margin-bottom: 36px;
  letter-spacing: 0.02em;
}

/* ============================================
   GLOBE WRAP — centers the SVG we'll add next
   ============================================ */

.globe-wrap {
  margin: 0 auto 16px;
  width: 56px;
  height: 56px;
}

/* ============================================
   DIAMOND DIVIDER
   The lines are ::before and ::after ghosts —
   no extra HTML needed.
   ============================================ */

.diamond-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 28px auto;
  max-width: 320px;
}

.diamond-divider::before,
.diamond-divider::after {
  content: '';              /* ghost assistants — remember those? */
  flex: 1;
  height: 1px;
  background: var(--amber);
}

.diamond-shape {
  width: 9px;
  height: 9px;
  background: var(--amber);
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* ============================================
   HERO DESCRIPTION TEXT
   ============================================ */

.hero-desc {
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--ink-soft);
  max-width: 420px;
  margin: 0 auto;
}


/* ============================================
   ABOUT SECTION
   cream background, centered, generous padding
   ============================================ */

.about {
  background: var(--cream);
  border-top: 2px solid var(--amber);
  border-bottom: 2px solid var(--amber);
  padding: 80px 48px;
}

.about-inner {
  max-width: 640px;
  margin: 0 auto;   /* centers the content block on the page */
}

.section-label {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 16px;
}

.about h2 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: var(--mahogany);
  margin-bottom: 24px;
  line-height: 1.2;
}

.about p {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--ink-soft);
  margin-bottom: 16px;
  max-width: 560px;
}


/* ============================================
   FOOTER
   ============================================ */

footer {
  background: var(--ink);
  padding: 36px 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-logo {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: 1.3rem;
  color: var(--tan);
}

.footer-logo span { color: var(--orange); }

.footer-tag {
  font-family: 'Oswald', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--amber);
  opacity: 0.6;
}