:root {
  --cream: #f3eee4;
  --cream-deep: #e9e0d2;
  --ink: #2b241d;
  --muted: #74695d;
  --gold: #a58b5c;
  --line: rgba(43,36,29,.18);
  --paper: rgba(247,243,235,.92);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: 74px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4.5vw;
  background: rgba(243,238,228,.88);
  border-bottom: 1px solid rgba(43,36,29,.09);
  backdrop-filter: blur(10px);
}
.brand {
  text-decoration: none;
  font-size: 18px;
  letter-spacing: .22em;
  font-weight: 600;
  color: var(--muted);
}
.links { display: flex; align-items: center; gap: 28px; }
.links a {
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .78;
}
.links a:hover { opacity: 1; }

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: start;
  justify-items: center;
  padding: 148px 24px 40px;
  background-image:
    linear-gradient(rgba(24,18,13,.17), rgba(24,18,13,.25)),
    url("assets/hero-men.jpg");
  background-size: cover;
  background-position: center center;
}
.hero-inner {
  width: min(900px, 92vw);
  text-align: center;
  color: #f8f4ec;
  text-shadow: 0 1px 18px rgba(0,0,0,.24);
}
.hero h1 {
  margin: 0;
  font-size: clamp(58px, 10vw, 132px);
  font-weight: 400;
  letter-spacing: .16em;
  line-height: .95;
  padding-left: .16em;
  opacity: .85;
}
.sub {
  margin-top: 14px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
}
.rule {
  width: 72px;
  height: 1px;
  margin: 24px auto 20px;
  background: rgba(248,244,236,.7);
}
.tag {
  font-size: clamp(16px, 2vw, 23px);
  font-style: italic;
  letter-spacing: .035em;
}

.page {
  width: min(1180px, 91vw);
  margin: 0 auto;
  padding: 132px 0 76px;
  min-height: calc(100svh - 70px);
}
.page-title {
  margin: 0 0 46px;
  font-size: clamp(48px, 7vw, 88px);
  font-weight: 400;
  letter-spacing: .01em;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 26px;
  align-items: start;
}
.gallery figure { margin: 0; overflow: hidden; background: var(--cream-deep); }
.gallery img { display: block; width: 100%; height: 100%; object-fit: cover; }
.g1 { grid-column: 1 / span 8; height: 520px; }
.g2 { grid-column: 9 / span 4; height: 520px; }
.g3 { grid-column: 1 / span 5; height: 590px; }
.g4 { grid-column: 6 / span 7; height: 590px; }
.g5 { grid-column: 2 / span 10; height: 610px; margin-top: 18px !important; }

.contact {
  max-width: 620px;
  font-size: clamp(20px, 2.5vw, 28px);
  line-height: 1.55;
}
.contact p { margin: 0 0 26px; }
.contact a { text-decoration-thickness: 1px; text-underline-offset: 5px; }

.legal {
  max-width: 780px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.75;
}
.legal h2 {
  margin: 40px 0 10px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  font-weight: 400;
}
.legal p { margin: 0 0 18px; }
.legal a { text-underline-offset: 3px; }
.small { color: var(--muted); font-size: 13px; }

.footer {
  width: min(1180px, 91vw);
  margin: 0 auto;
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.footer a { text-decoration: none; }

@media (max-width: 760px) {
  .nav { height: auto; min-height: 68px; padding: 18px 5vw; align-items: flex-start; }
  .brand { font-size: 16px; }
  .links { gap: 10px 14px; flex-wrap: wrap; justify-content: flex-end; max-width: 70%; }
  .links a { font-size: 9px; }
  .hero { padding-top: 100px; background-position: 50% center; }
  .hero h1 { font-size: clamp(48px, 15vw, 80px); letter-spacing: .1em; padding-left: .1em; }
  .page { padding-top: 118px; width: 90vw; }
  .page-title { margin-bottom: 32px; }
  .gallery { grid-template-columns: 1fr; gap: 18px; }
  .g1,.g2,.g3,.g4,.g5 { grid-column: 1; height: auto; margin-top: 0 !important; }
  .gallery img { height: auto; aspect-ratio: 4/5; }
  .g1 img,.g5 img { aspect-ratio: 4/3; }
  .footer { padding: 22px 0; align-items: flex-start; flex-direction: column; }
}

/* --- additions: header tagline next to the logo, current-page state, readable prose width --- */
.nav-brand { display: flex; align-items: baseline; gap: 14px; }
.nav-tagline {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: .7;
}
.links a[aria-current="page"] { opacity: 1; }

.prose { max-width: 680px; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.7; }
.prose p { margin: 0 0 22px; }

@media (max-width: 760px) {
  .nav-tagline { display: none; }
}