/* LUMIÈRE case — content styles. The nav/footer envelope comes from
   ../studio-case-shell.css and is not restyled here. */

/* fonts: Einstein locally (file:// safe), brand voices for specimens */
@font-face { font-family: 'Einstein'; src: url('../assets/fonts/Einstein-Regular.woff2') format('woff2'); font-weight: 300 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Einstein'; src: url('../assets/fonts/Einstein-Medium.woff2') format('woff2'); font-weight: 600 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Agharti'; src: url('../assets/fonts/brand/Agharti-DemiSemiWide.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Midruns'; src: url('../assets/fonts/brand/MidrunsSans.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Agirlsty'; src: url('../assets/fonts/brand/Agirlsty.otf') format('opentype'); font-weight: 400; font-display: swap; }

.lumiere-case {
  --lum-ink: #4a403a;
  --lum-taupe: #a78f7a;
  --lum-sun: #ffd967;
  --lum-glow: #f6e7b1;
  --lum-paper: #f8f6f2;
  --lum-line: rgb(74 64 58 / 16%);
  --lum-ease: cubic-bezier(0.32, 0.72, 0, 1);
  margin: 0;
  background: var(--lum-paper);
  color: var(--lum-ink);
  font-family: 'Einstein', sans-serif;
  line-height: 1.7;
}

.case-main { display: block; }
.lumiere-case .wrap { max-width: 1200px; margin: 0 auto; padding-inline: clamp(20px, 4vw, 40px); }

/* masthead */
.case-masthead { padding: clamp(56px, 9vh, 120px) 0 clamp(36px, 6vh, 72px); }
.masthead-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: end; }
.case-eyebrow { margin: 0 0 18px; font-size: 14px; font-weight: 600; letter-spacing: 0.06em; color: var(--lum-taupe); }
.case-masthead h1 { margin: 0; font-size: clamp(38px, 5.4vw, 74px); font-weight: 700; line-height: 1.12; letter-spacing: -0.012em; }
.masthead-copy p { margin: 0 0 18px; font-size: clamp(17px, 1.5vw, 20px); color: rgb(74 64 58 / 88%); }

.text-link { color: var(--lum-ink); font-weight: 600; text-decoration: none; border-bottom: 1.5px solid var(--lum-sun); padding-bottom: 2px; transition: border-color 0.4s var(--lum-ease); }
.text-link:hover, .text-link:focus-visible { border-color: var(--lum-ink); }
.text-link.light { color: var(--lum-paper); border-color: var(--lum-sun); }
.text-link.light:hover, .text-link.light:focus-visible { border-color: var(--lum-paper); }

/* hero world */
.hero-world {
  position: relative;
  margin: 0;
  background: var(--lum-sun);
  min-height: clamp(420px, 72vh, 720px);
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: clamp(48px, 8vh, 96px) 20px;
}
.hero-lockup { display: grid; justify-items: center; gap: clamp(16px, 2.6vh, 30px); position: relative; z-index: 2; }
.hw-mark { width: clamp(120px, 16vw, 210px); height: auto; }
.hw-word { width: clamp(220px, 28vw, 380px); height: auto; }
.hw-sub { font-family: 'Midruns', sans-serif; font-size: clamp(10px, 1.2vw, 15px); letter-spacing: 0.52em; text-indent: 0.52em; white-space: nowrap; }
.hero-photo {
  position: absolute;
  inset-inline-end: clamp(16px, 6vw, 110px);
  bottom: clamp(-10px, -1vh, 0px);
  width: clamp(150px, 20vw, 280px);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  box-shadow: 0 40px 100px rgb(74 64 58 / 30%);
  transform: rotate(-1.6deg);
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }

/* sections */
.case-sec { padding: clamp(64px, 11vh, 140px) 0; }
.sec-sun { background: var(--lum-sun); }
.sec-ink { background: var(--lum-ink); color: var(--lum-paper); }
.sec-ink .sec-no { color: var(--lum-glow); }
.sec-ink .sec-copy p { color: rgb(248 246 242 / 86%); }

.sec-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(30px, 5vw, 84px); align-items: center; }
.sec-grid.flip { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.sec-no { margin: 0 0 14px; font-size: 13.5px; font-weight: 600; letter-spacing: 0.08em; color: var(--lum-taupe); }
.case-sec h2 { margin: 0 0 20px; font-size: clamp(28px, 3.6vw, 50px); font-weight: 700; line-height: 1.16; letter-spacing: -0.01em; }
.sec-copy p { margin: 0 0 16px; font-size: clamp(16px, 1.35vw, 19px); color: rgb(74 64 58 / 88%); max-width: 52ch; }
.sec-copy.center { text-align: center; }
.sec-copy.center p { margin-inline: auto; }
.proof-link-row { margin: 26px 0 0; }
.proof-link-row.center { text-align: center; }

.sec-media { margin: 0; }
.original-ad img { width: 100%; height: auto; box-shadow: 0 40px 110px rgb(74 64 58 / 24%); }
.original-ad figcaption { margin-top: 14px; font-size: 13.5px; color: var(--lum-taupe); }

.module-line { display: flex; flex-wrap: wrap; gap: clamp(14px, 2vw, 30px); margin-top: 30px; }
.module-line img { width: clamp(30px, 3.4vw, 46px); }
.module-line img:nth-child(2) { transform: rotate(60deg); }
.module-line img:nth-child(3) { transform: rotate(120deg); }
.module-line img:nth-child(4) { transform: rotate(180deg); }
.module-line img:nth-child(5) { transform: rotate(240deg); }
.module-line img:nth-child(6) { transform: rotate(300deg); }

.video-card { position: relative; overflow: hidden; box-shadow: 0 40px 110px rgb(74 64 58 / 26%); }
.video-card video { width: 100%; display: block; }
.reel-card { max-width: 400px; justify-self: center; }
.media-toggle {
  position: absolute;
  inset-inline-end: 14px;
  bottom: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: rgb(23 19 15 / 76%);
  color: var(--lum-paper);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.media-toggle:focus-visible { outline: 2.5px solid var(--lum-sun); outline-offset: 2px; }

/* system section */
.palette-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: clamp(36px, 6vh, 60px); }
.palette-row div { background: var(--c); color: var(--t); min-width: 0; overflow: hidden; min-height: clamp(120px, 18vh, 190px); display: flex; align-items: flex-end; padding: 16px; border: 1px solid var(--lum-line); }
.palette-row b { font-size: 13px; letter-spacing: 0.04em; font-weight: 600; }
.type-rows { display: grid; gap: clamp(26px, 4vh, 44px); margin-top: clamp(40px, 7vh, 72px); }
.type-row { display: grid; gap: 8px; border-top: 1px solid var(--lum-line); padding-top: 22px; }
.type-name { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; color: var(--lum-taupe); }
.type-row p { margin: 0; text-align: start; }
.tp-agharti { font-family: 'Agharti', sans-serif; font-weight: 600; font-size: clamp(40px, 6.4vw, 96px); line-height: 0.95; text-transform: uppercase; }
.tp-midruns { font-family: 'Midruns', sans-serif; font-size: clamp(20px, 2.6vw, 38px); letter-spacing: 0.16em; }
.tp-agirlsty { font-family: 'Agirlsty', serif; font-size: clamp(26px, 3.4vw, 52px); }
.book-strip { margin: clamp(44px, 7vh, 80px) 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.book-strip img { width: 100%; height: auto; border: 1px solid var(--lum-line); box-shadow: 0 18px 50px rgb(74 64 58 / 12%); }
.book-strip figcaption { grid-column: 1 / -1; margin-top: 10px; font-size: 13.5px; color: var(--lum-taupe); }

/* feed section */
.phone-shot img { width: 100%; max-width: 380px; height: auto; margin-inline: auto; display: block; }
.wide-media { margin: clamp(40px, 7vh, 72px) auto 0; }
.wide-media img { width: 100%; height: auto; display: block; box-shadow: 0 34px 90px rgb(24 18 13 / 22%); }
.devices-media img { box-shadow: none; }

/* built list */
.sec-built { background: #fff; border-block: 1px solid var(--lum-line); }
.built-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 30px; align-self: center; }
.built-list li { position: relative; padding-inline-start: 26px; font-size: clamp(15.5px, 1.3vw, 18px); }
.built-list li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.62em; width: 12px; height: 12px; border-radius: 50%; background: var(--lum-sun); border: 2px solid var(--lum-ink); }

/* cta band */
.case-cta-band { background: var(--lum-ink); color: var(--lum-paper); text-align: center; padding: clamp(64px, 11vh, 130px) 0; }
.case-cta-band p { margin: 0 0 14px; font-size: clamp(16px, 1.4vw, 19px); color: rgb(248 246 242 / 78%); }
.case-cta-band h2 { margin: 0 0 30px; font-size: clamp(30px, 4vw, 54px); line-height: 1.18; font-weight: 700; }

/* concept disclosure — once, small, gray */
.concept-note { margin: 0 auto; padding-block: 34px 46px; text-align: center; font-size: 13px; color: rgb(74 64 58 / 45%); }

/* responsive */
@media (max-width: 960px) {
  .masthead-grid, .sec-grid, .sec-grid.flip { grid-template-columns: 1fr; }
  .sec-grid .sec-media { order: 2; }
  .hero-photo { position: relative; inset: auto; transform: none; width: min(60%, 300px); margin-top: 34px; }
  .hero-world { display: flex; flex-direction: column; align-items: center; }
  .built-list { grid-template-columns: 1fr; margin-top: 8px; }
  .book-strip { grid-template-columns: repeat(2, 1fr); }
  .palette-row { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
  .palette-row div { padding: 10px 8px; justify-content: center; }
  .palette-row b { font-size: 11px; writing-mode: vertical-rl; }
  .reel-card { max-width: min(78vw, 340px); }
}
@media (prefers-reduced-motion: reduce) {
  .text-link, .media-toggle { transition: none; }
}

/* v2: מתחת ל-360px (למשל 200% זום) ששת המודולים נשברים בכוונה לשתי שורות עם רווח קטן יותר */
@media (max-width: 359px) {
  .module-line { gap: 10px; margin-top: 22px; }
  .module-line img { width: 28px; }
}

@media (max-width: 359px) {
  .palette-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .palette-row b { writing-mode: horizontal-tb; font-size: 10px; }
  .hero-lockup { width: 100%; }
  .hw-word { width: min(220px, 100%); }
  .hw-sub { white-space: normal; letter-spacing: 0.28em; text-indent: 0; text-align: center; }
}