/* La Maison Opale — costume design for cinema */

:root {
  --ink: #0E0D10;
  --ink-2: #141217;
  --page: #17151B;
  --tile: #1C1A20;
  --cream: #EDE8DF;
  --cream-dark: #17151A;
  --text-soft: #D9D3C9;
  --text-body: #CFC8BE;
  --text-muted: #B8B1A8;
  --text-faint: #A49E96;
  --text-quote: #8F8890;
  --accent: #C9B58E;
  --line: rgba(237, 232, 223, 0.14);
  --gutter: 40px;
  --serif: 'Bodoni Moda', Georgia, serif;
  --sans: 'Manrope', system-ui, sans-serif;
  --script: 'Pinyon Script', cursive;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--sans);
  /* Bodoni Moda's display optical size turns to hairlines at headline sizes; keep its sturdier text cut */
  font-optical-sizing: none;
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; }
section, header { scroll-margin-top: 84px; }
a { color: var(--cream); text-decoration: none; }
a:hover { color: var(--accent); }
em { font-style: italic; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 900;
  padding: 12px 18px; background: var(--cream); color: var(--ink);
}
.skip-link:focus { top: 16px; }

/* ---------- shared type ---------- */
.eyebrow {
  font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--accent);
}
.display {
  margin: 0; font-family: var(--serif); font-weight: 400;
  font-size: clamp(34px, 4.6vw, 68px); line-height: 1.04; letter-spacing: -0.01em; max-width: 820px;
}
.h2 {
  margin: 0; font-family: var(--serif); font-weight: 400;
  font-size: clamp(28px, 3.1vw, 44px); line-height: 1.05;
}
.body-muted { margin: 0; font-size: 15px; line-height: 1.7; color: var(--text-muted); }
.bright { color: var(--cream); }
.script-name { font-family: var(--script); font-size: 38px; line-height: 1.15; color: var(--cream); text-align: center; }

.btn {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 26px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.btn-solid { background: var(--cream); color: var(--ink); }
.btn-solid:hover { background: var(--accent); color: var(--ink); }
.btn-outline { border: 1px solid rgba(237, 232, 223, 0.5); }
.btn-outline:hover { border-color: var(--accent); }
.btn-dark {
  min-height: 52px; padding: 0 32px; letter-spacing: 0.2em;
  background: var(--cream-dark); color: var(--cream);
}
.btn-dark:hover { background: #2A2630; color: var(--cream); }
.buttons { display: flex; flex-wrap: wrap; gap: 12px; }

.round-btn {
  width: 48px; height: 48px; flex: none; border-radius: 50%;
  border: 1px solid rgba(237, 232, 223, 0.4); background: transparent; color: var(--cream);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .25s ease, color .25s ease;
}
.round-btn:hover { border-color: var(--accent); color: var(--accent); }

.container { max-width: 1240px; margin: 0 auto; }
.section { padding: 0 var(--gutter) 104px; }
.section > .container { display: flex; flex-direction: column; gap: 48px; }
.section-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px;
  border-bottom: 1px solid var(--line); padding-bottom: 28px;
}
.section-title { display: flex; flex-direction: column; gap: 14px; }
.section-blurb { max-width: 400px; }
.section-blurb.wide { max-width: 520px; }

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  padding: 16px var(--gutter);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px;
  background: rgba(14, 13, 16, 0.72);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(237, 232, 223, 0.12);
}
.nav-brand { display: inline-flex; align-items: center; gap: 14px; }
.nav-brand img { height: 44px; width: auto; }
.nav-brand .nav-wordmark { height: 18px; }
.nav-links {
  display: flex; flex-wrap: wrap; gap: 8px 32px;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
}
.nav-links { margin-left: auto; }
.nav-links a { padding: 6px 0; }
.nav-links .accent { color: var(--accent); }
.nav-links .accent:hover { color: var(--cream); }
.lang-toggle {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px;
  border: 1px solid rgba(237, 232, 223, 0.3); border-radius: 999px; background: transparent;
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.2em; color: var(--text-faint);
  cursor: pointer; transition: border-color .25s ease;
}
.lang-toggle:hover { border-color: var(--accent); }
.lang-toggle span { transition: color .25s ease; }
.lang-toggle[data-lang="en"] .lang-en, .lang-toggle[data-lang="fr"] .lang-fr { color: var(--cream); }
.lang-sep { opacity: 0.6; }

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden; background: var(--ink-2);
  min-height: clamp(460px, 47vw, 740px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: 120px;
}
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-shade-top {
  position: absolute; left: 0; right: 0; top: 0; height: 180px;
  background: linear-gradient(to bottom, rgba(14, 13, 16, 0.6), rgba(14, 13, 16, 0));
}
.hero-shade-bottom {
  position: absolute; left: 0; right: 0; bottom: 0; height: 560px; max-height: 100%;
  background: linear-gradient(to top, rgba(14, 13, 16, 0.95), rgba(14, 13, 16, 0));
}
.hero-content { position: relative; padding: 0 var(--gutter) 48px; }
.hero-inner {
  max-width: 1240px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px;
}
.hero-lead { flex: 1 1 560px; display: flex; flex-direction: column; gap: 22px; }
.hero-side { flex: 0 1 340px; display: flex; flex-direction: column; gap: 22px; }

/* ---------- intro ---------- */
.intro { padding: 96px var(--gutter) 88px; }
.intro-inner {
  max-width: 980px; margin: 0 auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 28px;
}
.intro-text {
  margin: 0; font-family: var(--serif); font-weight: 400;
  font-size: clamp(22px, 2.3vw, 32px); line-height: 1.4;
}
.intro-quote { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--text-quote); }

.detail { margin: 0 0 104px; position: relative; height: clamp(300px, 34vw, 500px); overflow: hidden; }
.detail img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.detail figcaption {
  position: absolute; left: var(--gutter); bottom: 32px;
  font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--cream);
}

/* ---------- gallery ---------- */
.g-rows { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 940px; margin: 0 auto; }
.g-row { display: flex; gap: 16px; }
.g-item {
  display: block; margin: 0; padding: 0; border: 0; cursor: zoom-in;
  position: relative; overflow: hidden; background: var(--tile); min-width: 0;
}
.g-item img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 35%;
  transition: transform .6s ease, opacity .6s ease;
}
.g-item:hover img { transform: scale(1.04); }

/* ---------- stories: the book ---------- */
.book-wrap { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.book {
  position: relative; width: 100%; max-width: min(900px, 118vh);
  aspect-ratio: 1120 / 760; perspective: 2400px;
  border-radius: 10px; box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6);
}
.page, .leaf-face {
  position: absolute; top: 0; height: 100%; background: var(--page); overflow: hidden;
}
.page { width: 50%; }
.page-left, .leaf-back {
  left: 0; border-radius: 10px 0 0 10px;
  box-shadow: inset -28px 0 40px -24px rgba(0, 0, 0, 0.75);
  padding: 32px 28px 28px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.page-left img, .leaf-back img { height: 80%; width: auto; max-width: 100%; object-fit: contain; }
.page-right, .leaf-front {
  border-radius: 0 10px 10px 0;
  box-shadow: inset 28px 0 40px -24px rgba(0, 0, 0, 0.75);
}
.page-end {
  left: 50%; padding: 48px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  text-align: center;
}
.end-mark { height: 72px; width: auto; }
.end-line { font-family: var(--serif); font-size: 30px; line-height: 1.25; }

.leaf {
  position: absolute; left: 50%; top: 0; width: 50%; height: 100%;
  transform-origin: left center; transform-style: preserve-3d;
  transition: transform 1.4s cubic-bezier(.645, .045, .355, 1);
}
.leaf-face {
  inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.leaf-front { padding: 34px 36px 30px; display: flex; flex-direction: column; gap: 16px; }
.leaf-back { transform: rotateY(180deg); }
.leaf-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent);
}
.leaf-head span:last-child { color: var(--text-quote); }
.leaf-text {
  margin: 0; flex: 1 1 auto; font-family: var(--serif); font-style: italic;
  font-size: 15px; line-height: 1.6; color: var(--text-soft); white-space: pre-line;
}
.photo-trio { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: minmax(0, 1fr); gap: 8px; }
.leaf-front .photo-trio { height: 46%; flex: 0 0 auto; }
.photo-trio img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.leaf-front .photo-trio img:first-child {
  border-radius: 0;
  clip-path: polygon(0 0, 76% 0, 100% 20%, 100% 100%, 24% 100%, 0 80%);
}
.leaf-end { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.leaf-end img { height: 150px; width: auto; }
.leaf-end div { font-family: var(--script); font-size: 40px; color: var(--cream); }

.book-hit {
  position: absolute; top: 0; width: 50%; height: 100%; z-index: 60;
  background: transparent; border: 0; padding: 0;
}
.book-hit-prev { left: 0; cursor: w-resize; }
.book-hit-next { left: 50%; cursor: e-resize; }

.book-controls { display: flex; align-items: center; gap: 24px; }
.book-caption { min-width: 260px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.book-counter { font-size: 11px; letter-spacing: 0.28em; color: var(--text-faint); }
.book-title { font-family: var(--script); font-size: 30px; line-height: 1.2; color: var(--cream); }

/* ---------- stories: the flip book (phones and small tablets) ---------- */
/* One page per creation, all stacked in one grid cell, each hinged on its left edge. */
.flip-wrap { display: none; flex-direction: column; align-items: center; gap: 24px; }
.flip {
  display: grid; width: 100%; max-width: 520px; perspective: 1800px;
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
  border-radius: 4px 10px 10px 4px; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
}
.flip-page {
  grid-area: 1 / 1; min-width: 0;
  display: flex; flex-direction: column; gap: 18px; padding: 26px 22px 24px 30px;
  background: var(--page); border-radius: 4px 10px 10px 4px;
  box-shadow: inset 24px 0 30px -24px rgba(0, 0, 0, 0.75);
  transform-origin: left center; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: transform 0.9s cubic-bezier(.645, .045, .355, 1);
}
.flip.dragging .flip-page { transition: none; }
.flip img { pointer-events: none; }
.flip-end { align-items: center; justify-content: center; gap: 22px; text-align: center; }
.flip-end img { height: 120px; width: auto; }
.flip-end .script-name { font-size: 34px; }
.flip-wrap .book-controls { width: 100%; max-width: 520px; justify-content: space-between; gap: 12px; }
.flip-wrap .book-caption { min-width: 0; }
.flip-hint { margin: -8px 0 0; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-faint); transition: opacity .6s ease; }
.flip-hint.done { opacity: 0; }
.story-head { display: flex; align-items: flex-end; gap: 18px; }
.story-head img { height: 220px; width: auto; }
.story-names { display: flex; flex-direction: column; gap: 4px; }
.story-num { font-size: 11px; letter-spacing: 0.28em; color: var(--accent); }
.story-names .script-name { text-align: left; }
.story-text {
  margin: 0; font-family: var(--serif); font-style: italic;
  font-size: 16px; line-height: 1.65; color: var(--text-soft); white-space: pre-line;
}
.flip-page .photo-trio { height: 220px; }

@media (max-width: 900px) {
  .book-wrap { display: none; }
  .flip-wrap { display: flex; }
  /* the links take their own row; the language toggle stays beside the logo */
  .lang-toggle { order: 1; margin-left: auto; }
  .nav-links { order: 2; flex-basis: 100%; margin-left: 0; }
}

/* ---------- about ---------- */
.about { padding-top: 24px; }
.section > .about-inner { flex-direction: row; flex-wrap: wrap; gap: 64px; align-items: flex-start; }
.about-photo { margin: 0; flex: 1 1 320px; max-width: 400px; display: flex; flex-direction: column; gap: 14px; }
.about-photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; }
.about-photo figcaption { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-faint); }
.about-text { flex: 1 1 460px; display: flex; flex-direction: column; gap: 26px; }
.about-text p { margin: 0; font-size: 16px; line-height: 1.8; color: var(--text-body); }
.about-name {
  margin: 0; font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: clamp(40px, 4.4vw, 64px); line-height: 1;
}
.about-role { font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-faint); }
.about-text blockquote {
  margin: 8px 0; padding: 0 0 0 24px; border-left: 1px solid var(--accent);
  font-family: var(--serif); font-style: italic; font-size: clamp(20px, 1.9vw, 25px); line-height: 1.4;
}
.maison { display: flex; flex-direction: column; margin-top: 10px; }
.maison .eyebrow { padding-bottom: 14px; }
.maison-row {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  padding: 16px 0; border-top: 1px solid var(--line);
}
.maison-title { font-family: var(--serif); font-size: 19px; font-style: italic; }
.maison-meta { font-size: 13px; color: var(--text-faint); }

/* ---------- contact & footer ---------- */
.contact { background: var(--cream); color: var(--cream-dark); padding: 88px var(--gutter); }
.contact-inner {
  max-width: 980px; margin: 0 auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 28px;
}
.contact .eyebrow { color: #6B5A3A; }
.contact-h { font-size: clamp(30px, 3.6vw, 52px); }
.contact p { margin: 0; max-width: 560px; font-size: 16px; line-height: 1.7; color: #4A4450; }

.footer { padding: 36px var(--gutter); }
.footer-inner {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px;
  font-size: 12px; letter-spacing: 0.14em; color: var(--text-faint);
}
.footer-inner img { height: 84px; width: auto; }

/* ---------- photo viewer ---------- */
.lb {
  position: fixed; inset: 0; z-index: 1000; background: rgba(10, 9, 12, 0.95);
  display: flex; align-items: center; justify-content: center;
  animation: lb-in .35s ease;
}
.lb[hidden] { display: none; }
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
.lb-backdrop {
  position: absolute; inset: 0; width: 100%; height: 100%;
  background: transparent; border: 0; cursor: zoom-out;
}
.lb-figure {
  position: relative; margin: 0; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.lb-figure img {
  max-width: 86vw; max-height: 84vh; width: auto; height: auto; object-fit: contain;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.lb-figure figcaption {
  display: flex; gap: 18px; align-items: baseline; padding: 0 16px;
  font-size: 12px; letter-spacing: 0.2em; color: var(--text-faint);
}
.lb-figure figcaption span:first-child { white-space: nowrap; }
.lb-caption { letter-spacing: 0.04em; }
.lb .round-btn { position: absolute; background: rgba(14, 13, 16, 0.6); }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; }
.lb-prev { left: 24px; }
.lb-next { right: 24px; }
.lb-close { top: 20px; right: 20px; }

/* ---------- smaller screens ---------- */
@media (max-width: 640px) {
  :root { --gutter: 20px; }
  .nav { padding-top: 12px; padding-bottom: 12px; }
  .nav-brand img { height: 36px; }
  .nav-links { gap: 4px 22px; font-size: 11px; }
  .hero { padding-top: 150px; }
  .hero-lead, .hero-side { flex-basis: 100%; }
  .g-rows, .g-row { gap: 8px; }
  .intro { padding-top: 72px; padding-bottom: 64px; }
  .detail { margin-bottom: 72px; }
  .section { padding-bottom: 80px; }
  .story-head img { height: 180px; }
  .flip-page .photo-trio { height: 130px; }
  .section > .about-inner { gap: 40px; }
  .about-photo { max-width: none; }
  .contact { padding-top: 72px; padding-bottom: 72px; }
  .lb-prev, .lb-next { top: auto; bottom: 24px; transform: none; }
  .lb-prev { left: calc(50% - 64px); }
  .lb-next { right: calc(50% - 64px); }
  .lb-figure img { max-width: calc(100vw - 32px); max-height: 72vh; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .leaf, .flip-page { transition: none; }
  .g-item img { transition: none; }
  .g-item:hover img { transform: none; }
  .lb { animation: none; }
}