:root {
  --desktop-width: 2000;
  --header-height: 241;
  --hero-height: 1266;
  --paper: #ead2a8;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--paper); }
img { display: block; max-width: 100%; }
a { color: inherit; }

.site { width: 100%; overflow-x: hidden; }

/* =========================
   DESKTOP: PSD coordinate match
   ========================= */
.masthead {
  position: relative;
  width: min(100%, 2000px);
  height: min(12.05vw, 241px);
  margin: 0 auto;
  background: url("images/header-paper.webp") center top / 100% 100% no-repeat;
  overflow: visible;
  z-index: 10;
}

.masthead-inner,
.hero,
.footer-strip {
  width: 100%;
  max-width: 2000px;
  margin: 0 auto;
}

.masthead-inner { position: relative; height: 100%; }

.logo-picture {
  position: absolute;
  display: block;
  left: 24.45%;
  top: 8.30%;
  width: 17.80%;
}

.logo-picture .logo {
  width: 100%;
  height: auto;
}

.logo {
  height: auto;
}

.free-sign {
  position: absolute;
  left: 58.20%;
  top: -51.04%;
  width: 23.80%;
  aspect-ratio: 476 / 382;
  z-index: 5;
}

.sign-board { position: absolute; inset: 0; width: 100%; height: 100%; }
.free-word { position: absolute; left: 19.75%; top: 42.15%; width: 57.77%; height: auto; }
.sign-phone { position: absolute; left: 27.10%; top: 74.35%; width: 46.64%; height: auto; }

.hero {
  position: relative;
  height: min(63.30vw, 1266px);
  background-image: url("images/hero-photo-mobile-fixed.webp");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;
  overflow: visible;
  z-index: 1;
}

.content { position: absolute; inset: 0; z-index: 2; }

.intro { position: absolute; left: 24.60%; top: 10.90%; width: 33.60%; }
.shovel { position: absolute; left: 25.35%; top: 22.04%; width: 16.05%; }
.caption { position: absolute; left: 26.90%; top: 32.94%; width: 22.00%; }
.rule { position: absolute; left: 24.55%; top: 33.41%; width: 1.60%; }
.museum-title { position: absolute; left: 24.35%; top: 38.07%; width: 45.75%; margin: 0; padding: 0; }
.museum-title img { width: 100%; height: auto; }
.info-picture { position: absolute; display: block; left: 24.40%; top: 46.29%; width: 41.85%; }
.info-picture .info { width: 100%; height: auto; }

.info { position: static; width: 100%; height: auto; }
.tour { position: absolute; left: 24.35%; top: 65.96%; width: 43.00%; }
.tour img { width: 100%; height: auto; }

.photo-stack { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.photo { position: absolute; }
.photo img { position: absolute; max-width: none; }

/* Exact PSD coordinates, scaled proportionally with the 2000px canvas. */
.photo-right { left: 41.55%; top: 67.22%; width: 37.90%; height: 44.87%; }
.photo-right .photo-image { left: 0; top: 0; width: 100%; height: auto; }
.photo-right .frame { left: 11.08%; top: 18.66%; width: 71.00%; height: auto; }

.photo-left { left: 24.65%; top: 78.67%; width: 27.55%; height: 32.38%; }
.photo-left .frame { left: 0; top: 0; width: 100%; height: auto; }
.photo-left .photo-image { left: 2.90%; top: 4.15%; width: 93.47%; height: auto; }

.photo-front { left: 40.65%; top: 93.58%; width: 22.60%; height: 25.91%; }
.photo-front .frame { left: 0; top: 0; width: 100%; height: auto; }
.photo-front .photo-image { left: 3.76%; top: 5.49%; width: 91.15%; height: auto; }

.footer-strip {
  position: relative;
  height: min(17.45vw, 349px);
  background: url("images/footer-paper.webp") center top / 100% 100% no-repeat;
  z-index: 0;
}

/* =========================
   RESPONSIVE RECONSTRUCTION
   The desktop canvas remains the PSD master at 2000px.
   Below 1200px we preserve the visual hierarchy but let the
   composition breathe and stack naturally.
   ========================= */

@media (max-width: 1199px) and (min-width: 768px) {
  .masthead {
    height: clamp(150px, 12.05vw, 241px);
  }

  .hero {
    height: clamp(980px, 63.3vw, 1266px);
    background-size: cover;
    background-position: center top;
  }

  .footer-strip {
    height: clamp(220px, 17.45vw, 349px);
  }
}

@media (max-width: 767px) {
  :root { --mobile-gutter: 18px; }

  body {
    background: var(--paper);
  }

  .masthead {
    height: 132px;
    background-size: auto 100%;
    background-position: center top;
  }

  .masthead-inner {
    max-width: 520px;
    margin: 0 auto;
  }

  .logo-picture {
    left: 50%;
    top: 9px;
    width: min(46vw, 178px);
    transform: translateX(-50%);
  }

  .free-sign {
    left: auto;
    right: clamp(5px, 2vw, 14px);
    top: -2px;
    width: clamp(100px, 28vw, 128px);
  }

  .hero {
    height: auto;
    min-height: 0;
    padding: 38px var(--mobile-gutter) 0;
    background-size: auto 100%;
    background-position: center top;
  }

  .content {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .intro,
  .shovel,
  .caption,
  .rule,
  .museum-title,
  .info,
  .tour {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
  }

  .intro {
    width: min(100%, 430px);
  }

  .shovel {
    width: min(72%, 290px);
    margin: 20px auto 0;
  }

  .caption {
    width: min(94%, 345px);
    margin: 20px auto 0;
  }

  .rule {
    width: 27px;
    margin: 9px auto 0;
  }

  .museum-title {
    width: min(100%, 430px);
    margin: 11px auto 0;
  }

  .info-picture {
    position: relative;
    left: auto;
    top: auto;
    width: min(100%, 400px);
    margin: 15px auto 0;
  }

  .tour {
    width: min(100%, 430px);
    margin: 20px auto 0;
  }

  .photo-stack {
    position: relative;
    inset: auto;
    width: min(100%, 430px);
    height: 395px;
    margin: 32px auto -38px;
  }

  .photo {
    transform-origin: center center;
  }

  .photo-right {
    left: 23%;
    top: 0;
    width: 72%;
    height: auto;
  }

  .photo-left {
    left: 0;
    top: 62px;
    width: 66%;
    height: auto;
  }

  .photo-front {
    left: 25%;
    top: 178px;
    width: 55%;
    height: auto;
  }

  .footer-strip {
    height: 155px;
    background-size: auto 100%;
    background-position: center top;
  }
}

@media (max-width: 420px) {
  .masthead { height: 119px; }

  .logo-picture {
    top: 9px;
    width: 43vw;
    max-width: 160px;
  }

  .free-sign {
    width: 104px;
    right: 4px;
  }

  .hero {
    padding-top: 31px;
  }

  .intro { width: min(100%, 360px); }
  .shovel { width: min(70%, 245px); margin-top: 17px; }
  .caption { width: min(96%, 320px); margin-top: 17px; }
  .rule { width: 24px; }
  .museum-title { width: min(100%, 360px); margin-top: 9px; }
  .info-picture { width: min(100%, 350px); margin-top: 12px; }
  .tour { width: min(100%, 370px); margin-top: 17px; }

  .photo-stack {
    width: min(100%, 390px);
    height: 350px;
    margin-top: 28px;
    margin-bottom: -32px;
  }

  .photo-right { left: 22%; width: 74%; }
  .photo-left { top: 55px; width: 67%; }
  .photo-front { left: 24%; top: 158px; width: 56%; }

  .footer-strip { height: 135px; }
}

@media (max-width: 360px) {
  .masthead { height: 110px; }

  .free-sign { width: 118px; right: -2px; top: -8px; }
  .logo-picture { width: 42vw; }

  .hero { padding-left: 14px; padding-right: 14px; }
  .photo-stack { height: 325px; }
  .photo-front { top: 146px; }
}

/* =========================
   MOBILE REVISION C
   V4 desktop remains locked above.
   Mobile uses a photo-only hero background so the rasterized
   desktop artwork does not repeat behind the responsive elements.
   ========================= */
@media (max-width: 767px) {
  .hero {
    padding: 48px var(--mobile-gutter) 0;
    background-image:
      linear-gradient(rgba(73, 43, 25, 0.48), rgba(73, 43, 25, 0.48)),
      url("images/hero-photo-mobile-fixed.webp");
    background-repeat: no-repeat, no-repeat;
    background-position: center top, center top;
    background-size: auto 100%, auto 100%;
  }

  .content {
    max-width: 420px;
  }

  .intro {
    width: min(100%, 350px);
    margin: 0 auto;
  }

  .shovel {
    width: min(72%, 240px);
    margin: 42px auto 0;
  }

  .caption {
    width: min(96%, 320px);
    margin: 40px auto 0;
  }

  .rule {
    width: 28px;
    margin: 20px auto 0;
  }

  .museum-title {
    width: min(100%, 355px);
    margin: 30px auto 0;
  }

  .info {
    width: min(100%, 335px);
    margin: 38px auto 0;
  }

  .tour {
    width: min(100%, 315px);
    margin: 42px auto 0;
  }

  .photo-stack {
    width: min(100%, 400px);
    height: 440px;
    margin: 82px auto -42px;
  }

  .photo-right {
    left: 19%;
    top: 0;
    width: 80%;
  }

  .photo-left {
    left: 0;
    top: 86px;
    width: 69%;
  }

  .photo-front {
    left: 24%;
    top: 218px;
    width: 62%;
  }

  .footer-strip {
    height: 150px;
    background-size: auto 100%;
    background-position: center top;
    background-repeat: no-repeat;
  }
}

@media (max-width: 420px) {
  .masthead { height: 116px; }

  .free-sign {
    width: clamp(120px, 30vw, 145px);
    right: -2px;
    top: -8px;
  }

  .hero {
    padding: 42px 17px 0;
  }

  .intro { width: min(100%, 340px); }
  .shovel { width: min(72%, 225px); margin-top: 38px; }
  .caption { width: min(96%, 306px); margin-top: 36px; }
  .rule { margin-top: 18px; }
  .museum-title { width: min(100%, 345px); margin-top: 28px; }
  .info-picture { width: min(100%, 325px); margin-top: 36px; }
  .tour { width: min(100%, 305px); margin-top: 40px; }

  .photo-stack {
    width: min(100%, 392px);
    height: 415px;
    margin-top: 76px;
    margin-bottom: -38px;
  }

  .photo-right { left: 18%; width: 81%; }
  .photo-left { top: 80px; width: 70%; }
  .photo-front { left: 23%; top: 205px; width: 63%; }

  .footer-strip { height: 140px; }
}

@media (max-width: 360px) {
  .masthead { height: 108px; }
  .logo-picture { width: 43vw; }
  .free-sign { width: 118px; right: -2px; top: -8px; }

  .hero { padding-left: 14px; padding-right: 14px; }
  .intro { width: min(100%, 320px); }
  .shovel { width: min(72%, 210px); margin-top: 34px; }
  .caption { width: min(96%, 290px); margin-top: 33px; }
  .museum-title { width: min(100%, 325px); }
  .info-picture { width: min(100%, 300px); }
  .tour { width: min(100%, 285px); }

  .photo-stack {
    height: 380px;
    margin-top: 70px;
  }

  .photo-left { top: 72px; }
  .photo-front { top: 188px; }
  .footer-strip { height: 130px; }
}

/* =========================
   MOBILE REVISION D
   Uses the individual photo + scalloped-border layers supplied
   in threephotos.psd. Desktop V4 updated to match the revised Photoshop artwork.
   ========================= */
.photo-stack-mobile { display: none; }

@media (max-width: 767px) {
  /* Updated client PSD: larger hanging sign. */
  .free-sign {
    width: clamp(120px, 30vw, 145px);
    right: -2px;
    top: -8px;
  }

  .free-sign .sign-board { left: 0; top: 0; width: 100%; height: 100%; }
  .free-sign .free-word { left: 19.75%; top: 42.15%; width: 57.77%; height: auto; }
  .free-sign .sign-phone { left: 27.10%; top: 74.35%; width: 46.64%; height: auto; }

  /* Hide the older frame/photo construction on mobile only. */
  .photo-stack { display: none; }

  .photo-stack-mobile {
    display: block;
    position: relative;
    width: min(100%, 400px);
    height: 720px;
    margin: 78px auto -35px;
    z-index: 6;
    pointer-events: none;
  }

  .mobile-photo {
    position: absolute;
    display: block;
    height: auto;
    max-width: none;
  }

  /* Back/right tractor photo */
  .mobile-photo-tractor {
    width: 91%;
    right: -1%;
    top: 0;
    z-index: 1;
  }

  /* Middle/left workshop photo */
  .mobile-photo-tools {
    width: 96%;
    left: -4%;
    top: 155px;
    z-index: 2;
  }

  /* Front building photo */
  .mobile-photo-building {
    width: 82%;
    right: 2%;
    top: 395px;
    z-index: 3;
  }
}

@media (max-width: 420px) {
  .free-sign { width: 126px; right: -2px; top: -8px; }

  .photo-stack-mobile {
    width: min(100%, 392px);
    height: 685px;
    margin-top: 72px;
    margin-bottom: -35px;
  }

  .mobile-photo-tractor {
    width: 92%;
    right: -2%;
  }

  .mobile-photo-tools {
    width: 98%;
    left: -5%;
    top: 145px;
  }

  .mobile-photo-building {
    width: 84%;
    right: 1%;
    top: 375px;
  }
}

@media (max-width: 360px) {
  .free-sign { width: 118px; right: -2px; top: -8px; }

  .photo-stack-mobile {
    height: 625px;
    margin-top: 66px;
  }

  .mobile-photo-tools { top: 132px; }
  .mobile-photo-building { top: 342px; }
}