:root {
  --cream: #f4ede0;
  --sand: #efe6d3;
  --bar: #efe6d3;
  --ink: #3f3a30;
  --accent: #b98a52;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  background: var(--cream);
  color: var(--ink);
  font-family: Georgia, 'Times New Roman', serif;
  -webkit-font-smoothing: antialiased;
}

.announce {
  background: var(--bar);
  color: #55503f;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  padding: 9px 12px;
}

.page {
  max-width: 1440px;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 0 40px rgba(80, 60, 30, 0.12);
  container-type: inline-size;
  position: relative;
}

/* clip the 30px design-annotation strip baked into the mockups (30/1440 = 2.0833% of width) */
.sheet {
  overflow: hidden;
}
.sheet img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: -2.0833%;
}

/* invisible click zones over the baked-in header nav (units = % of page width) */
.nav-overlay a {
  position: absolute;
  display: block;
  z-index: 2;
}
.nav-overlay .z-logo    { left: 12.5cqw; top: 0.8cqw;  width: 9.5cqw; height: 4.8cqw; }
.nav-overlay .z-home    { left: 30.6cqw; top: 1.7cqw;  width: 4.1cqw; height: 3.2cqw; }
.nav-overlay .z-shop    { left: 34.7cqw; top: 1.7cqw;  width: 3.9cqw; height: 3.2cqw; }
.nav-overlay .z-shoes   { left: 38.6cqw; top: 1.7cqw;  width: 4.2cqw; height: 3.2cqw; }
.nav-overlay .z-bags    { left: 42.8cqw; top: 1.7cqw;  width: 3.6cqw; height: 3.2cqw; }
.nav-overlay .z-hats    { left: 46.4cqw; top: 1.7cqw;  width: 3.5cqw; height: 3.2cqw; }
.nav-overlay .z-story   { left: 49.9cqw; top: 1.7cqw;  width: 6.2cqw; height: 3.2cqw; }
.nav-overlay .z-contact { left: 56.1cqw; top: 1.7cqw;  width: 5.4cqw; height: 3.2cqw; }

footer {
  max-width: 1440px;
  margin: 0 auto;
  padding: 26px 16px 34px;
  text-align: center;
  font-size: 13px;
  color: #8a7f68;
  letter-spacing: 0.04em;
}
footer b { color: #6d6248; }