html, body { margin: 0; min-height: 100%; background: #ead7ba; }
body { font-family: Arial, Helvetica, sans-serif; overflow-x: hidden; }

.desktop-exact { display: grid; place-items: start center; width: 100%; min-height: 100vh; background: #ead7ba; }
.design-frame { position: relative; width: min(100vw, 1448px); margin: 0 auto; background: #ead7ba; }
.exact-design { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.hotspot { position: absolute; display: block; z-index: 5; }
.nav-home { left: 50.0%; top: 2.7%; width: 6.1%; height: 4.2%; }
.nav-about { left: 57.2%; top: 2.7%; width: 8.0%; height: 4.2%; }
.nav-mission { left: 66.4%; top: 2.7%; width: 10.4%; height: 4.2%; }
.nav-archive { left: 78.4%; top: 2.7%; width: 8.3%; height: 4.2%; }
.nav-contact { left: 88.0%; top: 2.7%; width: 8.8%; height: 4.2%; }
.cta-main { left: 33.2%; top: 88.3%; width: 30.7%; height: 6.0%; }
.email-main { left: 36.4%; top: 94.1%; width: 28.0%; height: 4.2%; }
.hotspot:focus-visible { outline: 3px solid #b63724; outline-offset: 3px; background: rgba(182, 55, 36, .12); }
.mobile-site { display: none; }

@media (max-width: 760px) {
  html, body {
    background: linear-gradient(rgba(248,234,210,.88), rgba(248,234,210,.92)), url("../images/mobile-paper-texture.webp");
    background-size: 1100px 1600px;
  }

  .desktop-exact { display: none; }

  .mobile-site {
    display: block;
    min-height: 100svh;
    color: #15120f;
    background: linear-gradient(rgba(248,234,210,.88), rgba(248,234,210,.92)), url("../images/mobile-paper-texture.webp");
    background-size: 1100px 1600px;
    padding: max(12px, env(safe-area-inset-top)) 14px max(24px, env(safe-area-inset-bottom));
  }

  .mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 0 12px;
    border-bottom: 1px solid rgba(21,18,15,.18);
  }

  .mobile-logo {
    color: #15120f;
    text-decoration: none;
    font-weight: 1000;
    font-size: clamp(1.45rem, 8vw, 2.2rem);
    letter-spacing: -.055em;
    line-height: .9;
  }

  .mobile-logo span { color: #5e4a37; }

  .mobile-contact {
    color: #15120f;
    text-decoration: none;
    font-weight: 950;
    text-transform: uppercase;
    font-size: .78rem;
    border-bottom: 2px solid #b43724;
    padding-bottom: 3px;
  }

  .mobile-hero { padding: 18px 0 10px; }

  .mobile-title h1 {
    margin: 0;
    font-size: clamp(4.6rem, 25vw, 7.2rem);
    line-height: .78;
    letter-spacing: -.08em;
    font-weight: 1000;
    text-transform: uppercase;
  }

  .red-line {
    width: 64%;
    max-width: 260px;
    height: 5px;
    margin: 16px 0 12px;
    border-radius: 999px;
    background: #b43724;
  }

  .mobile-title h2 {
    margin: 0 0 12px;
    font-family: "Trebuchet MS", "Comic Sans MS", cursive, sans-serif;
    font-style: italic;
    font-size: clamp(1.35rem, 6.2vw, 2rem);
    line-height: 1.05;
    letter-spacing: -.025em;
  }

  .mobile-title p {
    margin: 0;
    color: #2b241e;
    font-size: .98rem;
    line-height: 1.48;
    font-weight: 650;
  }

  .mobile-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    margin-top: 18px;
    width: 100%;
    border-radius: 5px;
    color: #fff7e8;
    background: #b43724;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 950;
    box-shadow: 0 12px 26px rgba(141,43,30,.24);
  }

  .mobile-hero-image {
    width: 100%;
    margin-top: 18px;
    border-radius: 18px;
    border: 1px solid rgba(21,18,15,.18);
    box-shadow: 0 18px 42px rgba(50,32,18,.16);
  }

  .mobile-cards {
    display: grid;
    gap: 12px;
    padding: 10px 0 16px;
  }

  .mobile-cards article {
    display: grid;
    grid-template-columns: 112px 1fr;
    gap: 10px;
    align-items: center;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(21,18,15,.18);
    background: rgba(248,234,210,.86);
    box-shadow: 0 10px 24px rgba(50,32,18,.07);
    min-height: 126px;
  }

  .mobile-cards img {
    width: 96px;
    height: 96px;
    object-fit: contain;
    border-radius: 999px;
    display: block;
    justify-self: center;
    align-self: center;
  }

  .mobile-cards h3 {
    margin: 0 0 8px;
    font-size: 1rem;
    line-height: 1.06;
    text-transform: uppercase;
    letter-spacing: -.02em;
  }

  .mobile-cards h3::after {
    content: "";
    display: block;
    width: 42px;
    height: 3px;
    margin-top: 7px;
    border-radius: 999px;
    background: #b43724;
  }

  .mobile-cards p {
    margin: 0;
    color: #2b241e;
    font-size: .9rem;
    line-height: 1.38;
    font-weight: 600;
  }

  .mobile-about { padding: 12px 0 18px; }

  .black-note {
    display: block;
    width: fit-content;
    margin: 0 0 16px;
    padding: 14px 18px;
    color: #fff7e8;
    background: #15120f;
    font-family: "Trebuchet MS", "Comic Sans MS", cursive, sans-serif;
    font-weight: 950;
    transform: rotate(-1deg);
  }

  .mobile-about h3 {
    margin: 0;
    color: #15120f;
    text-transform: uppercase;
    font-size: clamp(1.8rem, 9vw, 3rem);
    line-height: .95;
    letter-spacing: -.06em;
  }

  .mobile-footer {
    display: grid;
    gap: 10px;
    padding: 18px 0 8px;
    border-top: 1px solid rgba(21,18,15,.18);
    color: #655545;
  }

  .mobile-footer a {
    color: #15120f;
    font-family: "Trebuchet MS", "Comic Sans MS", cursive, sans-serif;
    font-size: 1.45rem;
    font-weight: 950;
    text-decoration: underline;
    text-underline-offset: 6px;
  }

  .mobile-footer span { font-size: .86rem; }
}

@media (max-width: 390px) {
  .mobile-cards article {
    grid-template-columns: 92px 1fr;
    padding: 13px;
  }

  .mobile-cards img {
    width: 82px;
    height: 82px;
  }
}