:root {
  --color-background: #f9f8f3;
  --color-panel-teal: #1f7a8c;
  --color-accent-yellow: #e8b601;
  --color-text-green: #5d8c6a;
  --color-text-body: #0c0b09;
  --color-text-body-rgb: 12, 11, 9;
  --color-cta-purple: #9c8bbf;
  --color-text-on-dark: #ffffff;

  --font-display: "Barlow Condensed", "Segoe UI", sans-serif;
  --font-body: "Barlow Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text-body);
  background-color: var(--color-background);
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

/* Header / nav */

.site-header {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4rem;
  padding: 0.875rem 2rem;
  background-color: var(--color-background);
}

.site-logo img {
  height: 4.75rem;
  width: auto;
}

.site-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 2.75rem;
  margin: 0;
  padding: 0;
}

.site-nav a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-text-green);
}

.site-nav a:hover,
.site-nav a:focus-visible {
  text-decoration: underline;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.3rem;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.nav-toggle-bar {
  display: block;
  width: 1.5rem;
  height: 0.1875rem;
  border-radius: 999px;
  background-color: var(--color-text-green);
}

.mobile-nav {
  display: none;
}

/* Tight, tiled wave divider between header and hero panel */

.wave-divider {
  height: 4rem;
  width: 100%;
  background-color: var(--color-background);
  background-repeat: repeat-x;
  /* tile's viewBox is drawn 1:1 with this size, so it renders undistorted —
     keep both numbers in sync if you change either one */
  background-size: 32px 4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 64' preserveAspectRatio='none'%3E%3Cpath d='M0,32 C5,28 11,28 16,32 C21,36 27,36 32,32 L32,64 L0,64 Z' fill='%231f7a8c'/%3E%3Cpath d='M0,32 C5,28 11,28 16,32 C21,36 27,36 32,32' fill='none' stroke='%235d8c6a' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Hero / bio */

main {
  background-color: var(--color-panel-teal);
  padding: 4rem 3rem 5rem;
}

.hero {
  max-width: 75rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 0;
  align-items: start;
}

.hero-visual {
  position: relative;
  z-index: 2;
  /* pull right so the photo + backdrop cascade down and overlap the card's top-left corner */
  margin-right: -2.75rem;
}

.hero-photo {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 1.5rem;
}

/* patterned backdrop offset behind the photo */
.hero-visual-backdrop {
  position: absolute;
  inset: 0;
  background-image: url("../images/ShelleyCerny_Pattern01.png");
  background-size: cover;
  background-position: center;
  border-radius: 1.5rem;
  transform: translate(2.75rem, 2.6rem);
  z-index: 1;
}

.hero-card {
  position: relative;
  z-index: 1;
  background-color: var(--color-background);
  border-radius: 1.5rem;
  /* pulled up so the photo+backdrop cascade down further over the card's
     top-left corner, giving a deeper overlap than a simple corner touch */
  margin-top: 13rem;
  /* left padding centers the title/body/button in the space between the
     backdrop's right edge and the card's own right edge: backdrop reach
     (hero-visual's -2.75rem margin + its 2.75rem translate = 5.5rem) plus
     a gap matching the card's own 5rem right padding, so the text column
     is inset evenly from both the image and the card's right edge */
  padding: 4rem 5rem 4rem 10.5rem;
}

.hero-card h1 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-text-green);
  font-size: 2.25rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0 0 1.5rem;
}

.hero-card p {
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--color-text-body);
  margin: 0 0 2rem;
}

.button {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  padding: 0.9rem 2rem;
}

.button--resume {
  background-color: var(--color-cta-purple);
  color: var(--color-text-on-dark);
}

.button--resume:hover,
.button--resume:focus-visible {
  background-color: #8a78ac;
}

/* Footer */

.site-footer {
  background-color: var(--color-accent-yellow);
  /* matches the wave divider's stroke: same color, same 3px weight */
  border-top: 3px solid var(--color-text-green);
  padding: 1.25rem 2rem;
  text-align: center;
}

.site-footer p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-on-dark);
}

/* Work gallery grid */

.work-main {
  padding: 3rem;
}

.work-grid {
  max-width: 75rem;
  margin: 0 auto;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
  padding: 4rem;
  background-color: var(--color-background);
  border-radius: 1.5rem;
}

.work-column {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.work-tile {
  display: block;
  position: relative;
  border-radius: 0.25rem;
  overflow: hidden;
}

.work-tile img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 0.25rem;
}

/* Square-cropped tiles pair with the taller default tile above/below them in
   the same .work-column so each column's total stack height matches its
   neighbors, keeping the grid's top and bottom edges flush */
.work-tile--square img {
  aspect-ratio: 1 / 1;
}

/* Anchors the image's bottom edge so the square crop only trims off the
   top of the source image instead of cropping evenly from both sides */
.work-tile-img--crop-top {
  object-position: bottom;
}

.work-tile-title {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-on-dark);
  background-color: rgba(var(--color-text-body-rgb), 0.5);
  opacity: 0;
}

.work-tile:hover .work-tile-title,
.work-tile:focus-visible .work-tile-title {
  opacity: 1;
}

/* Project detail page */

.project-detail {
  max-width: 75rem;
  margin: 0 auto;
  background-color: var(--color-background);
  border-radius: 1.5rem;
  padding: 3rem;
}

.back-to-work {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-text-green);
  margin-bottom: 1.5rem;
}

.back-to-work:hover,
.back-to-work:focus-visible {
  text-decoration: underline;
}

.project-detail h1 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-text-green);
  font-size: 2.25rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0 0 2rem;
}

/* Featured project header treatment (larger centered title + subtitle +
   intro copy), opted into per-page via .project-title/.project-subtitle/
   .project-body rather than changing the shared .project-detail h1 rule */
.project-detail h1.project-title {
  text-align: center;
  font-size: 3rem;
  letter-spacing: 0.12em;
}

.project-subtitle {
  margin: 0 0 2rem;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-text-body);
}

.project-body {
  margin: 0 0 2.5rem;
  text-indent: 2em;
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--color-text-body);
}

.project-footer-cta {
  margin-top: 2.5rem;
  text-align: center;
}

.project-detail-images {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.project-detail-images--stacked {
  grid-template-columns: 1fr;
}

.project-detail-images img {
  width: 100%;
  border-radius: 0.25rem;
}

.project-image--full {
  grid-column: 1 / -1;
}

/* Numbered card grid: 3 per row, wrapping via flex so a leftover partial
   row (e.g. the last 2 of 5) centers itself automatically */
.project-timeline {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 2.5rem;
  row-gap: 2rem;
}

.project-timeline-item {
  flex: 0 1 21rem;
}

.project-timeline-header {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin: 0 0 0.75rem;
}

.project-timeline-number {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background-color: var(--color-accent-yellow);
  color: var(--color-text-on-dark);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
}

.project-timeline-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-text-body);
}

.project-timeline-body {
  /* indent to align under the title text, past the number "bullet" and its gap */
  margin: 0;
  padding-left: calc(2.25rem + 1.25rem);
  font-size: 0.9rem;
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--color-text-body);
}

/* Row of two images that together fill the full row width (matching the
   text/full-width image below) while landing on a shared height with no
   cropping — each image's flex-grow (set inline per image) equals its own
   natural aspect ratio, so flex distributes width proportionally and the
   aspect-ratio property (also set inline per image) derives a matching
   height from that width automatically */
.project-image-row {
  grid-column: 1 / -1;
  display: flex;
  gap: 1.5rem;
}

.project-image-row img.project-image--scaled {
  flex-basis: 0;
  min-width: 0;
  height: auto;
}

/* Contact page */

/* Same box footprint as .work-grid: 75rem max-width, centered, 1.5rem
   corners, and (via the shared .work-main class) the same 3rem distance
   from the wave-divider/scalloped edge above it */
.contact-pattern {
  max-width: 75rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1.5rem;
  overflow: hidden;
  padding: 7.5rem 4rem 3rem;
  background-image: url("../images/Shelleycerny-checkared.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.contact-card {
  position: relative;
  max-width: 60rem;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 2rem;
  background-color: var(--color-background);
  border-radius: 1.5rem;
  box-shadow:
    0 2rem 3.5rem -1rem rgba(12, 11, 9, 0.6),
    0 -0.75rem 2rem -0.75rem rgba(12, 11, 9, 0.5);
  padding: 3rem;
  /* the photo's rightward overflow (negative margin) shifts the card+photo
     group's visual center right of the card's own center; shift the group
     back left so it's centered as a whole within .contact-pattern */
  transform: translateX(-2rem);
}

.contact-card-content {
  flex: 1 1 55%;
  min-width: 0;
  padding: 0.5rem 1rem 0.5rem 0.5rem;
}

.contact-card-content h1 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-text-green);
  font-size: 2.25rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0 0 1.5rem;
}

.contact-card-content p {
  text-indent: 1.5em;
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--color-text-body);
  margin: 0 0 2rem;
}

.contact-photo {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 30rem;
  max-width: 45%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 1.5rem;
  /* offset up and to the right, well past the card's edge; no need to
     align with the pattern panel's own boundary */
  margin: -11rem -7rem -2rem 0;
}

/* Services page */

/* Same box footprint/background technique as .contact-pattern, sized to
   the blobs pattern asset instead; uniform padding (rather than
   .contact-pattern's photo-overlap-tuned asymmetric padding) since the
   services card has no overlapping photo */
.services-pattern {
  max-width: 75rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1.5rem;
  overflow: hidden;
  padding: 5rem 4rem;
  background-image: url("../images/Shelleycerny-blobs.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.services-card {
  width: 100%;
  background-color: var(--color-background);
  border-radius: 1.5rem;
  box-shadow:
    0 2rem 3.5rem -1rem rgba(12, 11, 9, 0.6),
    0 -0.75rem 2rem -0.75rem rgba(12, 11, 9, 0.5);
  padding: 3rem 4rem 4rem;
}

.services-card h1 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-text-green);
  font-size: 2.25rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 3rem;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 3rem;
  row-gap: 3.5rem;
}

.service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* without this, the grid item's default auto min-width equals its
     content's min-content (the widest single letter-spaced/uppercase word
     in the subtitle), which can force the whole grid — and page — wider
     than the viewport on narrow screens */
  min-width: 0;
}

.service-item img {
  height: 5rem;
  width: auto;
  margin: 0 0 1.5rem;
}

.service-item .project-subtitle {
  margin: 0 0 1rem;
}

.service-item .project-body {
  margin: 0;
  text-indent: 0;
}

/* Responsive breakpoints */

@media (max-width: 64rem) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr);
  }

  .hero-visual {
    margin-right: -1.8rem;
  }

  .hero-card {
    /* same deeper-overlap logic as the base rule, scaled to this
       breakpoint's narrower column width */
    margin-top: 11.25rem;
    /* centers the text column the same way as the base rule: backdrop
       reach (4.55rem) plus a gap matching the card's 3.4375rem right
       padding */
    padding: 2.75rem 3.4375rem 2.75rem 8rem;
  }

  .work-grid {
    grid-template-columns: repeat(3, 1fr);
    padding: 3rem;
  }
}

@media (max-width: 48rem) {
  .site-header {
    position: relative;
    flex-direction: row;
    justify-content: center;
    text-align: center;
    gap: 0.75rem;
  }

  .nav-toggle {
    display: inline-flex;
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
  }

  .site-nav--primary,
  .site-nav--secondary {
    display: none;
  }

  .site-header.nav-open .mobile-nav {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    background-color: var(--color-background);
    border-bottom: 3px solid var(--color-text-green);
    padding: 1.25rem 0;
  }

  .mobile-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
  }

  .mobile-nav a {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-text-green);
  }

  .mobile-nav a:hover,
  .mobile-nav a:focus-visible {
    text-decoration: underline;
  }

  main {
    padding: 2.5rem 1.75rem 3.5rem;
  }

  .hero {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .hero-visual {
    width: 17.5rem;
    margin: 0 auto;
    /* the backdrop cascades 2.75rem to the right of the photo (see the
       translate on .hero-visual-backdrop), so centering this box alone
       would leave the combined photo+pattern cluster off-center; shift
       left by half that reach to center the cluster as a whole */
    transform: translateX(-1.375rem);
  }

  .hero-card {
    margin-top: 0;
    padding: 6.5rem 2.25rem 2.25rem;
  }

  .hero-card h1 {
    font-size: 1.75rem;
  }

  .work-main {
    padding: 1.75rem;
  }

  .work-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 2rem;
  }

  /* desktop pairs tiles into .work-column stacks to balance column heights
     for a 5-column grid; at 2 columns that pairing no longer applies, so
     unwrap it and let each tile fall into the grid individually in DOM
     order (this is what lands Murals directly under Wedding Signs) */
  .work-column {
    display: contents;
  }

  /* show the full source image instead of the desktop crop, so the fixed
     3/4 and 1/1 aspect boxes (and the crop-top position) don't clip it */
  .work-tile img {
    aspect-ratio: auto;
    object-fit: contain;
  }

  .project-detail {
    padding: 1.75rem;
  }

  .project-detail-images {
    grid-template-columns: 1fr;
  }

  .project-image-row {
    flex-direction: column;
    align-items: center;
  }

  .project-image-row img.project-image--scaled {
    width: 100%;
    height: auto;
  }

  .contact-main {
    padding: 1.75rem;
  }

  .contact-pattern {
    padding: 2.25rem 1.5rem;
  }

  .contact-card {
    flex-direction: column;
    padding: 2.25rem;
    transform: none;
  }

  .contact-card-content {
    padding: 0;
  }

  .contact-photo {
    width: 100%;
    max-width: 16rem;
    margin: 1.5rem auto 0;
  }

  .services-main {
    padding: 1.75rem;
  }

  .services-pattern {
    padding: 2.25rem 1.5rem;
  }

  .services-card {
    padding: 2.25rem;
  }

  .services-grid {
    grid-template-columns: 1fr;
    row-gap: 2.5rem;
  }
}

@media (max-width: 23.5rem) {
  .site-header {
    padding: 0.75rem 1rem;
  }

  .site-nav ul {
    gap: 1.5rem;
  }

  .hero-visual {
    width: 15rem;
  }

  .hero-card {
    padding: 5.5rem 1.75rem 1.75rem;
  }

  .work-grid {
    grid-template-columns: 1fr;
    padding: 1.5rem;
  }
}