:root {
  color-scheme: dark;
  --article-navy: #071322;
  --article-navy-soft: #0b1b2c;
  --article-gold: #b89b5d;
  --article-gold-light: #dcc58f;
  --article-cream: #fbfaf7;
  --article-ink: #111d2b;
  --article-muted: #65727c;
}

html { scroll-behavior: smooth; }

body.articles-modern {
  margin: 0;
  min-width: 320px;
  padding: 1.25rem;
  color: #e8e1d4;
  background: var(--article-navy);
  font-family: "EB Garamond", Garamond, Georgia, serif;
  font-size: 17px;
  line-height: 1.68;
}

body.articles-modern * { box-sizing: border-box; }
body.articles-modern button,
body.articles-modern a { font: inherit; }

.article-skip-link {
  position: fixed;
  left: 1rem;
  top: -5rem;
  z-index: 2000;
  padding: .7rem 1rem;
  color: var(--article-navy);
  background: var(--article-cream);
}
.article-skip-link:focus { top: 1rem; }

.article-page-frame {
  position: relative;
  max-width: 1040px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 0 1.5rem 3rem;
  border-left: 1px solid rgba(220,197,143,.09);
  border-right: 1px solid rgba(220,197,143,.09);
}

.article-utility {
  position: relative;
  min-height: 2.8rem;
  display: flex;
  align-items: center;
  gap: .65rem;
  color: #918d83;
  border-bottom: 1px solid rgba(220,197,143,.16);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: .84rem;
}

.article-menu-toggle,
.article-eye {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--article-gold-light);
  border: 0;
  background: transparent;
  cursor: pointer;
}
.article-menu-toggle {
  position: relative;
  display: grid;
  place-content: center;
  gap: .28rem;
  width: 2.6rem;
  height: 2.2rem;
}
.article-eye {
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(220,197,143,.30);
  border-radius: 50%;
  font-size: 1.05rem;
}
.article-menu-toggle span {
  position: static;
  display: block;
  width: 1.25rem;
  height: 1px;
  background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}
.article-menu-open .article-menu-toggle span:nth-child(1) { transform: translateY(.33rem) rotate(45deg); }
.article-menu-open .article-menu-toggle span:nth-child(2) { opacity: 0; }
.article-menu-open .article-menu-toggle span:nth-child(3) { transform: translateY(-.33rem) rotate(-45deg); }

.article-language-link {
  margin-left: auto;
  color: var(--article-gold-light) !important;
  text-underline-offset: .25em;
}

.article-wordmark {
  padding: 3.5rem 0 2.9rem;
  text-align: center;
}
.article-wordmark img {
  display: block;
  width: min(335px, 74vw);
  height: auto;
  margin: 0 auto;
  filter: brightness(1.02) sepia(.16) saturate(.66);
}
.article-wordmark::after {
  content: "◆  1933  ◆";
  display: block;
  margin-top: 1.15rem;
  color: var(--article-gold);
  font-size: .72rem;
  letter-spacing: .35em;
}

.article-toplinks {
  position: absolute;
  top: 4rem;
  left: 1.5rem;
  z-index: 1350;
  width: min(300px, calc(100% - 3rem));
  max-height: calc(100vh - 4.5rem);
  overflow: auto;
  margin: 0;
  padding: .4rem;
  color: #e8e1d4;
  border: 1px solid rgba(184,155,93,.32);
  border-radius: .25rem;
  background: rgba(7,19,34,.99);
  box-shadow: 0 1.2rem 3rem rgba(0,0,0,.42);
  text-align: left;
  line-height: 1.4;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-.6rem);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.article-menu-open .article-toplinks {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.article-toplinks ul { margin: 0; padding: 0; list-style: none; }
.article-toplinks li + li { border-top: 1px solid rgba(184,155,93,.16); }
.article-toplinks a,
.article-toplinks summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.75rem;
  padding: .65rem .9rem;
  color: #e5ddcc !important;
  text-decoration: none !important;
  cursor: pointer;
  letter-spacing: .035em;
}
.article-toplinks a::after { content: "›"; color: var(--article-gold); opacity: .75; }
.article-toplinks a:hover { color: #f3ead8 !important; background: rgba(184,155,93,.08); }
.article-toplinks summary { color: var(--article-gold-light); list-style: none; }
.article-toplinks summary::-webkit-details-marker { display: none; }
.article-toplinks summary::after { content: "⌄"; color: var(--article-gold); }
.article-services-menu[open] summary::after { transform: rotate(180deg); }
.article-service-submenu {
  margin: 0;
  padding: .35rem 0 .65rem .8rem !important;
  border-top: 1px solid rgba(184,155,93,.16);
  background: rgba(4,12,20,.44);
}
.article-service-submenu li { border: 0 !important; }
.article-service-submenu a {
  min-height: 2.25rem;
  padding: .42rem .9rem;
  color: #c8c1b4 !important;
  font-size: .94rem;
  letter-spacing: .01em;
}
.article-service-submenu a::after { content: none; }

body.articles-modern main.article-main {
  position: relative;
  width: 100%;
  max-width: 820px;
  margin: 1.25rem auto 2.6rem;
  padding: 0;
  color: var(--article-ink);
}

.article-content-seal {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  margin: 0 auto -1.45rem;
  border: 1px solid rgba(220,197,143,.42);
  border-radius: 50%;
  background: var(--article-navy);
}
.article-content-seal img { width: 82%; height: 82%; object-fit: contain; }

body.articles-modern .textbox-container {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.articles-modern .textbox {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(3.4rem, 7vw, 5.5rem) clamp(1.25rem, 6vw, 4.5rem) clamp(2.5rem, 6vw, 4.5rem) !important;
  color: var(--article-ink) !important;
  border: 1px solid rgba(184,155,93,.3) !important;
  border-top: 3px solid var(--article-gold) !important;
  border-radius: 0 !important;
  background: var(--article-cream) !important;
  box-shadow: 0 2rem 5rem rgba(0,0,0,.24) !important;
  font-size: clamp(1.02rem, 1.7vw, 1.13rem) !important;
  line-height: 1.72 !important;
  text-align: left;
}
body.articles-modern .textbox h1,
body.articles-modern .textbox h2,
body.articles-modern .textbox h3,
body.articles-modern .textbox .page-title,
body.articles-modern .textbox .content-h2 {
  color: var(--article-ink) !important;
  font-family: "EB Garamond", Georgia, serif !important;
  text-wrap: balance;
}
body.articles-modern .textbox h1,
body.articles-modern .textbox .page-title {
  margin-top: 0 !important;
  font-size: clamp(2rem, 4vw, 2.85rem) !important;
  line-height: 1.05 !important;
  text-align: center;
}
body.articles-modern .textbox h2,
body.articles-modern .textbox .content-h2 {
  margin: 2.2rem 0 .65rem !important;
  font-size: clamp(1.55rem, 3vw, 2.15rem) !important;
  line-height: 1.15 !important;
}
body.articles-modern .textbox p,
body.articles-modern .textbox li,
body.articles-modern .textbox .archive-meta,
body.articles-modern .textbox .archive-note { color: #2f3b45 !important; }
body.articles-modern .textbox a { color: #73591f !important; text-underline-offset: .2em; }
body.articles-modern .textbox img { max-width: 100%; height: auto; }
body.articles-modern .hero { overflow: hidden; border-radius: .2rem; }
body.articles-modern .hero .overlay { color: #fff !important; }

body.articles-modern .focus-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 1rem !important;
}
body.articles-modern .focus-button {
  min-height: 15rem;
  margin: 0 !important;
  border: 1px solid rgba(184,155,93,.46) !important;
  border-radius: 0 !important;
  background-color: var(--article-navy) !important;
}
body.articles-modern .focus-title,
body.articles-modern .focus-ingress { color: #fff !important; }
body.articles-modern .focus-ingress { opacity: .86; }

.article-contact {
  max-width: 900px;
  margin: 0 auto;
  padding: 2.1rem 2rem 1.7rem;
  border-top: 1px solid rgba(184,155,93,.3);
  border-bottom: 1px solid rgba(184,155,93,.3);
  text-align: center;
}
.article-locations {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 3rem;
}
.article-locations::after {
  content: "";
  position: absolute;
  top: 1rem;
  bottom: 1rem;
  left: 50%;
  width: 1px;
  background: rgba(184,155,93,.22);
}
.article-location { padding: 1rem; }
.article-location strong {
  color: var(--article-gold-light);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
}
.article-contact a { color: var(--article-gold-light); }
.article-contact-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 16.75rem;
  max-width: 100%;
  min-height: 2.7rem;
  margin-top: 1.4rem;
  padding: .55rem 1rem;
  color: #eee8dc !important;
  border: 1px solid rgba(184,155,93,.62);
  border-radius: 999px;
  background: #091420;
  text-decoration: none;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.article-contact-button:hover { color: #fff3d7 !important; background: #102238; }

.article-footer {
  margin: 2rem 0 5.5rem;
  color: #918d83;
  text-align: center;
  font-size: 17px !important;
  line-height: 1.68 !important;
  letter-spacing: .04em;
}
.article-footer a { color: var(--article-gold-light); }

.article-chat {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1300;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  color: #eee8dc !important;
  border: 1px solid rgba(184,155,93,.65);
  border-radius: 50%;
  background: #091420;
  box-shadow: 0 .7rem 2rem rgba(0,0,0,.32);
}
.article-chat svg { width: 1.35rem; height: 1.35rem; }

body.articles-modern .article-legacy-hidden { display: none !important; }

body.articles-modern.reading-mode {
  color-scheme: light;
  color: #10212b;
  background: #dcecf4;
}
.reading-mode .article-page-frame { border-color: rgba(17,59,80,.18); }
.reading-mode .article-utility { color: #253840; border-color: rgba(17,59,80,.28); }
.reading-mode .article-menu-toggle { color: #101820; }
.reading-mode .article-eye { color: #f5fbfd; border-color: #173f53; background: #173f53; }
.reading-mode .article-language-link,
.reading-mode .article-contact a,
.reading-mode .article-footer a { color: #003f66 !important; }
.reading-mode .article-wordmark img { filter: none; }
.reading-mode .article-wordmark::after,
.reading-mode .article-location strong { color: #173f53; }
.reading-mode .article-toplinks {
  color: #101820;
  border-color: rgba(17,59,80,.34);
  background: rgba(238,247,251,.99);
  box-shadow: 0 1.2rem 3rem rgba(20,58,76,.18);
}
.reading-mode .article-toplinks li + li,
.reading-mode .article-service-submenu { border-color: rgba(17,59,80,.18) !important; }
.reading-mode .article-toplinks a,
.reading-mode .article-services-menu summary,
.reading-mode .article-service-submenu a { color: #101820 !important; }
.reading-mode .article-toplinks a::after,
.reading-mode .article-services-menu summary::after { color: #315f76; }
.reading-mode .article-toplinks a:hover,
.reading-mode .article-service-submenu a:hover { color: #001f33 !important; background: rgba(49,95,118,.09); }
.reading-mode .article-service-submenu { background: rgba(205,229,239,.58); }
.reading-mode .article-contact { color: #10212b; border-color: rgba(17,59,80,.28); }
.reading-mode .article-footer { color: #314852; }

@media (max-width: 720px) {
  body.articles-modern { padding: .6rem; }
  .article-page-frame { width: 100%; padding: 0 .4rem 2rem; border: 0; }
  .article-utility { padding-left: 2.6rem; }
  .article-menu-toggle {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + .7rem);
    left: calc(env(safe-area-inset-left, 0px) + .7rem);
    z-index: 1900;
    width: 2.6rem;
    height: 2.6rem;
    border: 1px solid rgba(220,197,143,.22);
    border-radius: 50%;
    background: rgba(7,19,34,.88);
    box-shadow: 0 .45rem 1.3rem rgba(0,0,0,.24);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  .reading-mode .article-menu-toggle {
    color: #101820;
    border-color: rgba(17,59,80,.25);
    background: rgba(238,247,251,.94);
    box-shadow: 0 .45rem 1.3rem rgba(20,58,76,.16);
  }
  .article-toplinks {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 3.65rem);
    left: calc(env(safe-area-inset-left, 0px) + .7rem);
    width: min(300px, calc(100vw - 1.4rem));
    max-height: calc(100dvh - 4.5rem);
  }
  .article-wordmark { padding: 2.6rem 0 2.3rem; }
  body.articles-modern main.article-main { margin-top: 1rem; }
  body.articles-modern .textbox {
    padding: 3.2rem 1.1rem 2.2rem !important;
    font-size: 1rem !important;
  }
  body.articles-modern .textbox h1,
  body.articles-modern .textbox .page-title { font-size: clamp(1.85rem, 8vw, 2.35rem) !important; }
  body.articles-modern .focus-list { grid-template-columns: 1fr !important; }
  body.articles-modern .focus-button { min-height: 13rem; }
  .article-locations { grid-template-columns: 1fr; gap: .25rem; }
  .article-locations::after { display: none; }
  .article-location + .article-location { border-top: 1px solid rgba(184,155,93,.2); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .article-toplinks,
  .article-menu-toggle span { transition: none; }
}
