:root {
  color-scheme: light;
  --ink: #073c31;
  --muted: #526b67;
  --green: #087f5b;
  --blue: #1e4fd0;
  --paper: #f8f8f3;
  --line: #dce4de;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { margin: 0; background: var(--paper); color: var(--ink); line-height: 1.5; overflow-x: hidden; }
a { color: inherit; }
.site-header { border-bottom: 1px solid var(--line); padding: 1rem clamp(1.25rem, 5vw, 5rem); background: rgba(248,248,243,.94); position: sticky; top: 0; z-index: 2; backdrop-filter: blur(12px); }
.brand { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; font-weight: 750; letter-spacing: -.02em; }
.brand img { width: 3.5rem; height: 2rem; object-fit: cover; border-radius: .35rem; }
.hero, .gallery { width: min(1120px, calc(100% - 2.5rem)); margin: auto; }
.hero { padding: clamp(4.5rem, 13vw, 10rem) 0 clamp(4rem, 9vw, 7rem); }
.eyebrow { margin: 0 0 1rem; color: var(--green); font-size: .75rem; font-weight: 800; letter-spacing: .2em; }
.hero h1 { max-width: 850px; margin: 0; font-size: clamp(3.6rem, 10vw, 8.8rem); line-height: .92; letter-spacing: -.08em; }
.hero h1 em { color: var(--blue); font-family: Georgia, serif; font-weight: 400; letter-spacing: -.07em; }
.hero-copy { max-width: 34rem; color: var(--muted); font-size: clamp(1rem, 2vw, 1.3rem); margin: 2rem 0; }
.cta { display: inline-flex; align-items: center; gap: 1rem; background: var(--ink); color: #fff; text-decoration: none; padding: 1rem 1.25rem; border-radius: .35rem; font-weight: 750; transition: transform .2s, background .2s; }
.cta:hover, .cta:focus-visible { background: var(--blue); transform: translateY(-2px); }
.gallery { padding: 1rem 0 6rem; }
.section-heading { display: flex; justify-content: space-between; align-items: end; border-top: 1px solid var(--line); padding-top: 1.5rem; margin-bottom: 1.5rem; }
.section-heading h2 { font: 400 clamp(2rem, 4vw, 3.75rem)/1 Georgia, serif; margin: 0; letter-spacing: -.05em; }
.marquee { overflow: hidden; margin-inline: calc(50% - 50vw); padding: 1.25rem max(1rem, calc(50vw - 560px)) 1.5rem; }
.marquee-track { display: flex; width: max-content; gap: clamp(.75rem, 1.5vw, 1.25rem); animation: gallery-marquee 42s linear infinite; will-change: transform; transform: translate3d(0, 0, 0); }
.gallery figure { display: flex; flex-direction: column; flex: 0 0 clamp(18rem, 34vw, 26rem); min-width: 0; margin: 0; overflow: visible; background: transparent; border-radius: .75rem; }
.gallery img { display: block; width: 100%; height: clamp(18rem, 30vw, 24rem); object-fit: contain; object-position: center; border-radius: .75rem; }
.gallery figcaption { position: static; color: var(--ink); font-weight: 800; text-shadow: none; background: transparent; padding: .75rem .25rem 0; line-height: 1.25; }
footer { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--line); padding: 1.5rem clamp(1.25rem, 5vw, 5rem); color: var(--muted); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }
@keyframes gallery-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(-1 * var(--marquee-distance)), 0, 0); } }
@media (max-width: 700px) { .hero, .gallery { width: min(100% - 2rem, 520px); } .hero { padding-top: 4rem; } .marquee { margin-inline: calc(50% - 50vw); padding-inline: .75rem; } .marquee-track { gap: .75rem; animation-duration: 46s; } .gallery figure { flex-basis: min(86vw, 24rem); } .gallery img { height: min(110vw, 30rem); } .section-heading { display: block; } .section-heading h2 { margin-top: .5rem; } footer { display: block; } footer span { display: block; margin: .35rem 0; } .brand span { font-size: .9rem; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .marquee-track { animation: none; transform: none; } }