:root{
  --paper: #fbf9f6;
  --ink: #111111;
  --muted: #3a3a3a;
  --highlight: #F2E85C;
  --rule: rgba(0,0,0,0.08);
  --link: #3e85b0;
}

*{ box-sizing: border-box; }

html, body { height: 100%; }

body{
  margin: 0;
  font-family: "EB Garamond", Georgia, serif;
  color: var(--ink);
  background: var(--paper);
}

/* Page container like a document sheet */
.page{
  max-width: 900px;
  margin: 40px auto 80px;
  background: rgba(255,255,255,0.55);
  border: 1px solid var(--rule);
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  border-radius: 10px;
  padding: 36px 44px 60px;
}

/* Header/nav: quieter, more “document” */
header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 18px;
  border-bottom: 2px solid rgba(242,232,92,0.9);
}

.brand{
  display:flex;
  align-items:center;
  gap: 14px;
}

.brand img{
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

.brand .title{
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  margin: 0;
  text-decoration: none;
  color: var(--ink);
}

nav a{
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  font-size: 18px;
  margin-left: 18px;
}

nav a:hover{ text-decoration: underline; }

/* Big page title like the FAQ doc */
.h1{
  display:flex;
  align-items:center;
  gap: 14px;
  margin: 26px 0 5px;
  margin-left: 6px;
}

.h1 img{
  width: 34px;
  height: 34px;
  border-radius: 50%;
}

.h1 h1{
  margin: 0;
  font-size: 54px;
  letter-spacing: -0.5px;
}

/* Handwritten section headers */
.script{
  font-family: "Caveat", cursive;
  font-size: 40px;
  font-weight: 700;
  color: #8a7a1a; /* warm ink */
  margin: 29px 0 10px;
}

/* Body copy like a printed doc */
p{
  font-size: 20px;
  line-height: 1.55;
  color: var(--muted);
  margin: 10px 0 16px;
}

/* Yellow marker highlight */
.hl{
  background: linear-gradient(transparent 58%, rgba(242,232,92,0.95) 58%);
  padding: 0 4px;
  border-radius: 3px;
  font-weight: 600;
  color: var(--ink);
}

/* Call-to-action button that matches highlight */
.button{
  display: inline-block;
  margin-top: 10px;
  padding: 12px 18px;
  border-radius: 6px;
  background: var(--highlight);
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  border: 1px solid rgba(0,0,0,0.08);
}

.button:hover{
  filter: brightness(0.97);
}

/* Simple list like the doc */
ol{
  margin: 8px 0 18px 24px;
  font-size: 20px;
  color: var(--muted);
}

.footer-sign{
  margin-top: 30px;
  font-family: "Caveat", cursive;
  font-size: 30px;
  color: #8a7a1a;
}

a{
    color: var(--link)
}

.contact-form{
  display: block;
  width: min(760px, calc(100% + 24px));
  margin: 0 0 18px -60px;
  margin-bottom: 70px;
  border: 0;
}

/* Header base tweaks (all sizes) */
.brand { align-items: center; }
.brand-center { display: block; }
header { align-items: center; }

/* ATTEMPTING TO MAKE IT LESS TERRIBLE ON MOBILE */

/* Mobile header: logo left, title centered, nav centered underneath */
@media (max-width: 600px) {
  .page {
    padding: 22px 18px 40px;
    margin: 18px 12px 50px;
  }

  header {
    /* override desktop header row */
    display: flex;
    flex-direction: column;
    align-items: stretch; /* full width */
    gap: 10px;
    padding-bottom: 14px;
  }

  /* Make brand a flex layout:
     [logo offset left][title centered] */
  .brand {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .brand {
    flex-direction: column;
    gap: 8px;
  }

  .brand img {
    width: 40px;
    height: 40px;
  }

  .content-img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  .brand .title {
    font-size: 20px;
    line-height: 1.05;
    margin: 0;
  }

  /* Center the nav underneath */
  nav {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 22px;
    flex-wrap: wrap;
    padding-top: 4px;
  }

  nav a {
    margin-left: 0; /* kills desktop spacing */
    font-size: 20px;
  }

  /* Optional: tighten big titles a bit on mobile */
  .h1 h1 {
    font-size: 27px;
  }

  /* Handwritten section headers */
.script{
  font-size: 35px;
}

  p, ol {
    font-size: 19px;
  }

  .contact-form {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 auto 18px;
    margin-left: -15px;
  }
}