@charset "utf-8";
/* CSS Document */

/*
Framework by Andy Shearouse
*/
html,
body {
  margin: 0px !important;
  padding: 0px !important;
}

img {
  max-width: 100% !important;
}

.container {
  max-width: 2400px;
  width: 100%;
  margin: 0 auto;
  position: relative;
}

.header {
  width: 100%;
}

/*Use the following for top drop-down nav
Change the background-color in #nav to change the color of the navigation bar
Change the background-color in #nav ul li ul to change the background color of the dropdown menus
These values do also need to be changed further down, in the 600px, 400px, and 300px wide sections 
*/
/* -------------------- Start Navigation -------------------- */
#nav {
  width: 100%;
  z-index: 10;
  position: relative;
  float: left;
  font-size: 16px;
  margin-bottom: 0px;
}

#nav > a {
  display: none;
}

#nav li {
  position: relative;
  list-style-position: inside;
  list-style-type: none;
}

#nav li a {
  color: white;
  display: block;
  text-decoration: none;
}

/* first level */

#nav > ul {
  text-align: center;
  padding-left: 0px !important;
  margin-left: 0px !important;
}

#nav > ul > li {
  margin: 0px 15px;
  padding: 4px 8px;
  height: 100%;
  display: inline-block;
}

#nav > ul > li > a {
  height: 100%;
  text-align: center;
}

#nav > ul > li:not(:last-child) > a {
}

#nav > ul > li:hover > a,
#nav > ul:not(:hover) > li.active > a {
}

/* second level */

#nav li ul {
  background-color: #ccc;
  display: none;
  position: absolute;
  top: 100%;
  margin-left: 0 !important;
  padding-left: 0 !important;
  width: 170px;
  text-align: left;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

#nav li:hover ul {
  display: block;
  left: 0;
  right: 0;
}

#nav li:not(:first-child):hover ul {
  left: -1px;
}

#nav li ul a {
  color: #000;
  padding: 0.75em;
  /* 15 (20) */
}

#nav li ul li a:hover,
#nav li ul:not(:hover) li.active a {
}

/* -------------------- End Navigation -------------------- */

.content {
  width: 100%;
  display: inline-block;
  padding-bottom: 20px;
}

.grid-two-thirds-one-third {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 2fr 1fr;
  grid-template-columns: 2fr 1fr;
}

.grid-three-fourths-one-fourth {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 3fr 1fr;
  grid-template-columns: 3fr 1fr;
}

.grid-one-fourth-three-fourths {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 3fr;
  grid-template-columns: 1fr 3fr;
}

.grid-three-fifths-two-fifths {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 3fr 2fr;
  grid-template-columns: 3fr 2fr;
}

.grid-two-fifths-three-fifths {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 2fr 3fr;
  grid-template-columns: 2fr 3fr;
}

.grid-two-columns {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
}

.grid-three-columns {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
}

.grid-four-columns {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.footer {
}

.no-margin {
  margin: 0px !important;
}

.no-padding {
  padding: 0px !important;
}

.no-bold {
  font-weight: normal !important;
}

.no-border {
  border: none !important;
}

.center {
  text-align: center;
}

.block {
  display: block !important;
}

@media only screen and (max-width: 1200px) {
}

@media only screen and (max-width: 960px) {
  .grid-four-columns {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr 1fr;
  }
}

@media only screen and (max-width: 720px) {
  /* -------------------- Start Navigation -------------------- */
  #nav {
    position: relative;
  }

  #nav img {
    vertical-align: middle;
  }

  #nav > a {
  }

  #nav:not(:target) > a:first-of-type,
  #nav:target > a:last-of-type {
    display: block;
    width: 100%;
    text-align: center;
    color: #000;
    font-size: 20px;
    padding: 5px 0px;
    text-decoration: none;
  }

  #nav a {
    font-size: 18px;
  }

  /* first level */

  #nav > ul {
    height: auto;
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    background-color: #ccc;
    margin-top: 8px !important;
    padding-bottom: 10px;
  }

  #nav:target > ul {
    display: block;
  }

  #nav > ul > li {
    width: 100%;
    float: none;
    margin: 0px !important;
    padding: 4px 0px;
  }

  /* second level */

  #nav li ul {
    position: static;
    width: 98%;
    margin: 0 !important;
    text-align: center;
    padding: 0 !important;
  }

  #nav li ul a {
    padding: 0.5em 0;
    margin: 0.25em 0;
  }

  /*End Navigation*/

  .grid-two-thirds-one-third {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }

  .grid-one-fourth-three-fourths {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }

  .grid-two-fifths-three-fifths {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }

  .grid-three-fifths-two-fifths {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }

  .grid-two-columns {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }

  .grid-three-columns {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }

  .grid-four-columns {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }

  .grid-three-fourths-one-fourth {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }

  .footer {
    text-align: center;
  }
}

@media only screen and (max-width: 600px) {
}

@media only screen and (max-width: 480px) {
}

#nav {
  background: #c52d4b;
  width: 100%;
}

.nav-line {
  border: 0;
  border-top: 3px solid white;
  margin: 0;
  width: 100%;
}

.nav-container {
  text-align: center;
}

.logo {
  padding: 20px 0;
  border-bottom: 2px solid white;
}

.logo img {
  width: 300px;
}

.navlinks {
  margin: 20px 0;
  padding: 0;
  text-align: center;
}

.navlinks li {
  display: inline-block;
  margin: 0 35px;
  list-style: none;
}

.navlinks li a {
  color: white;
  text-decoration: none;
  font-size: 20px;
  font-family: Arial, sans-serif;
}

.navlinks li a:hover {
  color: #f4dadf;
}

.pictures-section {
  background: #e8919c;
  padding: 70px 0 90px;
  position: relative;
}

.button-area {
  text-align: center;
  margin-top: 45px;
  position: relative;
  z-index: 5;
}

.view-btn {
  display: inline-block;
  background: #a61d26;
  color: #fff;
  text-decoration: none;

  padding: 15px 38px;

  border-radius: 35px;

  font-size: 20px;
  font-family: Georgia, serif;

  transition: 0.3s;
}

.view-btn:hover {
  background: #85151d;
}

.section-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 140px;

  background: linear-gradient(to bottom, rgba(232, 143, 152, 0), #be0c18);
}

.hero {
  position: relative;
  width: 100%;
}

.hero > img {
  width: 100%;
  display: block;
  height: 750px;
}

.fade {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 280px;

  background: linear-gradient(
    to bottom,
    rgba(242, 200, 203, 0) 0%,
    rgba(242, 200, 203, 0.15) 25%,
    rgba(242, 200, 203, 0.45) 55%,
    rgba(242, 200, 203, 0.75) 80%,
    #f2c8cb 100%
  );
}

.arrow {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
}

.arrow img {
  display: block;
  width: 45px;
  height: 27px;
  /* Lock the PNG's native 87x52 ratio - height:auto alone let it
	   stretch when the fixed-height hero shifted around on mobile. */
  aspect-ratio: 87 / 52;
  object-fit: contain;
  max-width: 45px !important;
  color: rgb(78, 35, 35);
}

html {
  scroll-behavior: smooth;
}

main {
  background: #f2c8cb;
}

.group {
  max-width: 1100px;
  margin: 0px auto;
  padding: 0 40px;
}

/* Photo and copy share the row height (align-items: stretch is the grid
   default, stated explicitly here since the old inline style on this div
   used to override it with place-items: center). A narrow fixed-width
   photo column against a 1fr text column - not an even fr split - is
   what gives the text room to run long lines beside a modest portrait,
   matching the client's reference layout. */
.person {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 4rem;
  align-items: stretch;
  /* Nudges the whole card off the section's left edge; the right side
     stays where it was since only the left margin changed. */
  margin-left: 5rem;
  /* Breathing room so the photo/copy don't butt up against the gallery
     button above or the footer below. .group is a flex item, so it's a
     BFC root - these margins stay inside it instead of collapsing out. */
  margin-top: 5rem;
  margin-bottom: 6rem;
}

/* height: 100% + the parent's stretch is what makes the frame grow to
   match the paragraph block below, however long the copy runs. The
   background/padding/border trio is the existing gold mat + frame -
   untouched, just no longer pinned to a fixed pixel box. */
.person-photo {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  align-self: stretch;
  background-color: #8b5a2b;
  padding: 2px;
  overflow: hidden;
  border: 3px solid #8c5b26;
}

.person-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}

.person-name {
  display: inline-block;
  text-align: left;
  font-family: Georgia, serif;
  font-size: 55px;
  font-weight: bold;
  color: #a61d26;
  /* Browsers give h2 a default top margin (~0.83em); zeroed so this
     heading's top edge is the true top of the column, which the photo
     next to it now aligns to. */
  margin-top: 0;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 3px solid #a61d26;
}

.person-bio p {
  font-size: 16px;
  line-height: 1.45;
  color: #a61d26;
  margin: 0 0 0.85rem;
  font-family: Georgia, "Times New Roman", Times, serif;
}

.person-bio p:last-child {
  margin-bottom: 0;
}

/* Stretching the photo to match text height only makes sense side by
   side. Once stacked, it goes back to a fixed 3/4 crop like the rest of
   the site's portrait photos. */
@media only screen and (max-width: 768px) {
  .person {
    grid-template-columns: 1fr;
    margin-left: 0;
  }

  .person-photo {
    height: auto;
    aspect-ratio: 3 / 4;
    max-width: 320px;
    margin: 0 auto;
  }
}

.gallery-img {
  margin-top: 100px;
  width: 350px;
  height: 250px;
}

.pictures {
  background: #f0b2b9;
  position: relative;
  padding-bottom: 100px;
}

.picture-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 150px;
  z-index: 1;

  background: linear-gradient(to bottom, rgba(232, 145, 156, 0), #ef7b83);
}

.footer {
  width: 100%;
  background: #df607b;
  padding: 10px 22px;
  box-sizing: border-box;
}

.footer-inner {
  width: 100%;
  font-size: 0;
}

.footer-left,
.footer-right {
  display: inline-block;
  vertical-align: middle;
  width: 50%;
  font-size: 18px;
}

.footer-left {
  text-align: left;
}

.footer-left img {
  width: 220px;
  height: auto;
  display: inline-block;
}

.footer-right {
  text-align: right;
  color: #fff;
  font-family: Georgia, serif;
  font-size: 20px;
}

.footer-right a {
  color: inherit;
  text-decoration: none;
}

.footer-right a:hover,
.footer-right a:focus {
  color: #f4dadf;
  text-decoration: underline;
}

/* -------------------- About page -------------------- */

/* Same .hero box as index.php and contact.php, but it also carries the
   About copy. The photo is panned right so the text column on the left
   sits over foliage and never over Beverly. */
.hero.about-hero {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
}

/* .hero > img already carries object-fit: cover, so she is never stretched;
   the extra class is needed because .hero > img re-declares object-position
   further down in the Flexible media section, and the width has to beat the
   global img { max-width: 100% !important }. */
.hero.about-hero > img {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  width: 132%;
  max-width: 132% !important;
  object-position: center 32%;
}

/* Same cell as the photo, so the copy stacks on top of it. The hero is
   full-bleed (no max-width), so this repeats .page-content's own
   max-width/padding formula to keep the panel's left edge lined up with
   "Select Exhibitions" below on wide screens - a flat side padding alone
   drifts left of that once the viewport passes 1300px. */
.about-overlay {
  grid-column: 1;
  grid-row: 1;
  z-index: 2;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: minmax(0, 560px) 1fr;
  grid-template-columns: minmax(0, 560px) 1fr;
  align-items: center;
  max-width: 1300px;
  width: 100%;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: border-box;
}

/* Soft scrim in the same pink as .fade so the red type stays readable
   over the leaves without introducing a new colour. */
.about-panel {
  background: rgba(242, 200, 203, 0.85);
  padding: 32px 36px;
}

.about-panel .person-bio p:last-child {
  margin-bottom: 0;
}

/* The hero shortens to 600px here and the frame narrows, so the text
   column narrows with it and stays clear of Beverly. */
@media only screen and (max-width: 1200px) {
  .about-overlay {
    -ms-grid-columns: minmax(0, 460px) 1fr;
    grid-template-columns: minmax(0, 460px) 1fr;
    padding: 0 45px;
  }

  .about-panel {
    padding: 26px 30px;
  }
}

.subsection-heading {
  display: inline-block;
  text-align: left;
  font-family: Georgia, serif;
  font-weight: bold;
  font-size: 32px;
  color: #a61d26;
  margin: 50px 0 25px;
  padding-bottom: 8px;
  border-bottom: 3px solid #a61d26;
}

/* List (with its heading) left, portrait right, both stretched to the
   row's height so the photo grows to match the list automatically as
   entries are added or removed - no fixed height or aspect-ratio to
   keep in sync by hand. The heading now lives inside the left column so
   its top edge, not the first bullet's, sets the shared row top. */
.exhibitions-row {
  -ms-grid-columns: 1fr 0.75fr;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.75fr);
  gap: 4rem;
  align-items: stretch;
}

.exhibit-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

.exhibitions-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 17px;
  line-height: 1.75;
  color: #a61d26;
}

/* padding-left plus an absolutely placed bullet gives the hanging indent:
   a wrapped second line sits under the text above it, not under the dot. */
.exhibitions-list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 6px;
}

.exhibitions-list li:last-child {
  margin-bottom: 0;
}

.exhibitions-list li::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #a61d26;
}

@media only screen and (max-width: 960px) {
  .subsection-heading {
    font-size: 28px;
  }

  /* Below 960 the hero band is too short to hold the copy, so the overlay
     drops into its own row underneath the photo. The fade joins the grid
     as a row-1 item so it still ends at the bottom of the picture. */
  .hero.about-hero {
    -ms-grid-rows: auto auto;
    grid-template-rows: auto auto;
  }

  .hero.about-hero > img {
    width: 100%;
    max-width: 100% !important;
    object-position: center 30%;
  }

  .about-hero > .fade {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    align-self: end;
  }

  /* 1fr, not a fixed 760px track - a fixed max never shrinks below the
     viewport and pushed the whole page sideways on phones. */
  .about-overlay {
    grid-row: 2;
    -ms-grid-columns: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    max-width: 840px;
    width: 100%;
    margin: 0 auto;
    padding: 35px 40px 0;
  }

  .about-panel {
    background: none;
    padding: 0;
  }
}

/* Stack: heading + list first, photo beneath it. Once stacked the photo
   goes back to a fixed 3/4 crop instead of stretching to match the list. */
@media only screen and (max-width: 768px) {
  .exhibitions-row {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    gap: 30px;
  }

  /* img {max-width:100% !important} above forces the !important here */
  .exhibit-photo {
    height: auto;
    aspect-ratio: 3 / 4;
    max-width: 320px !important;
    justify-self: center;
  }
}

@media only screen and (max-width: 720px) {
  .about-overlay {
    padding: 30px 24px 0;
  }
}

@media only screen and (max-width: 480px) {
  .subsection-heading {
    font-size: 24px;
  }
}

/* -------------------- Contact page -------------------- */
.contact-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  flex: 1 1 auto;
}

.contact-hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

.contact-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 560px;
  padding: 60px 24px;
  box-sizing: border-box;
}

.contact-card {
  background: #c52d4b;
  width: 100%;
  max-width: 560px;
  padding: 35px 45px 45px;
  box-sizing: border-box;
}

.contact-card-title {
  margin: 0 0 25px;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: bold;
  font-size: 40px;
  color: #fff;
  text-align: center;
}

.contact-status {
  margin: 0 0 20px;
  text-align: center;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 15px;
}

.contact-status-success {
  color: #d7f2d9;
}

.contact-status-error {
  color: #ffd7d7;
}

.contact-form {
  display: flex;
  flex-direction: column;
}

.contact-form label {
  color: #fff;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 15px;
  margin-bottom: 6px;
}

.contact-form input,
.contact-form textarea {
  border: none;
  outline: none;
  background: #fff;
  font-family: Arial, sans-serif;
  font-size: 15px;
  color: #333;
  padding: 10px 16px;
  margin-bottom: 20px;
  box-sizing: border-box;
  width: 100%;
}

.contact-form input {
  height: 38px;
  border-radius: 20px;
}

.contact-form textarea {
  border-radius: 20px;
  resize: vertical;
  min-height: 110px;
  margin-bottom: 0;
}

.contact-send-btn {
  display: block;
  margin: 25px auto 0;
  padding: 12px 42px;
  background: #fff;
  color: #c52d4b;
  border: none;
  border-radius: 25px;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: bold;
  font-size: 17px;
  cursor: pointer;
  transition: 0.3s;
}

.contact-send-btn:hover {
  background: #f4dadf;
}

@media only screen and (max-width: 720px) {
  .contact-wrap {
    padding: 40px 16px;
  }
}

@media only screen and (max-width: 480px) {
  .contact-card {
    padding: 28px 24px 35px;
  }

  .contact-card-title {
    font-size: 30px;
  }
}

/* -------------------- Cropped banner (about / contact) -------------------- */
.page-banner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.page-banner img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  object-position: center 35%;
  display: block;
}

.page-banner .fade {
  height: 50px;
}

/* Wider than the standard .group 1100px cap so the exhibitions photo has
   room to be a real second column instead of a narrow strip. Only
   about.php uses .page-content, so this doesn't touch .group elsewhere. */
.page-content {
  max-width: 1300px;
  padding-top: 45px;
  padding-bottom: 80px;
}

.contact-details p {
  font-size: 18px;
  line-height: 2;
  color: #a61d26;
  font-family: Georgia, "Times New Roman", Times, serif;
  margin: 0 0 8px;
}

.available-works {
  padding: 50px 0;
}

.available-works h2 {
  text-align: center;

  margin-bottom: 40px;
  font-size: 2rem;
  text-transform: uppercase;
  color: #a61d26;
}

.grid-three-columns {
  gap: 30px;
}

.painting {
  margin: 0;
  text-align: center;
  margin-left: 15px;
  margin-right: 15px;
  margin-bottom: 20px;
  transition: transform 0.3s ease;
}

.painting img {
  width: 100%;
  height: 400px;
  object-fit: contain;
  display: block;
  transition: transform 0.3s ease;
}
.painting:hover {
  transform: translateY(-8px);
}

.painting:hover img {
  transform: scale(1.05);
}

/* Caption */
.painting figcaption {
  margin-top: 15px;
}

.painting h3 {
  margin: 0 0 8px;
  font-size: 1.25rem;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #a61d26;
}

.painting p {
  margin: 5px 0;
  font-size: 0.95rem;
  line-height: 1.4;
  color: #a61d26;
}

.painting p:last-child {
  font-weight: bold;
  font-size: 1.1rem;
}

/* Not-for-sale marker: sits where a title/price block would, so the
   rows in that grid stay the same height as the available works. */
.painting .nfs-label {
  font-size: 1.25rem;
  font-weight: bold;
  letter-spacing: 1px;
}

/* ==================================================================
   Responsive layer
   Sits after the framework so equal-specificity rules win.
   Breakpoints match the framework: 1200 / 960 / 720 / 480
   ================================================================== */

/* -------------------- Navigation -------------------- */

/* .navlinks is now a direct child of #nav so the framework's mobile
   dropdown rules (#nav>ul) apply. Restore the wide desktop spacing,
   which #nav>ul>li would otherwise override at 15px. */
#nav > ul.navlinks > li {
  margin: 0 35px;
  padding: 0;
}

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

/* Hamburger / close toggles: hidden above 720 by #nav>a{display:none} */
.nav-toggle img {
  width: 34px;
  height: auto;
  display: inline-block;
}

#footer-nav {
  background: #c52d4b;
  width: 100%;
}

/* -------------------- Flexible media -------------------- */

/* Fixed heights need object-fit so art is cropped, never stretched. */
.hero > img {
  object-fit: cover;
  object-position: center;
}

.gallery-img {
  width: 100%;
  max-width: 350px;
  height: 250px;
  object-fit: cover;
}

/* Grid items default to min-width:auto, which lets a fixed-width child
   (e.g. .person-photo) push its track wider than the viewport. */
.grid-two-columns > *,
.grid-three-columns > *,
.grid-four-columns > * {
  min-width: 0;
}

@media only screen and (max-width: 1200px) {
  .hero > img {
    height: 600px;
  }

  .painting img {
    height: 340px;
  }

  .person-name {
    font-size: 46px;
  }
}

@media only screen and (max-width: 960px) {
  #nav > ul.navlinks > li {
    margin: 0 16px;
  }

  .navlinks li a {
    font-size: 18px;
  }

  .hero > img {
    height: 460px;
  }

  .fade {
    height: 200px;
  }

  /* Three across is too tight below 960 - drop to two */
  .grid-three-columns {
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
  }

  .gallery-img {
    margin-top: 60px;
  }

  .painting img {
    height: 320px;
  }

  .person-name {
    font-size: 38px;
  }

  .page-banner img {
    height: 150px;
  }
}

@media only screen and (max-width: 720px) {
  /* Mobile dropdown: framework defaults to grey, brand it red */
  #nav > ul {
    background-color: #c52d4b;
    border-top: 3px solid #fff;
    margin-top: 0 !important;
    padding-bottom: 14px;
  }

  #nav > ul > li {
    padding: 10px 0 !important;
  }

  #nav li ul {
    background-color: #c52d4b;
  }

  #nav:not(:target) > a:first-of-type,
  #nav:target > a:last-of-type {
    padding: 12px 0;
  }

  .nav-logo img {
    width: 240px;
  }

  /* Re-assert single column: the 960 rule above would otherwise
	   win over the framework's 720 rule by source order */
  .grid-three-columns {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }

  .hero > img {
    height: 360px;
  }

  .fade {
    height: 150px;
  }

  .arrow img {
    width: 34px;
    height: 20px;
    max-width: 34px !important;
  }

  .gallery-img {
    margin-top: 40px;
    height: 220px;
  }

  .pictures {
    padding-bottom: 60px;
  }

  .picture-fade {
    height: 100px;
  }

  .button-area {
    margin-top: 35px;
  }

  .view-btn {
    font-size: 18px;
    padding: 13px 30px;
  }

  .group {
    padding: 0 24px;
  }

  .person-name {
    font-size: 32px;
  }

  .available-works {
    padding: 30px 0;
  }

  .painting {
    margin-left: 0;
    margin-right: 0;
  }

  .painting img {
    height: 300px;
  }

  /* Footer: stop the 50/50 split, stack and centre */
  .footer-left,
  .footer-right {
    display: block;
    width: 100%;
    text-align: center;
  }

  .footer-left img {
    width: 180px;
  }

  .footer-right {
    margin-top: 8px;
    font-size: 16px;
  }

  #footer-nav .navlinks li {
    margin: 0 14px;
  }

  .page-content {
    padding-top: 30px;
    padding-bottom: 55px;
  }

  .page-banner img {
    height: 120px;
  }

  .page-banner .fade {
    height: 35px;
  }
}

@media only screen and (max-width: 480px) {
  .nav-logo img {
    width: 200px;
  }

  .hero > img {
    height: 280px;
  }

  .fade {
    height: 110px;
  }

  .gallery-img {
    height: 190px;
  }

  .person-name {
    font-size: 27px;
  }

  .person-bio p {
    font-size: 15px;
    line-height: 1.8;
  }

  .available-works h2 {
    font-size: 1.5rem;
  }

  .painting img {
    height: 240px;
  }

  .painting h3 {
    font-size: 1.1rem;
  }

  .page-banner img {
    height: 90px;
  }

  .page-banner .fade {
    height: 28px;
  }

  .contact-details p {
    font-size: 16px;
  }

  #footer-nav .navlinks li {
    margin: 0 9px;
  }

  #footer-nav .navlinks li a {
    font-size: 16px;
  }

  .footer-right {
    font-size: 15px;
  }
}

/* ==================================================================
   Sticky footer
   Short pages (about / contact on a tall screen) used to leave the
   page background showing under the footer. Chain a column flexbox
   from <body> down to <main>, then push .footer (and the #footer-nav
   that follows it) to the bottom with margin-top:auto.
   ================================================================== */

html {
  background: #f2c8cb;
}

body {
  background: #f2c8cb;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.container {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}

/* Flex item = own formatting context, so the floated #nav is contained */
.header {
  flex: 0 0 auto;
}

main {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}

/* Never let a short viewport squash the fixed-height hero / gallery */
main > * {
  flex-shrink: 0;
}

/* margin:0 auto would otherwise shrink .group to fit-content as a flex item */
.group {
  width: 100%;
  box-sizing: border-box;
}

.footer {
  margin-top: auto;
}

#footer-nav {
  flex-shrink: 0;
}

@media only screen and (max-width: 480px) {
  .arrow img {
    width: 30px;
    height: 18px;
    max-width: 30px !important;
  }
}

/* -------------------- Portfolio page: white background -------------------- */
html:has(body.portfolio-page),
body.portfolio-page,
.portfolio-page main {
  background: #fff;
}

.portfolio-page .page-banner .fade {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.15) 25%,
    rgba(255, 255, 255, 0.45) 55%,
    rgba(255, 255, 255, 0.75) 80%,
    #fff 100%
  );
}