/* Montecristo - showcase. Black, ivory and the grey of the lion; photos first. */
:root {
  --black: #0E0D0C;
  --ivory: #F5F1EA;
  --sand: #E9E2D6;
  --ink: #1B1916;
  --muted: #6B655D;
  --line: #DDD4C6;
  --gold: #A88A5C;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --wrap: 1320px;
  --gutter: 20px;
  --section: clamp(80px, 12vw, 160px);
}
@media (min-width: 720px) { :root { --gutter: 36px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--ivory); color: var(--ink); font: 400 1rem/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, ul, figure { margin: 0; }
ul { list-style: none; padding: 0; }
a { color: inherit; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 100; background: #fff; padding: 8px 12px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.kicker { font-size: .74rem; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.4rem, 5.6vw, 4.4rem); line-height: 1.02; letter-spacing: -0.01em; }
h2 em, .detail-claim em { font-style: italic; color: var(--gold); }

/* header: transparent on the hero, ivory when scrolling */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; color: var(--ink); background: rgba(245,241,234,.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); transition: background .35s, color .35s, border-color .35s; }
.site-header.on-hero:not(.scrolled) { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; color: #fff; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { width: 38px; height: 38px; filter: brightness(0) saturate(0) opacity(.85); transition: filter .35s; }
.site-header.on-hero:not(.scrolled) .brand img { filter: none; }
.brand span { font-family: var(--serif); font-size: 1.35rem; letter-spacing: .22em; text-transform: uppercase; }
/* hero: full screen photos, slow crossfade and zoom */
.hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden; background: var(--black); color: #fff; display: grid; place-items: center; text-align: center; }
.slides, .slide { position: absolute; inset: 0; }
.slide { opacity: 0; transition: opacity 1.8s ease; }
.slide.is-on { opacity: 1; }
.slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); }
.slide.is-on img { animation: kenburns 9s ease-out forwards; }
@keyframes kenburns { from { transform: scale(1.12); } to { transform: scale(1.02); } }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,13,12,.55) 0%, rgba(14,13,12,.15) 38%, rgba(14,13,12,.25) 62%, rgba(14,13,12,.75) 100%); }
.hero-content { position: relative; padding: 0 var(--gutter); }
.hero-content h1 img { width: min(70vw, 360px); margin: 0 auto; filter: brightness(0) invert(1); opacity: .96; animation: rise 1.6s ease both .2s; }
.hero-claim { margin-top: 18px; font-family: var(--serif); font-style: italic; font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: .04em; opacity: .9; animation: rise 1.6s ease both .6s; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.hero-scroll { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: grid; justify-items: center; gap: 10px; text-decoration: none; font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; opacity: .8; }
.hero-scroll i { width: 1px; height: 44px; background: linear-gradient(#fff, transparent); animation: drip 2.2s ease-in-out infinite; transform-origin: top; }
@keyframes drip { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .slide.is-on img, .hero-scroll i, .hero-content h1 img, .hero-claim { animation: none; } }

/* sold out message */
.sold { padding: var(--section) 0; text-align: center; }
.sold-inner { max-width: 900px; }
.sold h2 { font-size: clamp(2.8rem, 7.4vw, 5.6rem); }
.sold-thanks { margin-top: 30px; font-family: var(--serif); font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-style: italic; color: var(--muted); }
.sold-note { margin-top: 42px; display: inline-block; padding-top: 18px; border-top: 1px solid var(--line); font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }

/* gallery */
.gallery { padding: 0 0 var(--section); }
.masonry { columns: 2; column-gap: 10px; }
.masonry figure { break-inside: avoid; margin-bottom: 10px; overflow: hidden; background: var(--sand); }
.masonry img { width: 100%; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.masonry figure:hover img { transform: scale(1.035); }
@media (min-width: 900px) { .masonry { columns: 3; column-gap: 14px; } .masonry figure { margin-bottom: 14px; } }
/* full bleed detail */
.detail { position: relative; height: clamp(420px, 80vh, 860px); overflow: hidden; background: var(--black); }
.detail-img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.detail-claim { position: absolute; left: 0; right: 0; bottom: clamp(28px, 6vw, 72px); text-align: center; color: #fff; font-family: var(--serif); font-size: clamp(2.6rem, 8vw, 6.4rem); line-height: 1; text-shadow: 0 2px 30px rgba(0,0,0,.4); pointer-events: none; }
.detail-claim em { color: #E7D3B0; }

/* footer */
.site-footer { background: var(--black); color: #B9B2A7; padding: clamp(56px, 8vw, 96px) 0 28px; font-size: .88rem; }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: #fff; }
.footer-top { display: grid; gap: 44px; padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,.12); }
.footer-about { display: grid; gap: 14px; justify-items: start; align-content: start; }
.footer-logo { width: 150px; filter: brightness(0) invert(1); opacity: .9; }
.footer-claim { font-family: var(--serif); font-style: italic; font-size: 1.6rem; color: #fff; }
.footer-col { display: grid; gap: 8px; align-content: start; justify-items: start; }
.footer-col a { color: #A69F94; font-size: .86rem; }
.footer-named { display: grid; gap: 1px; }
.footer-named strong { color: #fff; font-weight: 500; }
.footer-named span { font-size: .76rem; color: #8A8378; }
.footer-legal { margin-top: 24px; font-size: .78rem; color: #8A8378; }
.footer-legal span { white-space: nowrap; }
@media (min-width: 900px) { .footer-top { grid-template-columns: 1fr auto; align-items: end; } }

/* privacy page */
.page-doc .site-header { position: sticky; }
.doc { padding: clamp(48px, 7vw, 96px) 0 var(--section); }
.doc .wrap { max-width: 780px; }
.doc h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.6rem, 6vw, 4rem); line-height: 1.05; }
.doc h2 { font-family: var(--serif); font-size: 1.7rem; margin-top: 40px; }
.doc p { margin-top: 12px; color: var(--muted); }

/* reveal */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s ease, transform .9s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }
/* gallery: six equal frames instead of free columns */
.masonry { columns: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.masonry figure { margin: 0; aspect-ratio: 4 / 5; }
.masonry img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .masonry { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
/* detail: the label stays clear, the claim sits on a dark fade */
/* header and footer centred (24/10) */
.header-inner { justify-content: center; }
.footer-top { grid-template-columns: 1fr !important; justify-items: center; text-align: center; }
.footer-about { justify-items: center; }
.site-footer .footer-col { justify-items: center; }
.footer-named { justify-items: center; }
.footer-legal { text-align: center; }