/* Izabell Slade -- site styles.
   Copied from the Wix site at izabellslade.wixsite.com/website; sizes and
   colors were measured from it. Wix's licensed fonts are swapped for close
   free ones: DIN Neuzeit Grotesk -> Oswald, Avenir -> Avenir if the device
   has it (Apple devices do), else Nunito Sans. */

:root {
  --green: #7d9174;        /* active nav item, blog cards, Etsy button */
  --sage: #aabfa4;         /* outline buttons */
  --sage-shadow: #556052;  /* outline buttons' stacked shadow */
  --forest: #0c4426;       /* "Click Here to Read" buttons */
  --ink: #212121;
  --panel-gray: #c7c7c7;   /* contact panel */
  --nav-text: #444;
  --nav-rule: #414141;

  --display: "Oswald", sans-serif;
  --thin: "Barlow", sans-serif;
  --body: "Avenir", "Avenir Next", "Nunito Sans", sans-serif;
  --text: "Raleway", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: #fff; color: var(--ink); font-family: var(--text); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

.container { width: 980px; max-width: calc(100% - 32px); margin: 0 auto; }

/* ---------------------------------------------------------------- header */
.site-header { display: flex; justify-content: flex-end; padding: 21px 25px 0; }
.site-nav ul { display: flex; margin: 0; padding: 0; list-style: none; }
.site-nav li + li { border-left: 1px solid var(--nav-rule); }
.site-nav a {
  display: block; height: 50px; padding: 0 60px;
  font: 300 13px/50px "Lato", sans-serif; color: var(--nav-text); text-decoration: none;
}
.site-nav a:hover { color: var(--green); }
/* The highlight covers the separators on both sides, as on Wix. */
.site-nav a[aria-current="page"] {
  position: relative; z-index: 1; margin: 0 -1px;
  background: var(--green); color: #fff;
}

/* ---------------------------------------------------------------- page titles */
.page-title {
  margin: 37px 0 0; text-align: center;
  font: 400 60px/84px var(--display);
}
.page-title::after {
  content: ""; display: block; width: 30px; height: 3px; margin: -5px auto 0;
  background: var(--ink);
}

/* ---------------------------------------------------------------- home */
.hero { position: relative; width: 964px; max-width: 100%; margin: 33px auto 0; }
.hero img { width: 100%; aspect-ratio: 964 / 635; object-fit: cover; }
.hero h1 {
  position: absolute; left: 0; right: 0; bottom: 26px; margin: 0;
  text-align: center; color: #fff;
  font: 300 clamp(22px, 5.8vw, 56px)/70px var(--thin); letter-spacing: 0.6em;
}

.about { padding-bottom: 81px; }
.about h2 { margin: 72px 0 0; text-align: center; font: 200 36px/45px var(--thin); }
.about-text {
  width: 696px; max-width: 100%; margin: 18px auto 0;
  font: 300 18px/1.3 var(--body); letter-spacing: 0.03em; color: #000;
}
.about-text p { margin: 0; }
.about-text p + p { margin-top: 1.3em; }

/* ---------------------------------------------------------------- resume */
.resume { padding-bottom: 42px; font-size: 16px; line-height: 22.4px; }
.resume h2 { margin: 27px 0 0; font: 400 32px/44.8px var(--display); }
.resume h2::after {
  content: ""; display: block; width: 284px; height: 3px; margin-top: -4px;
  background: var(--ink);
}
.resume h2 + * { margin-top: 16px; }
.resume p { margin: 0; }
.resume ul { margin: 0; padding-left: 29px; }
.resume .job + .job { margin-top: 22.4px; }

/* ---------------------------------------------------------------- portfolio */
.portfolio-section { text-align: center; }
.portfolio-section h2 {
  margin: 50px 0 0; font: 400 36px/50.4px var(--display); letter-spacing: 0.25em;
}
.portfolio-section + .portfolio-section h2 { margin-top: 72px; }

.gallery {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 25px;
}
.gallery + .button-row + .gallery { margin-top: 69px; }
.gallery img { width: 100%; aspect-ratio: 317 / 424; object-fit: cover; }

.videos {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 27px 43px; margin-top: 31px;
}
.videos iframe { width: 364px; max-width: 100%; aspect-ratio: 364 / 230; height: auto; border: 0; }

.site-shot { width: 600px; margin: 22px auto 0; }

.button-row { margin-top: 15px; }
.site-shot + .button-row { margin-top: 14px; }
.outline-button {
  display: inline-block; min-width: 142px; padding: 9px 20px;
  border: 1px solid var(--sage); border-radius: 5px; background: #fff;
  font: 700 15px/21px var(--text); color: var(--sage); text-decoration: none;
  box-shadow: 1px 1px 0 var(--sage-shadow), 3px 3px 0 var(--sage-shadow),
    5px 5px 0 var(--sage-shadow), 7px 7px 0 var(--sage-shadow), 9px 9px 0 var(--sage-shadow);
}
.outline-button:hover { color: var(--sage-shadow); }

.blog-cards {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 25px;
}
.blog-card { min-height: 224px; padding: 75px 50px 41px; background: var(--green); }
.blog-card h3 { max-width: 380px; margin: 0 auto; font: 400 24px/28.5px var(--display); }
.read-button {
  display: inline-block; margin-top: 16px; padding: 6px 10px;
  border: 1px solid var(--forest); background: rgba(255, 255, 255, 0.84);
  font: 400 15px "Playfair Display", serif; letter-spacing: 0.05em;
  color: var(--forest); text-decoration: none;
}

/* The Wix original had a Wix stock photo beside this; stock media is licensed
   for Wix sites only, so the copy centers the heading and button instead. */
.illustration { padding-bottom: 80px; }
.solid-button {
  display: inline-block; width: 180px; margin-top: 38px; padding: 12px 0;
  background: var(--green); color: #fff; text-decoration: none;
  font: 300 14px var(--body);
}

/* ---------------------------------------------------------------- contact */
.contact {
  width: 980px; max-width: 100%; min-height: 337px; margin: 0 auto 30px;
  padding: 41px 80px 40px; background: var(--panel-gray);
}
.contact h2 { margin: 0; font: 500 36px/45px var(--thin); color: #fff; }
.contact form { width: 327px; max-width: 100%; margin: 5px 0 0 5px; }
.contact input, .contact textarea {
  display: block; width: 100%; height: 35px; margin: 0 0 12px;
  padding: 3px 3px 3px 12px; border: 1px solid var(--panel-gray); border-radius: 0;
  background: #fff; font: 400 14px var(--text); color: var(--nav-text);
}
.contact textarea { height: 55px; margin-bottom: 10px; resize: vertical; }
.contact ::placeholder { color: var(--panel-gray); opacity: 1; }
.contact button {
  display: block; width: 102px; height: 28px; margin-left: auto; padding: 0;
  border: 0; background: none; cursor: pointer;
  font: 700 12px var(--text); color: #fff;
}
.contact-status { margin: 6px 0 0; font: 400 14px var(--text); color: #fff; }
.contact-status:empty { display: none; }

/* ---------------------------------------------------------------- small screens */
@media (max-width: 760px) {
  .site-header { justify-content: center; padding: 16px 8px 0; }
  .site-nav a { padding: 0 clamp(10px, 4vw, 30px); }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .blog-cards { grid-template-columns: 1fr; }
  .blog-card { padding: 48px 24px; }
  .portfolio-section h2 { font-size: 26px; letter-spacing: 0.15em; }
  .contact { padding: 32px 24px; }
}
@media (max-width: 480px) {
  .page-title { font-size: 44px; line-height: 64px; }
  .gallery { grid-template-columns: 1fr; }
}