/* s-shell.css : footer (#contact) additions. Nav lives in base.css. */
.home-footer { grid-template-rows: auto auto 1fr auto; }
.home-footer__logo { display: none; }

/* [COPY EMAIL] -> [COPIED] */
.home-footer__copy { text-transform: uppercase; }
.home-footer__copy::before { content: "["; }
.home-footer__copy::after { content: "]"; }

/* CTA hover: underline sweep under the link, arrow nudge is in home.css */
.home-footer__cta a { position: relative; }
.home-footer__cta a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.02em; height: 0.045em; background: currentColor;
  transform: scaleX(0); transform-origin: right center;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.home-footer__cta:hover a::after, .home-footer__cta a:focus-visible::after { transform: scaleX(1); transform-origin: left center; }

/* giant wordmark: fitted to width by js/s-footer.js, rises as the footer enters */
.home-footer__word {
  grid-column: 1 / -1; grid-row: 4;
  margin: clamp(32px, 6vh, 72px) 0 0;
  overflow: hidden;
  line-height: 0.8;
  font-weight: 500;
  letter-spacing: -0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  font-size: 13vw;
  color: var(--white);
  user-select: none;
}
.home-footer__word-in { display: block; padding-top: 0.06em; will-change: transform; }
@media (max-width: 767px) { .home-footer__word { margin-top: 40px; } }
@media (prefers-reduced-motion: reduce) { .home-footer__cta a::after { transition: none; } }

/* ======================================================================
   NAV: solid surface bar (replaces the floating text overlay)
   Light bar by default, black bar via html.nav-on-dark. Desktop >= 1024px,
   compact [MENU] bar below.
   ====================================================================== */
.site-header { --nav-bg: var(--white); --nav-line: rgba(0, 0, 0, 0.14); height: var(--header-h); }
html.nav-on-dark .site-header, html.menu-open .site-header { --nav-bg: var(--black); --nav-line: rgba(255, 255, 255, 0.22); }
.site-header::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0;
  height: calc(var(--header-h) + var(--sai-t));
  background: var(--nav-bg); border-bottom: 1px solid var(--nav-line);
  transition: background-color 0.25s ease, border-color 0.25s ease;
  z-index: 0; pointer-events: none;
}
.site-header > * { z-index: 1; }

/* mobile / tablet compact bar */
.site-bar {
  z-index: 3; align-items: center;
  height: calc(var(--header-h) + var(--sai-t));
  padding: var(--sai-t) calc(var(--gutter) + var(--sai-r)) 0 calc(var(--gutter) + var(--sai-l));
}
.site-bar .site-header__toggle, .site-bar .site-start { min-height: 44px; display: inline-flex; align-items: center; font-size: 14px; }
.site-bar .site-header__toggle::before, .site-bar .site-start::before { inset: 0 -8px; }
.site-menu { padding: calc(var(--header-h) + var(--sai-t) + 24px) var(--gutter) calc(24px + var(--sai-b)); z-index: 2; height: 100dvh; }
html.menu-open .site-bar { z-index: 3; }

/* desktop single-row bar */
.site-left, .site-right { top: 0; height: var(--header-h); align-items: center; }
.site-left { gap: clamp(20px, 2.4vw, 40px); left: var(--gutter); }
.site-right { right: var(--gutter); gap: clamp(16px, 1.8vw, 28px); }
.site-brand { margin: 0; font-size: 15px; letter-spacing: -0.01em; }
.site-nav__list, .site-aside { display: flex; flex-wrap: nowrap; column-gap: clamp(14px, 1.8vw, 28px); align-items: center; }
.site-nav__list > li, .site-aside > li { display: flex; grid-column: auto; gap: 6px; align-items: baseline; white-space: nowrap; }
.site-nav__list > li { flex-direction: row; }
.site-mark { opacity: 0.6; font-size: 11px; }
.site-aside > li:nth-child(1) { order: 5; }
.site-aside > li:nth-child(1) .site-mark, .site-aside > li:nth-child(4) .site-mark { display: none; }
.site-aside > li:nth-child(3) { display: none; } /* month */
.site-aside > li:nth-child(5) .site-mark { display: none; }
.site-nav__link[aria-current="page"]::after, .site-nav__link[aria-current="location"]::after { bottom: -4px; }
@media (min-width: 1024px) and (max-width: 1279px) {
  .site-aside > li:nth-child(2), .site-aside > li:nth-child(5) { display: none; }
  .site-mark { display: none; }
}

/* ======================================================================
   FOOTER responsive (390 / 820 / 1440)
   ====================================================================== */
.home-footer { padding-inline: calc(var(--gutter) + var(--sai-l)) calc(var(--gutter) + var(--sai-r)); padding-bottom: calc(clamp(40px, 9.8vh, 88px) + var(--sai-b)); }
.home-footer__legal .home-footer__copy { min-height: 44px; padding-inline: 4px; }
.home-footer a, .home-footer button { min-height: 44px; }
.home-footer__nav a, .home-footer__social a, .home-footer__cta a, .home-footer__mail a { display: inline-flex; align-items: center; }
.home-footer__nav a { min-height: 0; }
@media (max-width: 1023px) {
  .home-footer { min-height: 0; display: flex; flex-direction: column; padding-top: 72px; }
  .home-footer__top { display: block; }
  .home-footer__cta { font-size: clamp(34px, 9vw, 72px); white-space: normal; flex-wrap: wrap; }
  .home-footer__mail { margin-top: 20px; font-size: clamp(18px, 4.6vw, 36px); white-space: normal; overflow-wrap: anywhere; }
  .home-footer__year { margin-top: 56px; }
  .home-footer__legal { margin-top: 8px; flex-wrap: wrap; align-items: center; }
  .home-footer__nav { margin-top: 40px; }
  .home-footer__nav ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .home-footer__nav a { font-size: clamp(30px, 7vw, 48px); }
  .home-footer__social { margin-top: 40px; }
  .home-footer__word { margin-top: 48px; }
}

/* ======================================================================
   NAV HIDE: the bar slides away over full-screen sections ([data-nav-hide]).
   Layout is untouched (header is position:fixed). Keyboard focus reveals it.
   ====================================================================== */
.site-header { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s; }
html.nav-hidden:not(.nav-focus):not(.menu-open) .site-header {
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.3s;
}
@media (prefers-reduced-motion: reduce) {
  .site-header, html.nav-hidden:not(.nav-focus):not(.menu-open) .site-header { transition: none; }
}

/* footer photo: sits under the year in the left column, square-edged, same grid as the rest */
@media (min-width: 1024px) {
  .home-footer__year { margin-top: 0; }
  .home-footer__photo { grid-column: 1; grid-row: 2; align-self: start; justify-self: start; margin: 28px 0 0; width: min(100%, 260px); }
  .home-footer__photo img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 28%; background: #111; }
  .home-footer__photo figcaption { margin-top: 8px; color: rgba(255, 255, 255, 0.55); text-transform: none; }
}
@media (max-width: 1023px) {
  .home-footer__photo { order: 5; width: 100%; max-width: 480px; margin: 40px 0 0; }
  .home-footer__photo img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 28%; }
  .home-footer__photo figcaption { margin-top: 8px; color: rgba(255, 255, 255, 0.55); text-transform: none; }
}

/* mobile menu: centred stack, readable CTAs */
.site-menu {
  justify-content: center; align-items: center; text-align: center;
  padding: calc(var(--header-h) + var(--sai-t) + 16px) var(--gutter) calc(24px + var(--sai-b));
}
.site-menu__list { width: 100%; margin-bottom: 28px; }
.site-menu__list li { width: 100%; justify-content: center; }
html body .site-menu a.site-menu__cta {
  width: min(100%, 420px); box-sizing: border-box; background: var(--blue); color: #fff; border: 0;
}
html body .site-menu a.site-menu__cta .site-dot { background: #fff; }
html body .site-menu a.site-menu__cta--cv { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.5); margin-bottom: 8px; }
.site-menu__cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
