/* Phase D2: cinematic panorama + section contrast + Families density. Loaded after arc-d.css.
   Five adjoining windows graded as one image: shared warm light from above, dark seams lit by a
   bronze hairline, a falloff that carries the headline, and a dimensional glass ribbon. Each pane is a
   replaceable media slot (data-slot); posters are still photographs until The Shul's video arrives. */
.arc .cine { position: relative; margin-top: -82px; height: min(100svh, 940px); min-height: 680px; overflow: clip; color: var(--ivory); background: #120c07;
  border-bottom-left-radius: 50% 56px; border-bottom-right-radius: 50% 56px; box-shadow: 0 40px 60px -40px rgba(40,28,14,.6); z-index: 1; }
.arc .cine .strip { position: absolute; inset: 0; display: grid; grid-template-columns: 1.1fr 1.5fr 1fr 1.2fr .95fr; gap: 3px; background: linear-gradient(180deg, #3b2814, #1a1209); }
.arc .cine .pane { position: relative; margin: 0; overflow: hidden; animation: cine-in 1.3s var(--ease) both; animation-delay: calc(var(--i) * 90ms); }
.arc .cine .pane img, .arc .cine .pane video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: sepia(.14) saturate(.9) contrast(1.06) brightness(.9);
  transform: scale(1.08); animation: cine-drift 26s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -5s); will-change: transform; }
.arc .cine .pane::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 1px 0 0 rgba(255,214,160,.22), inset -1px 0 0 rgba(0,0,0,.35); background: radial-gradient(120% 90% at 50% 40%, rgba(0,0,0,0) 55%, rgba(10,6,2,.35) 100%); }
@keyframes cine-drift { from { transform: scale(1.08) translate3d(-1.2%, 0, 0); } to { transform: scale(1.14) translate3d(1.2%, -1%, 0); } }
@keyframes cine-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.arc .cine.is-paused .pane img, .arc .cine.is-paused .pane video { animation-play-state: paused; }
.arc .cine .grade { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(90% 60% at 62% -10%, rgba(255,214,150,.30), rgba(255,214,150,0) 60%),
    linear-gradient(180deg, rgba(10,8,6,.62) 0%, rgba(10,8,6,0) 20%, rgba(10,8,6,0) 40%, rgba(10,8,6,.55) 66%, rgba(10,8,6,.9) 100%),
    linear-gradient(90deg, rgba(10,8,6,.6) 0%, rgba(10,8,6,.25) 38%, rgba(10,8,6,0) 60%); }
.arc .cine .pane-tag { position: absolute; left: 14px; top: 108px; z-index: 2; padding: 7px 12px; border-radius: 999px; font: 600 12px/1 var(--text); letter-spacing: .03em; color: rgba(251,249,245,.92); }
.arc .cine .cine-copy { position: absolute; left: 0; right: 0; bottom: 196px; z-index: 3; }
.arc .cine .kicker { color: #F1D3A6; }
.arc .cine h1 { color: var(--ivory); font-size: clamp(56px, 6.6vw, 108px); line-height: .94; letter-spacing: -.02em; margin: 22px 0 24px; max-width: 9.5em; text-shadow: 0 2px 30px rgba(0,0,0,.35); }
.arc .cine h1 em { font-style: normal; color: #EBCB9B; }
.arc .cine .lede { color: rgba(251,249,245,.84); max-width: 31em; font-size: 19px; }
.arc .cine .two-tone b { color: var(--ivory); }
.arc .cine .ribbon-wrap { position: absolute; left: 0; right: 0; bottom: 64px; z-index: 4; }
.arc .cine .ribbon { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 36px; padding: 16px 16px 16px 30px; border-radius: 30px; }
.arc .cine .rib-shabbos h2 { font: 600 13px/1 var(--text); letter-spacing: .05em; color: rgba(251,249,245,.72); display: flex; gap: 10px; align-items: baseline; }
.arc .cine .rib-shabbos h2 .he { font: 400 16px/1 var(--hebrew); letter-spacing: 0; color: #F1CF9E; }
.arc .cine .rib-shabbos p { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.arc .cine .rib-shabbos b { font: 400 42px/1 var(--display); color: #FFE7C2; }
.arc .cine .rib-shabbos p > span { font-size: 13.5px; line-height: 1.35; color: rgba(251,249,245,.8); }
.arc .cine .rib-shabbos .illus { color: rgba(251,249,245,.62); }
.arc .cine .rib-actions { display: flex; gap: 26px; align-items: center; justify-content: center; }
.arc .cine .rib-actions .link { color: var(--ivory); }
.arc .cine .rib-media { display: flex; align-items: center; gap: 12px; font-size: 12.5px; line-height: 1.35; color: rgba(251,249,245,.66); padding-right: 6px; }
.arc .cine .pp { position: relative; width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; color: var(--ivory);
  background: linear-gradient(150deg, rgba(255,255,255,.28), rgba(255,255,255,.08)); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 0 0 1px rgba(255,255,255,.16), 0 8px 18px -8px rgba(0,0,0,.6); transition: transform var(--d-med) var(--ease-spring); }
.arc .cine .pp:active { transform: scale(.92); }
.arc .cine .pp::before { content: ""; width: 12px; height: 14px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; box-sizing: border-box; }
.arc .cine.is-paused .pp::before { width: 0; height: 0; border-right: 0; border-left: 13px solid currentColor; border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 3px; }
@media (prefers-reduced-motion: reduce) { .arc .cine .pane, .arc .cine .pane img { animation: none !important; } .arc .cine .pane img { transform: scale(1.06); } .arc .cine .rib-media .pp { display: none; } }

/* Section contrast: no two neighbours share a ground */
.arc .wall { margin-top: -56px; padding-top: 150px; background: radial-gradient(70% 55% at 12% 10%, rgba(255,250,240,.75), rgba(255,250,240,0) 60%), linear-gradient(180deg, #E3D9C9 0%, #DCCFBC 100%); }
.arc .notice .frame { box-shadow: inset 0 0 0 1px rgba(110,84,50,.14), 0 1px 1px rgba(40,28,14,.14), 0 18px 22px -14px rgba(40,28,14,.45), 0 60px 70px -44px rgba(40,28,14,.6), 24px 50px 70px -44px rgba(40,28,14,.42); }
.arc .welcome-d { background: radial-gradient(60% 80% at 100% 0%, rgba(255,246,228,.6), rgba(255,246,228,0) 60%), linear-gradient(180deg, #D9C6A8, #CFBA99); }
.arc .welcome-d .lede { color: #3E3A33; }
.arc .welcome-d .two-tone b { color: var(--navy); }
.arc .welcome-d .kicker { color: #5F4423; }
.arc .moments-d { background: radial-gradient(60% 70% at 85% 0%, rgba(240,170,90,.18), rgba(240,170,90,0) 60%), linear-gradient(180deg, #0B1E3B, var(--night)); }
.arc .moments-d h2 { color: var(--ivory); }
.arc .moments-d .link { color: var(--ivory); }

/* Families: denser, less repetitive */
.arc .spread { padding: 88px 0; }
.arc .program-list.two { display: grid; grid-template-columns: 1fr 1fr; column-gap: 44px; border-bottom: 1px solid var(--line); }
.arc .program-list.two li:last-child { border-bottom: 0; }

/* Phone: a separate composition */
@media (max-width: 760px) {
  .arc .cine { height: auto; min-height: 0; margin-top: -70px; border-radius: 0 0 50% 50% / 0 0 26px 26px; padding-bottom: 22px; background: linear-gradient(180deg, #120c07, #0d1a30); }
  .arc .cine .strip { position: relative; grid-template-columns: repeat(4, 1fr); grid-template-rows: 124vw 24vw; }
  .arc .cine .pane:first-child { grid-column: 1 / -1; }
  .arc .cine .pane:not(:first-child) .pane-tag { display: none; }
  .arc .cine .pane-tag { top: 86px; }
  .arc .cine .grade { bottom: auto; height: 124vw; }
  .arc .cine .cine-copy { bottom: auto; top: calc(124vw - 236px); }
  .arc .cine h1 { font-size: 46px; margin: 14px 0 0; }
  .arc .cine .lede { display: none; }
  .arc .cine .ribbon-wrap { position: relative; bottom: auto; margin-top: -40px; }
  .arc .cine .ribbon { grid-template-columns: 1fr; gap: 16px; padding: 22px 20px 18px; border-radius: 24px; }
  .arc .cine .rib-actions { justify-content: flex-start; flex-wrap: wrap; gap: 14px 22px; }
  .arc .cine .rib-actions .btn { flex: 1 1 100%; }
  .arc .cine .rib-media { justify-content: space-between; padding-top: 12px; border-top: 1px solid rgba(255,236,206,.16); }
  .arc .wall { margin-top: -26px; padding-top: 100px; }
  .arc .program-list.two { grid-template-columns: 1fr; }
}

/* Temporary single-photograph mode: one contemporary image of The Shul fills the frame until the
   curated community clips arrive; the same grade, ribbon and pause control carry over unchanged. */
.arc .cine--single .strip { grid-template-columns: 1fr; }
.arc .cine--single .pane img { filter: sepia(.08) saturate(.95) contrast(1.08) brightness(.8); }
@media (max-width: 760px) { .arc .cine--single .strip { grid-template-rows: 124vw; } }

/* Fix 1 (creative review): the ceiling photograph is 1280 px and busy where the headline sits. Frame it as a
   lit window on the right two-thirds, feathered into a warm-dark ground, so the Star of David skylight is the
   subject, the photo is shown near its native size (sharper), and the headline reads on calm ground. */
.arc .cine--single { background:
  radial-gradient(55% 75% at 34% 22%, rgba(120,84,44,.42), rgba(120,84,44,0) 70%),
  radial-gradient(40% 60% at 8% 100%, rgba(30,52,96,.55), rgba(30,52,96,0) 70%),
  linear-gradient(160deg, #1d150d 0%, #120d08 55%, #0c1322 100%); }
.arc .cine--single .strip { left: 33%; background: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%); mask-image: linear-gradient(90deg, transparent 0, #000 30%); }
.arc .cine--single .pane img { filter: sepia(.18) saturate(.95) contrast(1.1) brightness(.9); }
.arc .cine--single .pane::after { box-shadow: none; }
.arc .cine--single .grade { background:
  radial-gradient(50% 45% at 62% 18%, rgba(255,214,150,.22), rgba(255,214,150,0) 70%),
  linear-gradient(180deg, rgba(10,8,6,.55) 0%, rgba(10,8,6,0) 18%, rgba(10,8,6,0) 58%, rgba(10,8,6,.7) 100%); }
.arc .cine--single .pane-tag { top: auto; bottom: 186px; left: auto; right: max(var(--gutter), calc((100vw - 1320px) / 2 + var(--gutter))); }
@media (max-width: 760px) {
  .arc .cine--single .strip { left: auto; -webkit-mask-image: none; mask-image: none; }
  .arc .cine--single .pane-tag { bottom: auto; top: 86px; left: 14px; right: auto; }
  .arc .cine--single .grade { background: linear-gradient(180deg, rgba(10,8,6,.55) 0%, rgba(10,8,6,0) 22%, rgba(10,8,6,.2) 48%, rgba(10,8,6,.88) 100%); }
}

/* Fix 2 (creative review): two-column Teens list broke titles into single words and stretched rows.
   Each entry now stacks: label, title, text, time, aligned to the top, at a size the column can hold. */
.arc .program-list.two li { grid-template-columns: 1fr; align-content: start; gap: 6px; }
.arc .program-list.two .who { order: -1; text-align: left; }
.arc .program-list.two h3 { font-size: 25px; line-height: 1.15; }

/* Fix 3 (creative review): the camp panel was half empty with a decorative ring. Its own facts now
   fill the right side as a dimensional glass list (same content, reorganised; nothing invented). */
.arc .belong-d .camp-leaf { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; min-height: 0;
  background: radial-gradient(60% 90% at 88% 10%, rgba(240,170,90,.22), rgba(240,170,90,0) 60%), linear-gradient(160deg, #13284A, #0A1830); }
.arc .belong-d .camp-leaf .actions { margin-top: 8px; }
.arc .camp-facts { list-style: none; margin: 0; padding: 10px 28px; border-radius: 22px; }
.arc .camp-facts li { display: grid; gap: 4px; padding: 18px 0; border-top: 1px solid rgba(255,236,206,.14); }
.arc .camp-facts li:first-child { border-top: 0; }
.arc .camp-facts b { font: 600 12.5px/1.2 var(--text); letter-spacing: .06em; text-transform: uppercase; color: #E2BE8C; }
.arc .camp-facts span { font: 400 22px/1.25 var(--display); color: var(--ivory); }
@media (max-width: 760px) { .arc .belong-d .camp-leaf { grid-template-columns: 1fr; gap: 28px; } .arc .camp-facts { padding: 4px 20px; } .arc .camp-facts span { font-size: 19px; } }

/* Header (director's reference: an edge-to-edge frosted glass band, not a floating pill).
   Over the dark hero it is clear glass with light, letter-spaced type; past the hero it frosts to ivory
   with navy type so it stays legible over light sections. Same markup; CSS plus one class toggle in arc.js. */
/* The frost lives on a pseudo-element, not on an ancestor of the menus: a backdrop-filter (or a view-transition-name)
   on an ancestor would trap the fixed mobile menu and stop it painting. The header keeps no view-transition-name here. */
.arc .site-header { padding: 0; view-transition-name: none; }
.arc .site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6); }
.arc .site-header.over-hero::before { -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); }
.arc .site-header .bar, .arc .site-header .bar.gd { max-width: none !important; margin: 0 !important; border-radius: 0; height: 82px;
  padding: 0 max(var(--gutter), calc((100vw - 1320px) / 2 + var(--gutter))) !important;
  background: linear-gradient(180deg, rgba(251,249,245,.78), rgba(246,241,233,.66));
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom: 1px solid rgba(110,84,50,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 14px 30px -24px rgba(40,28,14,.45);
  transition: background var(--d-med) var(--ease), border-color var(--d-med) var(--ease), box-shadow var(--d-med) var(--ease); }
.arc .site-header .bar.gd::before { display: none; }
.arc .site-header.is-scrolled .bar { box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 18px 34px -22px rgba(40,28,14,.5); }
.arc .site-header .nav-top { font-size: 13.5px; letter-spacing: .12em; text-transform: uppercase; }
.arc .site-header .nav-top .chev { margin-left: 2px; }
.arc .site-header .login { font-size: 13.5px; letter-spacing: .12em; text-transform: uppercase; }

.arc .site-header.over-hero .bar.gd { background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.08));
  border-bottom-color: rgba(255,255,255,.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 10px 30px -20px rgba(0,0,0,.4); }
.arc .site-header.over-hero .brand img { filter: brightness(0) invert(1); }
.arc .site-header.over-hero .nav-top, .arc .site-header.over-hero .login, .arc .site-header.over-hero .sheet > summary { color: #FBF9F5; }
.arc .site-header.over-hero .nav-top:hover, .arc .site-header.over-hero .nav-top[aria-expanded="true"] { background: rgba(255,255,255,.14); }
.arc .site-header.over-hero .nav-top.is-current { color: #FBF9F5; box-shadow: inset 0 -1.5px 0 #FBF9F5; }
.arc .site-header.over-hero .sheet > summary { background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
.arc .site-header.over-hero .btn--small { background: #FBF9F5; color: var(--navy); }
@media (max-width: 760px) { .arc .site-header .bar, .arc .site-header .bar.gd { height: 70px; padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)) !important; } }
/* Menus open inside the header's backdrop root, so they cannot blur the page themselves: give them a near-solid
   frosted ivory so they always read, including over the dark hero. */
.arc .site-header .mega.gd, .arc .site-header .sheet-panel.gd { background: linear-gradient(160deg, #FDFBF7, #F6F1E9);
  -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Visit page: a three-column listing set inline kept its columns on phones (sideways scroll). */
@media (max-width: 760px) { .arc .listing[style] { grid-template-columns: 1fr !important; } }