/* Approved aligned header v09 / footer v06. Article styles and illustrations are unchanged. */
@font-face {
  font-family: 'Salon Identity';
  src: url('/assets/fonts/duck-eb-garamond.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root {
  --salon-navy: #0b102d;
  --salon-ivory: #f4efe5;
  --salon-muted: #d7d2c9;
  --salon-rule: #bba987;
  --salon-serif: 'Salon Identity', Georgia, 'Times New Roman', serif;
  --header-height: 78px;
  --header-offset: calc(var(--header-height) + env(safe-area-inset-top, 0px));
}
.page-story { --header-height: inherit; --header-offset: inherit; }
html, html.has-story { scroll-padding-top: calc(var(--header-offset) + 24px); }
.masthead.salon-header {
  background: var(--salon-navy);
  color: var(--salon-ivory);
  border: 0;
  font-family: var(--salon-serif);
  font-synthesis: none;
}
.salon-header-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  max-width: 1200px;
  min-height: 78px;
  padding: 12px 40px;
  margin-inline: auto;
}
.salon-brand {
  display: flex;
  align-items: center;
  gap: 17px;
  min-width: 0;
  margin-right: auto;
  color: inherit;
}
.salon-emblem {
  display: block;
  flex: 0 0 auto;
  width: 42px;
  height: auto;
  overflow: hidden;
}
.salon-brand-copy { display: block; min-width: 0; overflow-wrap: anywhere; }
.salon-brand-name {
  display: block;
  font: 400 1.75rem/1.2 var(--salon-serif);
  letter-spacing: -.015em;
}
.salon-menu, .salon-utility-home {
  display: flex;
  align-items: center;
  min-height: 44px;
  font: 400 1rem/1.3 var(--salon-serif);
}
.salon-languages { display: flex; flex: 0 0 auto; align-items: center; gap: 2px; }
.salon-language {
  display: grid;
  place-items: center;
  position: relative;
  min-width: 44px;
  min-height: 44px;
  color: var(--salon-ivory);
  font: 400 1rem/1.2 var(--salon-serif);
}
.salon-language-divider {
  flex: 0 0 auto;
  color: var(--salon-ivory);
  font: 400 1rem/1 var(--salon-serif);
}
.salon-language.selected {
  color: var(--salon-ivory);
  text-decoration: underline;
  text-decoration-color: var(--salon-rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
.salon-page-nav { display: none; }
.masthead.salon-header .reading-progress { display: none; }
.site-footer.salon-footer {
  display: block;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--salon-ivory);
  background: var(--salon-navy);
  text-align: left;
  font-family: var(--salon-serif);
  font-synthesis: none;
}
.site-footer.salon-footer::before { content: none; }
.salon-footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 36px;
  max-width: 1120px;
  margin-inline: auto;
  padding: 27px 0 calc(29px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--salon-rule);
}
.salon-institution { display: flex; align-items: center; gap: 18px; min-width: 0; }
.salon-institution > div { min-width: 0; overflow-wrap: anywhere; }
.salon-institution p { font: 400 .9375rem/1.35 var(--salon-serif); }
.salon-institution-link {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  color: var(--salon-muted);
  font: 400 .75rem/1.5 var(--sans);
}
.salon-footer-motto { max-width: 26ch; overflow-wrap: anywhere; font: 400 1.0625rem/1.35 var(--salon-serif); }
.salon-back-top {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 10px;
  min-height: 44px;
  font: 400 1rem/1.3 var(--salon-serif);
}
.salon-back-top span { font-family: Georgia, serif; font-size: 1.25rem; }
.salon-header :is(a,button):focus-visible,
.salon-footer :is(a,button):focus-visible { outline: 2px solid var(--salon-rule); outline-offset: 3px; }
.site-content:focus { outline: none; }
@media (max-width: 1199px) {
  .salon-footer-inner { margin-inline: 40px; }
}
@media (max-width: 760px) {
  :root { --header-height: 128px; }
  .salon-header-inner { display: block; position: relative; min-height: 128px; padding: 12px 16px 14px; }
  .salon-brand {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    align-items: center;
    gap: .5rem;
    margin: 0;
    min-width: 0;
  }
  .salon-brand .salon-emblem { width: 48px; margin: 0; }
  .salon-brand-copy { width: 100%; }
  .salon-brand-name { font-size: 1.625rem; line-height: 1.15; text-align: center; }
  .salon-title-line { display: block; }
  .salon-menu { display: none; }
  .salon-languages { position: absolute; inset-block-start: 6px; inset-inline-end: 12px; z-index: 1; }
  .salon-utility-home { justify-content: center; margin: 8px auto 0; font-size: .875rem; max-width: 6em; }
  .salon-page-nav { display: block; background: var(--paper); color: var(--ink); }
  .salon-page-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    max-width: 600px;
    min-height: 48px;
    padding: 2px 26px;
    margin-inline: auto;
    font: 400 1.0625rem/1.3 var(--salon-serif);
  }
  .salon-page-nav a { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; }
  .salon-page-nav .arrow { width: 20px; height: 20px; }
  .salon-page-number { color: #8c6b4b; font-size: .875rem; white-space: nowrap; }
  .salon-page-number span { padding-inline: 8px; }
  .salon-footer-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 20px;
    margin-inline: 22px;
    padding-block: 23px calc(23px + env(safe-area-inset-bottom, 0px));
  }
  .salon-institution { flex: 1 0 100%; gap: 14px; padding-bottom: 15px; border-bottom: 1px solid #bba98780; }
  .salon-institution .salon-emblem { width: 34px; }
  .salon-institution p { font-size: .875rem; }
  .salon-institution-link { font-size: .75rem; }
  .salon-footer-motto { flex: 1 1 160px; min-width: 0; font-size: .9375rem; }
  .salon-back-top { flex: 0 0 auto; margin-left: auto; gap: 8px; font-size: .875rem; }
}
@media (max-width: 359px) {
  .salon-page-nav-inner { padding-inline: 21px; }
  .salon-footer-inner { margin-inline: 18px; gap: 14px; }
  .salon-institution { gap: 12px; }
}
@media (hover: hover) and (pointer: fine) {
  .salon-header a:hover, .salon-footer a:hover { color: #fff; }
  .salon-institution-link:hover, .salon-back-top:hover { text-decoration: underline; text-underline-offset: 4px; }
}
@media print {
  .salon-header, .salon-footer, .salon-page-nav { display: none !important; }
}