@font-face {
  font-family: "Ugly Dave";
  src: url("media/ugly-dave.otf") format("opentype");
  font-display: swap;
}
:root { color-scheme: light; background: #f8f5ec; color: #26312a; }
* { box-sizing: border-box; }
body { margin: 0; font: 1rem/1.4 system-ui, sans-serif; }
main { width: min(112rem, calc(100% - 1.5rem)); margin: auto; padding: clamp(2rem, 6vh, 5rem) 0; }
header { margin-bottom: clamp(1.5rem, 5vh, 3rem); text-align: center; }
header img, .intro img { object-fit: contain; }
h1 { margin: 0; font: clamp(2.5rem, 7vw, 5rem)/1 "Ugly Dave", Georgia, serif; text-transform: uppercase; }
header p { margin: .8rem 0 0; color: #586355; font-size: .9rem; }
nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; }
nav a {
  position: relative; isolation: isolate; display: grid; place-items: center;
  overflow: hidden; min-height: clamp(25rem,72svh,52rem); padding: 1rem;
  text-align: center; text-decoration: none;
}
nav img, nav a::before { position: absolute; inset: 0; width: 100%; height: 100%; }
nav img { z-index: -2; object-fit: cover; transition: filter .25s ease, transform .25s ease; }
nav a::before { content: ""; z-index: -1; pointer-events: none; }
.production { background: #101716; color: #fff; }
.production::before { background: #070f13a6; }
.weddings { background: #eee9da; color: #26312a; }
.weddings::before { background: #fff4d93d; }
nav a div { padding: 1.05rem clamp(1rem,3vw,2rem); border-radius: .25rem; }
.production div { background: #101719e8; border: 1px solid #ffffff8a; }
.weddings div { background: #fffaf0f5; border: 1px solid #e5d8bd; }
nav a:hover img, nav a:focus-visible img { filter: blur(3px); transform: scale(1.035); }
nav a:focus-visible { outline: 3px solid #475d48; outline-offset: 3px; }
h2 { margin: 0; font: clamp(1.65rem,3.8vw,3.1rem)/1 Georgia,serif; }
nav p { margin: .5rem 0 0; font-size: .9rem; }
.intro { position: fixed; inset: 0; z-index: 1; display: grid; place-items: center; background: #f8f5ec; pointer-events: none; animation: reveal .85s ease both; }
.intro img { animation: settle .85s ease both; }
@keyframes reveal { 65% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@keyframes settle { from { opacity: 0; transform: translateY(.6rem) scale(.92); } 55% { opacity: 1; transform: none; } }
@media (max-width: 600px) { nav { grid-template-columns: 1fr; } nav a { min-height: 23rem; } }
@media (prefers-reduced-motion: reduce) { .intro { display: none; } nav img { transition: none; } }