@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Helvetica+Neue:wght@300;400&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --serif: 'EB Garamond', Georgia, serif;
  --sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --bg: #F7F6F4;
  --ink: #0E0E0E;
  --muted: #888880;
  --border: #DAD6D0;
  --white: #FFFFFF;
  --accent: #1a1a1a;
  --xs: 0.5rem; --sm: 1rem; --md: 2rem; --lg: 4rem; --xl: 8rem;
  --nav-h: 64px;
}

html { font-size: 16px; scroll-behavior: smooth; }
body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-weight: 300; line-height: 1.6; -webkit-font-smoothing: antialiased; }

nav { position: fixed; top:0; left:0; right:0; height:var(--nav-h); display:flex; align-items:center; justify-content:space-between; padding:0 var(--md); background:var(--bg); border-bottom:1px solid transparent; z-index:100; transition:border-color 0.3s; }
nav.scrolled { border-color:var(--border); }

.nav-brand { font-family:var(--serif); font-size:1.15rem; letter-spacing:0.2em; text-decoration:none; color:var(--ink); text-transform:uppercase; }
.nav-brand em { font-style:normal; font-size:0.65em; letter-spacing:0.1em; opacity:0.5; margin-left:4px; font-family:var(--sans); font-weight:300; }

.nav-links { display:flex; gap:var(--md); list-style:none; }
.nav-links a { font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase; text-decoration:none; color:var(--ink); opacity:0.6; transition:opacity 0.2s; }
.nav-links a:hover, .nav-links a.active { opacity:1; }

.nav-lang { font-size:0.65rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--muted); cursor:pointer; border:none; background:none; }
.nav-lang span.active { color:var(--ink); }

/* HERO — portrait layout for personal brand */
.hero { height:100vh; display:grid; grid-template-columns:1fr 1fr; }
.hero-image { overflow:hidden; }
.hero-image img { width:100%; height:100%; object-fit:cover; object-position:top; filter:grayscale(20%); }
.hero-content { display:flex; flex-direction:column; justify-content:flex-end; padding:var(--lg) var(--md); background:var(--bg); }
.hero-content h1 { font-family:var(--serif); font-size:clamp(3rem,8vw,7rem); font-weight:400; line-height:0.9; letter-spacing:-0.01em; }
.hero-content .hero-sub { font-size:0.7rem; letter-spacing:0.25em; text-transform:uppercase; color:var(--muted); margin-top:var(--md); }
.hero-content .hero-brand { font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase; margin-top:var(--sm); }
.hero-content .hero-brand a { color:var(--ink); text-decoration:underline; text-underline-offset:3px; }

/* Shared typography & layout — mirrors xuan-paris.com */
.section { padding:var(--xl) var(--md); max-width:1200px; margin:0 auto; }
.section-sm { padding:var(--lg) var(--md); }
.section-full { max-width:none; padding:var(--xl) 0; }
.section-label { font-size:0.65rem; letter-spacing:0.3em; text-transform:uppercase; color:var(--muted); margin-bottom:var(--md); display:block; }
h1,h2,h3 { font-family:var(--serif); font-weight:400; }
h2 { font-size:clamp(2rem,5vw,4rem); line-height:1.1; }
h3 { font-size:clamp(1.1rem,2.5vw,1.8rem); line-height:1.2; }
p { max-width:65ch; } p+p { margin-top:1em; }
.lead { font-family:var(--serif); font-size:clamp(1.1rem,2.5vw,1.6rem); line-height:1.6; font-style:italic; }
blockquote { font-family:var(--serif); font-size:clamp(1.2rem,3vw,2rem); font-style:italic; line-height:1.5; border-left:1px solid var(--ink); padding-left:var(--md); margin:var(--lg) 0; }
blockquote cite { display:block; font-family:var(--sans); font-size:0.65rem; letter-spacing:0.2em; text-transform:uppercase; font-style:normal; color:var(--muted); margin-top:var(--sm); }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:var(--md); }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--md); }
.grid-auto { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:var(--md); }

.collection-card { text-decoration:none; color:var(--ink); display:block; }
.collection-card img { width:100%; aspect-ratio:3/4; object-fit:cover; filter:grayscale(15%); transition:filter 0.4s; }
.collection-card:hover img { filter:grayscale(0%); }
.collection-card .card-meta { margin-top:var(--sm); display:flex; justify-content:space-between; align-items:baseline; }
.collection-card .card-season { font-family:var(--serif); font-size:1.05rem; }
.collection-card .card-year { font-size:0.65rem; letter-spacing:0.2em; color:var(--muted); }
.collection-card .card-desc { font-size:0.8rem; color:var(--muted); margin-top:4px; line-height:1.5; }

.press-list { list-style:none; }
.press-item { display:grid; grid-template-columns:80px 1fr; gap:var(--md); padding:var(--md) 0; border-bottom:1px solid var(--border); align-items:start; }
.press-item:first-child { border-top:1px solid var(--border); }
.press-date { font-size:0.65rem; letter-spacing:0.15em; color:var(--muted); text-transform:uppercase; padding-top:4px; }
.press-source { font-size:0.65rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
.press-title { font-family:var(--serif); font-size:1.1rem; text-decoration:none; color:var(--ink); }
.press-title:hover { text-decoration:underline; text-underline-offset:3px; }
.press-excerpt { font-size:0.85rem; color:var(--muted); margin-top:6px; line-height:1.6; }

.about-grid { display:grid; grid-template-columns:1fr 1.6fr; gap:var(--lg); align-items:start; }
.about-grid img { width:100%; aspect-ratio:2/3; object-fit:cover; object-position:top; }
.about-body h2 { margin-bottom:var(--md); }
.about-body p { color:#333; line-height:1.8; }
.about-body p+p { margin-top:1.2em; }

[lang-content="fr"] { display:none; }
body.fr [lang-content="en"] { display:none; }
body.fr [lang-content="fr"] { display:block; }

.facts { margin-top:var(--lg); border-top:1px solid var(--border); }
.fact { display:grid; grid-template-columns:160px 1fr; padding:12px 0; border-bottom:1px solid var(--border); font-size:0.85rem; }
.fact-label { font-size:0.65rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--muted); padding-top:2px; }
.fact-value a { color:var(--ink); }

.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--xl); }
.contact-block h3 { font-size:0.65rem; letter-spacing:0.3em; text-transform:uppercase; margin-bottom:var(--md); color:var(--muted); font-family:var(--sans); font-weight:400; }
.contact-block p { font-size:0.95rem; line-height:2; }
.contact-block a { color:var(--ink); text-decoration:underline; text-underline-offset:3px; }

hr { border:none; border-top:1px solid var(--border); margin:var(--lg) 0; }

footer { padding:var(--lg) var(--md); border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; font-size:0.7rem; letter-spacing:0.1em; color:var(--muted); }
footer a { color:var(--muted); text-decoration:none; }
footer a:hover { color:var(--ink); }

a.link-arrow::after { content:' →'; }
a.link-arrow { font-size:0.75rem; letter-spacing:0.15em; text-transform:uppercase; text-decoration:none; color:var(--ink); display:inline-block; margin-top:var(--md); border-bottom:1px solid var(--ink); padding-bottom:2px; }

@media (max-width:768px) {
  :root { --md:1.25rem; --lg:2.5rem; --xl:4rem; }
  .grid-2,.grid-3,.about-grid,.contact-grid { grid-template-columns:1fr; }
  .hero { grid-template-columns:1fr; }
  .hero-image { height:60vh; }
  .press-item { grid-template-columns:1fr; gap:4px; }
}

/* GALLERY */
.gallery { columns: 3; column-gap: 8px; }
.gallery-item { break-inside: avoid; margin-bottom: 8px; cursor: pointer; overflow: hidden; }
.gallery-item img { width: 100%; display: block; transition: transform .4s ease; }
.gallery-item:hover img { transform: scale(1.02); }

/* Lightbox */
.lightbox { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 200; align-items: center; justify-content: center; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 90vw; max-height: 90vh; object-fit: contain; }
.lightbox-close { position: fixed; top: 1.5rem; right: 2rem; color: #fff; font-size: 2rem; cursor: pointer; background: none; border: none; opacity: .7; }
.lightbox-close:hover { opacity: 1; }
.lightbox-prev, .lightbox-next { position: fixed; top: 50%; transform: translateY(-50%); color: #fff; font-size: 2rem; cursor: pointer; background: none; border: none; opacity: .5; padding: 1rem; }
.lightbox-prev:hover, .lightbox-next:hover { opacity: 1; }
.lightbox-prev { left: 1rem; } .lightbox-next { right: 1rem; }

@media (max-width: 768px) { .gallery { columns: 2; } }
@media (max-width: 480px) { .gallery { columns: 1; } }

/* --- ORNAMENT --- */
.ornament { display:block; width:200px; height:20px; margin:var(--lg) auto; color:var(--ink); }
.lead { font-family: var(--serif); font-style: italic; line-height:1.6; }