/* Dargentic site chrome: the black menu bar and the footer, shared by every page.
   Self-contained: uses its own --dc-* variables so page styles can't change it.
   Requires /fonts/fonts.css (for --f-ui). */
:root {
  --dc-m: clamp(20px, 6.25vw, 96px);   /* the one left margin, same as the homepage --m */
  --dc-red: #E3262B;
  --dc-ui: var(--f-ui, 'Geist', 'Helvetica Neue', Arial, sans-serif);
}

/* ─── Menu bar: slim, aligned to the margin, hides on scroll down ─── */
.masthead {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 60px;
  margin: 0; padding: 0; background: #111; color: #fff;
  transform: translateY(0); opacity: 1;
  transition: transform .45s cubic-bezier(.2,.7,.2,1), opacity .35s ease;
}
.masthead.is-hidden { transform: translateY(-100%); opacity: 0; pointer-events: none; }
.masthead:focus-within { transform: translateY(0); opacity: 1; pointer-events: auto; }
.masthead nav { height: 100%; margin: 0; padding: 0; }
.masthead ol { list-style: none; display: flex; height: 100%; align-items: stretch; margin: 0; padding: 0 var(--dc-m); gap: clamp(20px, 3vw, 48px); }
.masthead li { display: flex; margin: 0; padding: 0; }
.masthead li::before { content: none; }
.masthead a { display: flex; align-items: center; text-decoration: none; font-family: var(--dc-ui); font-size: 15px; font-weight: 450; line-height: 1; letter-spacing: normal; text-transform: none; color: #e9e9e9; background: none; border: 0; border-bottom: 2px solid transparent; padding: 2px 0 0; margin: 0; opacity: 1; }
.masthead a:hover, .masthead a:focus-visible { color: #fff; border-bottom-color: var(--dc-red); opacity: 1; }
.masthead a:focus-visible { outline: 2px solid var(--dc-red); outline-offset: -2px; }
.masthead li.first a { color: #fff; }
.masthead a[aria-current="page"] { color: #fff; border-bottom-color: var(--dc-red); }
.masthead .sm { display: none; }
.hover-zone { position: fixed; top: 0; left: 0; right: 0; height: 80px; z-index: 59; display: none; }
@media (hover: hover) and (pointer: fine) { .hover-zone { display: block; } }

/* Subpages: keep content clear of the fixed 60px bar */
body.has-bar { padding-top: 60px; }

/* ─── Footer ─── */
.foot { background: #111; color: #bdbdbd; font-family: var(--dc-ui); font-size: 14px; line-height: 1.55; text-align: left; margin: 0; padding: 40px var(--dc-m); border: 0; }
.foot a { color: #fff; text-decoration: none; border: 0; }
.foot a:hover { color: #ff6b6f; }
.foot-grid { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 16px 40px; }
.foot .c1 { margin: 0; }
.foot .c2 { display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: flex-end; margin: 0; }
.foot .foot-note { margin: 28px 0 0; padding: 18px 0 0; border-top: 1px solid #2a2a2a; font-size: 13px; line-height: 1.55; color: #8c8c8c; max-width: none; }
.foot .foot-note strong { color: #bdbdbd; font-weight: 500; }

@media (max-width: 700px) {
  .masthead ol { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 15px; }
  .masthead ol::-webkit-scrollbar { display: none; }
  .masthead li { flex: 0 0 auto; }
  .masthead .lg { display: none; } .masthead .sm { display: inline; }
  .masthead a { font-size: 13px; white-space: nowrap; }
  .foot-grid { flex-direction: column; }
  .foot .c2 { justify-content: flex-start; }
}
@media (max-width: 380px) { .masthead ol { gap: 11px; } .masthead a { font-size: 12.5px; } }
@media (prefers-reduced-motion: reduce) { .masthead { transition: none; } }

/* ─── "Also from Dargentic" strip, above the footer on every page ─── */
.dc-also { margin: 0; padding: 40px var(--dc-m); border: 0; background: #F7F3EE; font-family: var(--dc-ui); }
.dc-also .dc-also-l { margin: 0 0 18px; font-size: 12px; font-weight: 400; line-height: 1.4; letter-spacing: .2em; text-transform: uppercase; color: #767676; }
.dc-also ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 16px; }
.dc-also li { margin: 0; padding: 0; }
.dc-also a { display: block; text-decoration: none; border: 0; color: #111; }
.dc-also .t { display: block; font-size: 17px; font-weight: 500; line-height: 1.35; letter-spacing: normal; color: #111; }
.dc-also .d { display: block; margin-top: 2px; font-size: 14px; line-height: 1.4; color: #767676; }
.dc-also a:hover .t, .dc-also a:focus-visible .t { color: var(--dc-red); }
.dc-also .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 900px) { .dc-also ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .dc-also ul { grid-template-columns: 1fr; } }