/* ART DIRECTION (V2) — Hero + two flagship exhibitions. Desktop and mobile are composed separately.
   Hero tone comes from the L CORE glass-L film itself (near-black, amber horizon, cold glass blue). The only dark band besides Motion. */
:root { --hh: clamp(620px, 100svh, 980px); --hero-ink: #EDE6D8; --amber: #E3A866; --plate-bg: #151813; }

/* ---------- header over the hero ---------- */
.hd.dark .logo, .hd.dark .nav a, .hd.dark .menu-btn { color: var(--hero-ink); }
.hd.dark::before { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
@media (max-width: 760px) { .hd.dark .nav { background: #05070a; border-color: rgba(237,230,216,.16); } .hd.dark .nav a { border-color: rgba(237,230,216,.14); } }

/* ---------- HERO ---------- */
.hero2 { position: relative; background: #04060a; color: var(--hero-ink); margin-top: calc(var(--hd) * -1); }
.h2-frame { position: relative; }
.h2-imgs { position: relative; height: min(60svh, 560px); overflow: hidden; background: #04060a; }
.s { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 54% 50%; opacity: 0; transform-origin: 40% 55%; }
.s1 { animation: s1 2.4s ease-out both; }
.s2 { animation: s2 2.6s ease-in-out .5s both; }
.s3 { animation: s3in 1.6s ease 2.0s both, drift 16s cubic-bezier(.2,.6,.2,1) 2.0s both; }
@keyframes s1 { 0% { opacity: 1; transform: scale(1.12); } 45% { opacity: 1; } 100% { opacity: 0; transform: scale(1.06); } }
@keyframes s2 { 0% { opacity: 0; transform: scale(1.08); } 30% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; transform: scale(1.03); } }
@keyframes s3in { from { opacity: 0; } to { opacity: 1; } }
@keyframes drift { from { transform: scale(1.06); } to { transform: scale(1); } }
.h2-word { margin: 10px 0 0 4.2vw; font-weight: 200; font-size: 17vw; line-height: 1; letter-spacing: .16em; color: #F3E9D6; white-space: nowrap; }
.ch { display: inline-block; opacity: 0; transform: translateY(.14em); filter: blur(6px); animation: chIn 1.3s var(--ease) both; animation-delay: calc(3.0s + var(--i) * .11s); }
@keyframes chIn { to { opacity: 1; transform: none; filter: none; } }
.h2-copy { padding: 18px var(--gut) 0; animation: fadeUp 1.2s var(--ease) 3.7s both; }
.h2-lb { color: var(--amber); margin: 0 0 10px; }
.h2-ko { margin: 0; font-size: 24px; line-height: 1.34; letter-spacing: -.035em; font-weight: 400; max-width: 15em; }
.h2-sub { margin: 10px 0 0; font-size: 13px; line-height: 1.6; color: rgba(237,230,216,.72); max-width: 30em; }
.h2-idx { display: flex; flex-direction: column; margin: 26px var(--gut) 0; border-top: 1px solid rgba(237,230,216,.18); animation: fadeUp 1.2s var(--ease) 4s both; }
.h2-idx a { display: flex; gap: 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid rgba(237,230,216,.12); font-size: 13px; min-height: 44px; }
.h2-idx .n { font-variant-numeric: tabular-nums; color: var(--amber); font-size: 11px; letter-spacing: .14em; }
.h2-cue { display: inline-block; margin: 20px var(--gut) 36px; color: var(--amber); padding: 10px 0; animation: fadeUp 1.2s var(--ease) 4.2s both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.hero2 a:hover .t { text-decoration: underline; text-underline-offset: 4px; }

@media (min-width: 761px) {
  .hero2 { height: var(--hh); overflow: hidden; }
  .h2-frame { position: absolute; left: 50%; top: 50%; width: max(100vw, calc(var(--hh) * 1.7749)); aspect-ratio: 1672 / 942; transform: translate(-50%, -50%); container-type: size; }
  .h2-imgs { position: absolute; inset: 0; height: auto; }
  .s { object-position: 50% 50%; }
  /* STUDIO stands on the same horizon the glass L stands on; measured in image space (cqw/cqh) so it never drifts off the picture */
  .h2-word { text-shadow: 0 0 36px rgba(255,170,70,.22); position: absolute; margin: 0; left: 46.4cqw; top: calc(52.1cqh - 7.6cqw); font-size: 8.6cqw; letter-spacing: .17em; }
  .h2-copy { position: absolute; left: var(--gut); bottom: 11%; padding: 0; max-width: 520px; }
  .h2-lb { margin-bottom: 14px; }
  .h2-ko { font-size: clamp(22px, 2vw, 30px); }
  .h2-idx { position: absolute; right: var(--gut); bottom: 11%; margin: 0; width: min(300px, 24vw); }
  .h2-cue { position: absolute; left: var(--gut); bottom: 4.2%; margin: 0; }
  .h2-idx a { padding: 10px 0; min-height: 0; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .s1, .s2 { display: none; } .s3 { animation: none; opacity: 1; transform: none; }
  .ch, .h2-copy, .h2-idx, .h2-cue { animation: none; opacity: 1; transform: none; filter: none; }
}

/* hero -> paper bridge: a separate strip below the picture (nothing is laid over the image) */
#work.sec { padding-top: 0 !important; }
#work::before { content: ""; display: block; height: clamp(72px, 9vw, 120px); background: linear-gradient(#04060a, var(--paper)); margin-bottom: clamp(24px, 4vw, 40px); }
.s { filter: saturate(.72) contrast(1.02); }

/* ---------- shared plate ---------- */
.plate-host { display: block; width: 100%; height: 100%; background: var(--plate-bg); overflow: hidden; }
.plate-host video, .plate-host img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wk-aurore, .wk-clarte { padding: 0; }

/* ---------- 01 MAISON AURORE — round, soft, serif; principle (rings) beside result (film) ---------- */
.wk-aurore { background: var(--w-paper); color: var(--w-ink); overflow: hidden; }
.ax-grid { display: flex; flex-direction: column; padding: 56px var(--gut) 64px; }
.ax-no { margin: 0 0 6px; font-size: 11px; letter-spacing: .16em; font-weight: 600; }
.ax-no::after { content: " / 03"; opacity: .6; font-weight: 400; }
.ax-fig { margin: 0 -6vw; order: 1; } .ax-rings { width: 100%; height: auto; overflow: visible; }
.ax-ring { fill: none; stroke: var(--w-accent); stroke-width: .9; stroke-dasharray: 1; stroke-dashoffset: 0; }
.ax-sym { fill: var(--w-accent); }
.js .ax-fig:not(.in) .ax-ring { stroke-dashoffset: 1; } .js .ax-fig:not(.in) .ax-sym { opacity: 0; }
.ax-fig.in .ax-ring { animation: draw 2.4s var(--ease) both; animation-delay: calc(var(--i) * .35s); }
.ax-fig.in .ax-sym { animation: symIn 1.2s ease 1.9s both; }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } @keyframes symIn { from { opacity: 0; } to { opacity: 1; } }
.ax-plate { order: 3; display: block; width: 62%; margin: 26px 0 0 auto; aspect-ratio: 9 / 16; box-shadow: 0 30px 60px -30px rgba(30,38,29,.45); position: relative; }
.ax-title { order: 2; margin: -17vw 0 0; font: 400 clamp(64px, 21vw, 150px)/.9 Georgia, "Cormorant Garamond", "Times New Roman", serif; letter-spacing: -.03em; color: var(--w-ink); position: relative; }
.ax-title span { display: block; } .ax-title span:last-child { font-style: italic; padding-left: .6em; }
.ax-note { order: 4; margin-top: 26px; }
.ax-ko { margin: 0 0 18px; font-size: 20px; line-height: 1.42; letter-spacing: -.03em; max-width: 16em; }
.ax-spec { margin: 0; border-top: 1px solid color-mix(in srgb, var(--w-ink) 35%, transparent); }
.ax-spec div { display: grid; grid-template-columns: 76px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid color-mix(in srgb, var(--w-ink) 16%, transparent); font-size: 13px; }
.ax-spec dt { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; padding-top: 2px; } .ax-spec dd { margin: 0; }
.dots { display: flex; gap: 6px; } .dots i { width: 13px; height: 13px; border-radius: 50%; display: block; border: 1px solid color-mix(in srgb, var(--w-ink) 30%, transparent); }
.ax-go, .cx-go { display: inline-flex; margin-top: 22px; font-weight: 600; font-size: 13px; gap: 10px; border-bottom: 1px solid currentColor; padding: 8px 0; align-self: flex-start; }

@media (min-width: 900px) {
  .wk-aurore { height: clamp(760px, calc(100svh - var(--hd)), 920px); }
  .ax-grid { display: block; position: relative; height: 100%; max-width: var(--max); margin: 0 auto; padding: 0; }
  .ax-no { position: absolute; left: calc(var(--gut) + min(46vw, 700px) + 18px); top: 50px; margin: 0; font: 200 clamp(64px, 6.6vw, 100px)/1 var(--f); letter-spacing: -.05em; color: var(--w-accent); }
  .ax-no::after { font-size: 13px; letter-spacing: .14em; vertical-align: top; margin-left: 6px; }
  .ax-fig { position: absolute; left: calc(var(--gut) - 22px); top: 40px; width: min(44vw, 640px); margin: 0; order: 0; }
  .ax-plate { position: absolute; right: var(--gut); top: 50px; width: min(27.4vw, 400px); margin: 0; }
  .ax-title { position: absolute; left: var(--gut); bottom: 40px; margin: 0; font-size: clamp(88px, 9vw, 136px); }
  .ax-note { position: absolute; left: calc(var(--gut) + min(46vw, 700px) + 18px); width: min(19vw, 270px); bottom: 52px; margin: 0; }
  .ax-ko { font-size: clamp(18px, 1.55vw, 22px); }
}

/* ---------- 02 CLARTÉ CLINIC — cold, exact; hairline grid; glass panes open into the cross ---------- */
.wk-clarte { background: var(--w-paper); color: var(--w-ink); position: relative; overflow: hidden; }
.cx-grid { position: relative; display: flex; flex-direction: column; padding: 0 0 56px; }
.gl { display: none; position: absolute; background: color-mix(in srgb, var(--w-accent) 22%, transparent); }
.cx-no { order: 0; display: none; margin: 0; padding: 26px var(--gut) 14px; font: 200 15vw/.8 var(--f); letter-spacing: -.06em; color: var(--w-accent); }
.cx-plate { order: 2; display: block; width: 100%; aspect-ratio: 1; margin-top: 26px; }
.cx-plate .plate-host video, .cx-plate .plate-host img { object-position: 50% 33%; }
.cx-title { order: 1; margin: 30px var(--gut) 0; font: 200 clamp(56px, 19vw, 150px)/.92 var(--f); letter-spacing: -.055em; }
.cx-title span { display: block; } .cx-title .b { color: var(--w-accent); }
.cx-ko { order: 3; margin: 22px var(--gut) 0; font-size: 19px; line-height: 1.45; letter-spacing: -.03em; max-width: 15em; }
.cx-fig-wrap { order: 4; margin: 28px var(--gut) 0; width: 120px; } .cx-fig { width: 100%; height: auto; overflow: visible; }
.cx-spec { order: 5; margin: 22px var(--gut) 0; border-collapse: collapse; width: calc(100% - 2 * var(--gut)); font-size: 13px; }
.cx-spec th, .cx-spec td { text-align: left; padding: 10px 0; border-top: 1px solid color-mix(in srgb, var(--w-accent) 28%, transparent); font-weight: 400; vertical-align: middle; }
.cx-spec th { width: 84px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; } .cx-spec tr:last-child th, .cx-spec tr:last-child td { border-bottom: 1px solid color-mix(in srgb, var(--w-accent) 28%, transparent); }
.cx-go { order: 6; margin-left: var(--gut); }
.cx-light { fill: #fff; } .cx-frame { fill: none; stroke: var(--w-accent); stroke-width: .6; }
.cx-pane { fill: color-mix(in srgb, var(--w-accent) 16%, #cfe0dd); stroke: var(--w-accent); stroke-width: .5; stroke-opacity: .55; transition: transform 1.5s var(--ease); }
.js .cx-fig-wrap:not(.in) .cx-pane { transform: translate(var(--dx), var(--dy)); }
.js .cx-fig-wrap.in .cx-pane { transform: none; }
@media (min-width: 900px) {
  .wk-clarte { --sh: clamp(700px, min(calc(50vw + 180px), calc(100svh - var(--hd))), 980px); --ph: calc(var(--sh) - 180px); height: var(--sh); }
  .cx-grid { display: block; height: 100%; padding: 0; }
  .gl { display: block; } .g1 { left: var(--gut); top: 0; bottom: 0; width: 1px; } .g2 { left: calc(100% - var(--ph)); top: 0; bottom: 0; width: 1px; } .g3 { left: 0; right: 0; top: 90px; height: 1px; } .g4 { left: 0; right: 0; bottom: 90px; height: 1px; }
  .cx-plate { position: absolute; right: 0; top: 90px; height: var(--ph); width: var(--ph); aspect-ratio: 1; }
  .cx-no { display: block; position: absolute; left: calc(var(--gut) + 22px); top: 20px; padding: 0; font-size: 56px; line-height: 1; z-index: 1; }
  .cx-title { position: absolute; left: calc(var(--gut) + 22px); top: 24%; margin: 0; font-size: clamp(80px, 8.4vw, 130px); }
  .cx-ko { position: absolute; left: calc(var(--gut) + 22px); top: calc(24% + clamp(176px, 18.6vw, 288px)); margin: 0; font-size: clamp(17px, 1.4vw, 20px); }
  .cx-fig-wrap { position: absolute; left: calc(var(--gut) + 22px); bottom: 118px; margin: 0; width: 132px; }
  .cx-spec { position: absolute; left: calc(var(--gut) + 22px + 164px); bottom: 118px; margin: 0; width: calc(100% - var(--ph) - var(--gut) - 22px - 164px - 28px); }
  .cx-go { position: absolute; left: calc(var(--gut) + 22px); bottom: 28px; margin: 0; }
}
@media (prefers-reduced-motion: reduce) { .ax-ring, .ax-sym, .cx-pane { animation: none !important; transition: none !important; stroke-dashoffset: 0 !important; opacity: 1 !important; transform: none !important; } }