@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500&family=Inter:wght@300;400&display=swap');

:root {
  --ivory: #c6aa92;
  --ivory-soft: #aa9b91;
  --black: #040404;
  --red: #9b1218;
  --red-dark: #5a0609;
  --line: rgba(198, 170, 146, .34);
  --display: 'Cinzel', 'Times New Roman', serif;
  --sans: 'Inter', Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; margin: 0; background: var(--black); }
body { overflow-x: hidden; color: var(--ivory); }
a { color: inherit; }

.site-shell {
  position: relative;
  isolation: isolate;
  width: min(100%, 905px);
  min-height: min(141.44vw, 1280px);
  margin-inline: auto;
  overflow: hidden;
  background: var(--black);
}

.site-header {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 25px 50px 0 14px;
}
.brand {
  display: grid;
  width: 290px;
  height: 88px;
  grid-template-columns: 88px 1fr;
  align-items: center;
  text-decoration: none;
}
.brand-symbol { display: block; width: 78px; height: 77px; object-fit: contain; }
.brand-type { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; }
.brand-type strong {
  display: flex;
  width: 188px;
  flex-direction: column;
  color: var(--ivory);
  font-family: var(--display);
  font-weight: 500;
  text-transform: uppercase;
  white-space: nowrap;
}
.brand-word { display: flex; width: 188px; align-items: baseline; justify-content: space-between; line-height: 1; }
.brand-word i { font-style: normal; }
.brand-word-empire { font-size: 25px; }
.brand-word-operating { margin-top: 4px; font-size: 16px; }
.site-nav {
  display: flex;
  gap: 68px;
  margin-top: 22px;
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.site-nav a { position: relative; min-height: 34px; padding: 7px 0; text-decoration: none; }
.site-nav a::after {
  position: absolute; right: 0; bottom: 0; left: 0; height: 1px;
  content: ''; background: currentColor; opacity: 0; transform: scaleX(.3);
  transition: opacity 160ms ease, transform 160ms ease;
}
.site-nav a:hover::after, .site-nav a:focus-visible::after, .site-nav a[aria-current='page']::after {
  opacity: .72; transform: scaleX(1);
}

.column-art {
  position: absolute;
  z-index: -1;
  top: 104px;
  right: 0;
  width: 37.1%;
  height: 1126px;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--black) 0%, rgba(4,4,4,.48) 8%, transparent 26%),
    url('assets/roman-column.jpg') right top / 100% 100% no-repeat;
}

.page-main { position: relative; z-index: 1; }
.about-upper { position: relative; isolation: isolate; overflow: hidden; padding-top: 107px; }
.about-page .column-art { z-index: -1; top: -9px; bottom: 0; height: auto; }
.about-hero { width: 575px; margin: 0 0 0 70px; }
.display-title {
  margin: 0;
  font-family: var(--display);
  font-size: 47px;
  font-weight: 400;
  letter-spacing: .025em;
  line-height: 1.51;
  text-transform: uppercase;
}
.display-title span { display: block; white-space: nowrap; }
.display-title .accent { color: var(--red); }

.ornament { display: flex; align-items: center; gap: 9px; width: 160px; }
.ornament::before, .ornament::after { height: 1px; flex: 1; content: ''; background: rgba(198,170,146,.62); }
.ornament span { width: 7px; height: 7px; border: 1px solid rgba(198,170,146,.82); transform: rotate(45deg); }
.hero-ornament { margin: 32px 0 0 70px; }

.about-copy {
  margin: 40px 0 0 70px;
  color: var(--ivory-soft);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 300;
  line-height: 2.02;
}
.about-copy span { display: block; }
.section-rule { width: 100%; height: 1px; margin: 176px 0 0; border: 0; background: var(--line); }

.consultation { width: 610px; margin: 34px auto 0; text-align: center; }
.consultation h2 {
  margin: 0; color: var(--red); font-family: var(--display); font-size: 38px; font-weight: 400;
  letter-spacing: .03em; line-height: 1.3; text-transform: uppercase;
}
.consultation .ornament { width: 110px; margin: 19px auto 22px; }
.consultation-copy {
  width: 480px; margin: 0 auto; color: var(--ivory-soft); font-family: var(--sans);
  font-size: 14px; font-weight: 300; line-height: 1.9;
}
.consultation-copy span { display: block; }
.cta {
  display: grid; width: 374px; min-height: 63px; grid-template-columns: 1fr auto; align-items: center;
  margin: 26px auto 0; padding: 0 27px 0 39px; border: 1px solid #a1181c; border-radius: 2px;
  background: linear-gradient(90deg, #6d0b0f, #92171b 48%, #661014);
  color: var(--ivory); font-family: var(--sans); font-size: 13px; font-weight: 400;
  letter-spacing: .14em; text-decoration: none; text-transform: uppercase;
  transition: filter 160ms ease, transform 160ms ease;
}
.cta::after { content: '→'; font-size: 20px; letter-spacing: 0; }
.cta:hover, .cta:focus-visible { filter: brightness(1.18); transform: translateY(-1px); }
.bottom-mark {
  position: relative; width: 100%; height: 32px; margin-top: 25px; border-top: 1px solid var(--line);
}
.bottom-mark::before {
  position: absolute; top: -14px; left: 50%; width: 66px; height: 62px; content: '';
  background: var(--black) url('assets/laurel-divider.jpg') center / 66px 62px no-repeat;
  transform: translateX(-50%);
}

.contact-page .site-shell { min-height: 900px; }
.contact-page .column-art { height: 747px; clip-path: inset(9px 0 0); }
.contact-main { width: 575px; margin: 107px 0 0 70px; text-align: left; }
.contact-main .display-title { font-size: 47px; line-height: 1.51; letter-spacing: .025em; }
.contact-main .ornament { width: 160px; margin: 32px 0 0; }
.contact-email {
  display: inline-block; margin-top: 38px; color: #b42128; font-family: Georgia, 'Times New Roman', serif;
  font-size: 36px; letter-spacing: .005em; text-decoration: none;
  transition: color 160ms ease, transform 160ms ease;
}
.contact-email:hover, .contact-email:focus-visible { color: #d33a40; transform: translateY(-1px); }
.contact-bottom { position: absolute; top: 850px; right: 0; bottom: auto; left: 0; margin: 0; }

:focus-visible { outline: 2px solid #c6aa92; outline-offset: 4px; }

@media (max-width: 700px) {
  .site-shell { min-height: 100svh; padding-bottom: 42px; }
  .site-header { align-items: flex-start; padding: 17px 20px 0 14px; }
  .brand { width: 190px; height: 58px; grid-template-columns: 58px 1fr; }
  .brand-symbol { width: 52px; height: 51px; }
  .brand-type strong, .brand-word { width: 125px; }
  .brand-word-empire { font-size: 17px; }
  .brand-word-operating { margin-top: 3px; font-size: 10.5px; }
  .site-nav { gap: 18px; margin-top: 14px; font-size: 10px; }
  .site-nav a { min-height: 44px; display: grid; place-items: start center; }
  .column-art { top: 88px; width: 53%; height: calc(100% - 88px); opacity: .72; }
  .column-art::after {
    position: absolute; inset: 0; content: ''; background: linear-gradient(90deg, var(--black), transparent 66%);
  }
  .about-upper { padding-top: 65px; }
  .about-page .column-art { top: 17px; bottom: 0; height: auto; }
  .about-hero { width: auto; margin: 0 20px; }
  .display-title { font-size: clamp(29px, 9.1vw, 44px); line-height: 1.35; letter-spacing: .01em; }
  .display-title span { white-space: normal; }
  .hero-ornament { margin: 27px 0 0 22px; }
  .about-copy { max-width: 92%; margin: 31px 22px 0; font-size: 13px; line-height: 1.78; }
  .section-rule { margin-top: 68px; }
  .consultation { width: auto; margin: 35px 20px 0; }
  .consultation h2 { font-size: 28px; }
  .consultation-copy { width: auto; max-width: 355px; font-size: 12px; line-height: 1.7; }
  .consultation-copy span { display: inline; }
  .cta { width: 100%; max-width: 374px; min-height: 58px; padding-left: 24px; font-size: 11px; }
  .bottom-mark { margin-top: 24px; }
  .contact-page .column-art { top: 92px; height: 443px; clip-path: none; }
  .contact-page .site-shell { min-height: 585px; }
  .contact-main { width: auto; margin: 65px 20px 0; text-align: left; }
  .contact-main .display-title { font-size: clamp(29px, 9.1vw, 44px); line-height: 1.35; letter-spacing: .01em; }
  .contact-main .ornament { margin: 27px 0 0; }
  .contact-email { margin-top: 42px; font-size: clamp(20px, 6.7vw, 30px); overflow-wrap: anywhere; }
  .contact-bottom { top: 534px; bottom: auto; }
}

@media (max-width: 380px) {
  .brand { width: 174px; grid-template-columns: 54px 1fr; }
  .brand-symbol { width: 48px; height: 47px; }
  .brand-type strong, .brand-word { width: 116px; }
  .brand-word-empire { font-size: 15.5px; }
  .brand-word-operating { font-size: 9.7px; }
  .site-nav { gap: 12px; font-size: 9px; }
  .display-title { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}