/* PALE SIGIL STUDIOS — STYLE */

/* 1. FONTS */
@import url('https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Cinzel+Decorative:wght@400&display=swap');

/* 2. BRAND COLORS */
:root {
--black: #000000;
--blue: #1D2B53;
--purple: #83769C;
--white: #FFF1E8;
}

/* 3. BASIC PAGE STYLE */

* {
  box-sizing: border-box;
  }

body {
margin: 0;
background: var(--black);
color: var(--white);
font-family: 'Alegreya', serif;
font-size: 18px;
line-height: 1.7;
}

/* 4. HEADINGS */
h1, h2, h3, h4, h5, h6 {
font-family: 'Cinzel Decorative', serif;
font-weight: 400;
color: var(--white);
line-height: 1.2;
}

/* 5. LINKS */
a {
color: var(--purple);
text-decoration: none;
}

a:hover {
color: var(--white);
}

/* 6. HEADER */
.site-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24px 7%;
border-bottom: 1px solid var(--blue);
}

.wordmark {
font-family: 'Cinzel', serif;
font-size: 20px;
color: var(--white);
}

/* 7. NAVIGATION */
nav {
display: flex;
flex-wrap: wrap;
gap: 24px;
}

nav a {
color: var(--purple);
}

/* 8. MAIN INTRODUCTION */
.hero {
padding: 100px 12%;
min-height: 65vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}

.hero h1 {
font-size: 56px;
}

.intro {
max-width: 600px;
color: var(--purple);
}

/* 9. CONTENT BLOCKS */
.section {
padding: 70px 12%;
border-top: 1px solid var(--blue);
}

.section h2 {
font-size: 36px;
}

.section p {
max-width: 650px;
}

/* 10. SMALL LABELS */
.eyebrow {
color: var(--purple);
font-size: 14px;
letter-spacing: 3px;
text-transform: uppercase;
}

/* 11. FOOTER */
footer {
padding: 24px 7%;
border-top: 1px solid var(--blue);
color: var(--purple);
font-size: 15px;
}

/* 12. MOBILE LAYOUT */
@media (max-width: 650px) {
.site-header {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}

```
.hero {
    padding: 60px 7%;
}

.hero h1 {
    font-size: 40px;
}

.section {
    padding: 50px 7%;
}
```

}