/* Feast of Africa, shared foundations.
   Holds only what the design system allows outside inline styles: the
   self-hosted face, the body reset, the shared keyframes, the image-slot
   surface and the nav / footer responsive overrides. Every other style on
   the site is inline on the element it belongs to. */

@font-face { font-family:'Neue Montreal'; font-style:normal; font-weight:400; font-display:swap;
  src:url("../assets/fonts/neue-montreal-400.woff2") format("woff2"); }
@font-face { font-family:'Neue Montreal'; font-style:normal; font-weight:500; font-display:swap;
  src:url("../assets/fonts/neue-montreal-500.woff2") format("woff2"); }
@font-face { font-family:'Neue Montreal'; font-style:normal; font-weight:600; font-display:swap;
  src:url("../assets/fonts/neue-montreal-700.woff2") format("woff2"); }
@font-face { font-family:'Neue Montreal'; font-style:normal; font-weight:700; font-display:swap;
  src:url("../assets/fonts/neue-montreal-700.woff2") format("woff2"); }

html { scroll-behavior:smooth; }
body { margin:0; background:#0B0B0B; color:#FFFFFF;
  font-family:'Neue Montreal','Helvetica Neue',Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; }
* { box-sizing:border-box; }
a { color:#ED223A; text-decoration:none; }
a:hover { color:#DB7A28; }
::selection { background:#ED223A; color:#fff; }
img { max-width:100%; }
input, select, textarea, button { font-family:inherit; }
::placeholder { color:rgba(255,255,255,.34); }
:focus-visible { outline:2px solid #ED223A; outline-offset:3px; }

.skip-link { position:fixed; left:0; top:0; z-index:400; transform:translateY(-120%);
  background:#ED223A; color:#fff; padding:14px 22px; border-radius:0 0 12px 0;
  font-size:14px; font-weight:600; transition:transform .3s cubic-bezier(.16,1,.3,1); }
.skip-link:focus { transform:translateY(0); color:#fff; }

@keyframes foaDrift { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }

/* Image surface. Every photograph on the site sits in one of these: it fills
   the wrapper that owns the radius and aspect ratio, exactly as the design
   calls for, and falls back to the art direction note while the shot is
   still being commissioned. */
[data-slot] { display:block; position:relative; width:100%; height:100%;
  aspect-ratio:3/2; overflow:hidden; background:#121212; }
[data-slot] > img { position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; border:0; }
[data-slot][data-empty] {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.022) 0 1px, transparent 1px 11px),
    #131313;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
}
[data-slot][data-empty]::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:url("../assets/brandmark-mono.webp") center 56% / min(30%, 118px) no-repeat;
  opacity:.07;
}
[data-slot] .slot-note {
  position:absolute; left:0; right:0; top:0; padding:18px 20px;
  display:flex; flex-direction:column; gap:8px; pointer-events:none;
  font-size:13px; line-height:1.45; color:rgba(255,255,255,.5);
  text-wrap:pretty; max-width:44ch;
}
[data-slot] .slot-note b {
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:500; color:#DB7A28;
}

/* Nav and footer responsive behaviour, shared by every page. */
@media (max-width: 1024px) {
  [data-nav-side] { display:none !important; }
  [data-burger] { display:flex !important; }
  [data-menu-art] { display:none !important; }
  [data-menu-body] { grid-template-columns:1fr !important; overflow-y:auto !important; align-items:flex-start !important; }
  [data-nav] { grid-template-columns:auto 1fr !important; padding-left:18px !important; padding-right:18px !important; }
  [data-nav-logo] { grid-column:1/2 !important; justify-self:start !important; height:42px; }
  [data-logo-img] { height:42px !important; transform-origin:top left !important; }
  [data-nav-actions] { grid-column:2/3 !important; }
  [data-nav-cta] { display:none !important; }
  [data-menu-head] { grid-template-columns:1fr auto !important; }
  [data-menu-logo] { display:none !important; }
  [data-menu-foot] { flex-direction:column !important; align-items:flex-start !important; gap:12px !important; }

  [data-sticky-bar] { display:flex !important; }
  [data-footcols] { grid-template-columns:1fr !important; gap:0 !important; }
  [data-fcol] { border-top:1px solid rgba(255,255,255,.09); padding:16px 0 4px; gap:0 !important; }
  [data-fhead] { cursor:pointer !important; font-size:13px !important; margin-bottom:0 !important; padding:14px 0 !important; min-height:44px; }
  [data-fplus] { display:block !important; }
  [data-foot] { padding-left:22px !important; padding-right:22px !important; padding-bottom:96px !important; }

  [data-slot] .slot-note { font-size:11.5px; padding:13px 14px; }
}
@media (max-width: 620px) {
  [data-menu] { padding-left:18px !important; padding-right:18px !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after {
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}