/* Phase D: creative elevation of The Arc. Loaded after arc.css.
   Principle: composition and light first; glass only where it sits over real contrast. */

:root {
  --sun: rgba(255, 244, 222, .95);
  --candle: rgba(232, 168, 92, .55);
  --night: #081830;
  --navy-deep: #0A1C38;
  --paper: #FBF8F2;
  --oak-1: #C2A27C; --oak-2: #A98965; --oak-3: #8F7152;
  --shadow-warm: 40, 28, 14;
}

/* ---------- Dimensional glass ----------
   Body tint + backdrop blur, a gradient rim (bright top-left, fading bottom-right), an inner top
   highlight, an inner lower glow for thickness, fine grain, and a three-part outer shadow.
   Works at rest; the moving specular light is an optional enhancement (arc.js sets --mx/--my). */
.arc .gd { position: relative; isolation: isolate; border-radius: 26px;
  background: linear-gradient(150deg, rgba(255,255,255,.62) 0%, rgba(252,249,243,.46) 38%, rgba(246,241,233,.40) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(1.7) brightness(1.06); backdrop-filter: blur(22px) saturate(1.7) brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(255,255,255,.25),
    inset 0 -22px 34px -22px rgba(255,255,255,.55),
    0 1px 1px rgba(var(--shadow-warm), .08),
    0 12px 24px -10px rgba(var(--shadow-warm), .28),
    0 46px 80px -34px rgba(var(--shadow-warm), .5); }
.arc .gd::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2;
  background: linear-gradient(145deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.35) 22%, rgba(255,255,255,.06) 55%, rgba(255,255,255,.4) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.arc .gd::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; opacity: .9;
  background:
    radial-gradient(140px 90px at var(--mx, 18%) var(--my, 0%), rgba(255,255,255,.55), rgba(255,255,255,0) 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light; transition: opacity var(--d-med); }
.arc .gd > * { position: relative; z-index: 3; }
/* Dark glass, for the candle-lit Shabbos room and over photographs */
.arc .gd--dark { color: var(--ivory);
  background: linear-gradient(150deg, rgba(40,56,86,.55) 0%, rgba(14,28,54,.45) 45%, rgba(10,22,44,.55) 100%);
  -webkit-backdrop-filter: blur(24px) saturate(1.5) brightness(.95); backdrop-filter: blur(24px) saturate(1.5) brightness(.95);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -24px 40px -24px rgba(255,214,160,.18), 0 2px 2px rgba(0,0,0,.2), 0 18px 30px -12px rgba(0,0,0,.45), 0 60px 100px -40px rgba(0,0,0,.65); }
.arc .gd--dark::before { background: linear-gradient(145deg, rgba(255,236,206,.7) 0%, rgba(255,255,255,.18) 25%, rgba(255,255,255,.04) 60%, rgba(255,214,160,.3) 100%); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .arc .gd { background: rgba(251,249,245,.94); }
  .arc .gd--dark { background: rgba(14,28,54,.94); }
}

/* ---------- Floating glass navigation island ---------- */
.arc .site-header { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 0 !important; box-shadow: none !important; padding: 14px 16px 0; pointer-events: none; }
.arc .site-header .bar { pointer-events: auto; border-radius: 999px; height: 68px; max-width: 1360px !important; padding: 0 12px 0 26px !important; }
.arc .site-header .bar.gd { background: linear-gradient(150deg, rgba(255,255,255,.7), rgba(250,246,239,.55)); }
.arc .site-header.is-scrolled .bar { box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 1px 1px rgba(var(--shadow-warm),.08), 0 16px 30px -12px rgba(var(--shadow-warm),.32), 0 40px 70px -40px rgba(var(--shadow-warm),.45); }
.arc .brand img { height: 46px; }
.arc .mega.glass { background: none; border: 0; }
.arc .mega { box-shadow: none; }
.arc .header-actions .btn--small { min-height: 46px; padding: 0 22px; }

/* ---------- Environment 1: arrival, morning light on stone ---------- */
.arc .arrive { position: relative; overflow: clip; margin-top: -82px; padding: 132px 0 120px;
  background:
    radial-gradient(70% 60% at 8% 0%, var(--sun) 0%, rgba(255,244,222,0) 70%),
    radial-gradient(60% 70% at 100% 100%, rgba(199,165,122,.22), rgba(199,165,122,0) 70%),
    linear-gradient(180deg, #F3EEE6 0%, #ECE5DA 100%); }
/* A tall arched window of light falling across the stone, the Arc motif as light, not decoration */
.arc .arrive .window-light { position: absolute; left: -6%; top: -4%; width: 46%; height: 118%; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,250,238,.0) 0%, rgba(255,250,238,.55) 42%, rgba(255,250,238,0) 70%);
  -webkit-mask: radial-gradient(60% 34% at 50% 34%, #000 99%, transparent 100%) top / 100% 100% no-repeat, linear-gradient(#000, #000) bottom / 100% 66% no-repeat;
          mask: radial-gradient(60% 34% at 50% 34%, #000 99%, transparent 100%) top / 100% 100% no-repeat, linear-gradient(#000, #000) bottom / 100% 66% no-repeat;
  transform: skewX(-14deg); opacity: .65; filter: blur(14px); }
.arc .arrive .grid { position: relative; display: grid; grid-template-columns: 5fr 7fr; gap: 40px; align-items: center; }
.arc .arrive h1 { font-size: clamp(54px, 6vw, 96px); line-height: .96; letter-spacing: -.02em; margin: 26px 0 26px; }
.arc .arrive h1 .soft { color: var(--bronze); }
.arc .arrive .lede { font-size: 19.5px; max-width: 27em; margin-bottom: 34px; }
.arc .two-tone { color: var(--ink-3); }
.arc .two-tone b { color: var(--navy); font-weight: 600; }

/* Living collage: few, strong positions; real overlap and depth */
.arc .collage { position: relative; height: 640px; }
.arc .collage .m { position: absolute; overflow: hidden; background: #2a2118; box-shadow: 0 2px 4px rgba(var(--shadow-warm),.12), 0 30px 50px -24px rgba(var(--shadow-warm),.55), 0 70px 110px -60px rgba(var(--shadow-warm),.6); }
.arc .collage .m img, .arc .collage .m video { width: 100%; height: 100%; object-fit: cover; display: block; }
.arc .collage .m--arch { left: 22%; top: 0; width: 46%; height: 88%; border-radius: 999px 999px 18px 18px / 260px 260px 18px 18px; }
.arc .collage .m--wide { left: 0; bottom: 4%; width: 44%; aspect-ratio: 16 / 11; border-radius: 18px; z-index: 2; }
.arc .collage .m--tall { right: 0; top: 10%; width: 30%; aspect-ratio: 4 / 5; border-radius: 18px; z-index: 1; }
.arc .collage .m--small { right: 4%; bottom: 0; width: 26%; aspect-ratio: 1; border-radius: 18px; z-index: 2; }
.arc .collage .m::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 1px rgba(255,255,255,.08); }
.arc .collage .chip-g { position: absolute; left: 12px; bottom: 12px; z-index: 4; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 999px; font: 600 12.5px/1 var(--text); color: var(--navy); }
.arc .collage .chip-g .dot { width: 7px; height: 7px; border-radius: 50%; background: #C2452F; box-shadow: 0 0 0 3px rgba(194,69,47,.18); }
.arc .collage-wrap { position: relative; }
.arc .collage-wrap .shabbat { position: absolute; left: 6%; top: 50%; z-index: 5; width: 300px; padding: 22px 22px 18px; border-radius: 26px; transform: translateY(-46%); }
/* Media slots: replaceable placeholders for The Shul's own photos/video. Rich light so glass is tested over real contrast. */
.arc .slot { position: relative; width: 100%; height: 100%; display: grid; place-items: end start; padding: 16px;
  background: radial-gradient(70% 60% at 30% 25%, rgba(255,214,150,.9), rgba(255,214,150,0) 60%), radial-gradient(80% 70% at 80% 90%, rgba(120,60,30,.85), rgba(120,60,30,0) 70%), linear-gradient(160deg, #B9884F 0%, #6E4524 55%, #3A2414 100%); }
.arc .slot--cool { background: radial-gradient(70% 60% at 70% 20%, rgba(220,232,245,.9), rgba(220,232,245,0) 60%), radial-gradient(80% 70% at 10% 90%, rgba(30,50,90,.9), rgba(30,50,90,0) 70%), linear-gradient(160deg, #7F95B4 0%, #2E4468 60%, #13233F 100%); }
.arc .slot--warm2 { background: radial-gradient(60% 50% at 70% 30%, rgba(255,226,180,.95), rgba(255,226,180,0) 60%), radial-gradient(90% 80% at 20% 100%, rgba(150,70,40,.8), rgba(150,70,40,0) 70%), linear-gradient(200deg, #D3A26A 0%, #8A5532 60%, #4A2B18 100%); }
.arc .slot::before { content: ""; position: absolute; inset: 0; opacity: .35; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.arc .slot .slot-label { position: relative; z-index: 1; display: inline-flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 14px; font: 500 12.5px/1.3 var(--text); color: var(--navy); }
.arc .slot .slot-label strong { font: 400 17px/1.15 var(--display); color: var(--navy); }
.arc .slot .play { position: absolute; left: 50%; top: 46%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; display: grid; place-items: center; z-index: 2; }
.arc .slot .play::before { content: ""; margin-left: 5px; border-left: 16px solid var(--navy); border-top: 10px solid transparent; border-bottom: 10px solid transparent; position: relative; z-index: 4; }

/* Arrival reveal: one orchestrated sequence */
.arc .collage .m { animation: d-rise 1.1s var(--ease) both; }
.arc .collage .m--arch { animation-delay: .15s; } .arc .collage .m--tall { animation-delay: .3s; } .arc .collage .m--wide { animation-delay: .42s; } .arc .collage .m--small { animation-delay: .54s; }
.arc .collage-wrap .shabbat { animation: d-float 1s .8s var(--ease) both; }
@keyframes d-rise { from { opacity: 0; transform: translateY(26px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes d-float { from { opacity: 0; transform: translateY(calc(-46% + 18px)); } to { opacity: 1; transform: translateY(-46%); } }

/* ---------- Environment 2: this week, a gallery wall of notices ---------- */
.arc .wall { position: relative; padding: 120px 0 130px;
  background: radial-gradient(80% 60% at 15% 0%, rgba(255,250,240,.9), rgba(255,250,240,0) 60%), linear-gradient(180deg, #ECE5DA, #E7DFD2); }
.arc .wall .head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 30px; margin-bottom: 56px; }
.arc .wall .hang { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 56px 44px; align-items: start; }
.arc .notice { display: grid; gap: 18px; text-decoration: none; }
.arc .notice .frame { position: relative; padding: 14px; border-radius: 4px; background: linear-gradient(145deg, #FFFDF8, #F3EDE2);
  box-shadow: inset 0 0 0 1px rgba(110,84,50,.12), 0 1px 1px rgba(var(--shadow-warm),.1), 0 14px 18px -12px rgba(var(--shadow-warm),.35), 0 50px 60px -40px rgba(var(--shadow-warm),.55), 18px 40px 60px -40px rgba(var(--shadow-warm),.35);
  transition: transform var(--d-med) var(--ease), box-shadow var(--d-med) var(--ease); }
.arc .notice .frame::before { content: ""; position: absolute; left: 50%; top: -6px; width: 44px; height: 6px; margin-left: -22px; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--oak-1), var(--oak-3)); box-shadow: 0 1px 0 rgba(255,255,255,.3) inset; }
.arc .notice img { display: block; width: 100%; aspect-ratio: 17 / 22; object-fit: cover; object-position: top; border-radius: 1px; }
.arc .notice:hover .frame { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(110,84,50,.12), 0 2px 2px rgba(var(--shadow-warm),.1), 0 24px 26px -14px rgba(var(--shadow-warm),.38), 0 70px 80px -46px rgba(var(--shadow-warm),.6), 22px 52px 70px -44px rgba(var(--shadow-warm),.4); }
.arc .notice .label { display: grid; gap: 6px; padding-left: 2px; }
.arc .notice .label .when { font: 600 12.5px/1 var(--text); letter-spacing: .06em; color: var(--bronze); }
.arc .notice .label h3 { font-size: 24px; line-height: 1.15; }
.arc .notice .label p { font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
.arc .notice.is-past { display: none; }
.arc .notice--feature .label h3 { font-size: 32px; }
.arc .weekly-sheet { position: relative; padding: 28px 30px 24px; border-radius: 6px; background: var(--paper);
  box-shadow: inset 0 0 0 1px rgba(110,84,50,.12), 0 1px 1px rgba(var(--shadow-warm),.1), 0 30px 50px -36px rgba(var(--shadow-warm),.5); }
.arc .weekly-sheet h3 { font-size: 24px; margin-bottom: 4px; }
.arc .weekly-sheet ul { list-style: none; margin: 14px 0 0; padding: 0; }
.arc .weekly-sheet li { display: grid; grid-template-columns: 92px 1fr auto; gap: 12px; padding: 11px 0; border-top: 1px solid rgba(110,84,50,.16); font-size: 14.5px; }
.arc .weekly-sheet li b { color: var(--navy); font-weight: 600; }
.arc .weekly-sheet li span:last-child { color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* Curved threshold between environments (the arch, as architecture) */
.arc .threshold { position: relative; height: 120px; margin-top: -120px; z-index: 2; pointer-events: none; }
.arc .threshold svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- Environment 3: Shabbos, a candle-lit room ---------- */
.arc .shabbos-room { position: relative; overflow: clip; padding: 110px 0 140px; color: var(--ivory);
  background:
    radial-gradient(40% 50% at 78% 46%, rgba(240,170,90,.42), rgba(240,170,90,0) 70%),
    radial-gradient(22% 30% at 70% 40%, rgba(255,214,160,.5), rgba(255,214,160,0) 70%),
    radial-gradient(70% 80% at 0% 100%, rgba(30,60,110,.6), rgba(30,60,110,0) 70%),
    linear-gradient(180deg, #0B1E3B 0%, var(--night) 100%); }
.arc .shabbos-room .he-mark { position: absolute; right: 4%; top: 6%; font: 400 clamp(160px, 22vw, 340px)/1 var(--hebrew); color: rgba(255,224,180,.06); pointer-events: none; user-select: none; }
.arc .shabbos-room .grid { position: relative; display: grid; grid-template-columns: 6fr 5fr; gap: 80px; align-items: center; }
.arc .shabbos-room h2 { color: var(--ivory); font-size: clamp(44px, 5vw, 76px); line-height: 1; margin: 22px 0 24px; }
.arc .shabbos-room .kicker { color: #E2BE8C; }
.arc .shabbos-room p { color: rgba(251,249,245,.8); font-size: 18px; max-width: 30em; }
.arc .shabbos-room .ways-d { margin-top: 34px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.arc .shabbos-room .ways-d a { display: flex; justify-content: space-between; align-items: center; padding: 16px 2px; border-top: 1px solid rgba(255,236,206,.18); text-decoration: none; color: var(--ivory); font-weight: 500; transition: color var(--d-fast), padding var(--d-med) var(--ease); }
.arc .shabbos-room .ways-d a:hover { color: #FFE2B8; padding-left: 8px; }
.arc .instrument { padding: 30px 30px 24px; border-radius: 30px; }
.arc .instrument .top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.arc .instrument h3 { color: var(--ivory); font-size: 28px; }
.arc .instrument .parsha { font-family: var(--hebrew); color: #F1CF9E; font-size: 20px; }
.arc .instrument .candles { display: flex; align-items: baseline; gap: 14px; margin: 18px 0 18px; padding: 18px 0; border-top: 1px solid rgba(255,236,206,.18); border-bottom: 1px solid rgba(255,236,206,.18); }
.arc .instrument .candles b { font: 400 54px/1 var(--display); color: #FFE7C2; font-variant-numeric: tabular-nums; }
.arc .instrument .candles span { font-size: 14.5px; color: rgba(251,249,245,.75); }
.arc .instrument dl { display: grid; grid-template-columns: 1fr auto; margin: 0; }
.arc .instrument dt, .arc .instrument dd { padding: 8px 0; font-size: 15px; }
.arc .instrument dt { color: rgba(251,249,245,.78); }
.arc .instrument dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; color: var(--ivory); font-weight: 600; }
.arc .instrument .foot { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; font-size: 13px; color: rgba(251,249,245,.6); }
.arc .instrument .foot a { color: var(--ivory); }
.arc .instrument .illus { color: rgba(251,249,245,.62); }

/* ---------- Environment 4: learning and programs, an editorial index ---------- */
.arc .index-d { position: relative; padding: 130px 0; background: var(--paper); }
.arc .index-d .grid { display: grid; grid-template-columns: 5fr 7fr; gap: 72px; align-items: start; }
.arc .index-d .preview { position: sticky; top: 120px; }
.arc .index-d .preview .frame-arch { position: relative; aspect-ratio: 4 / 5; border-radius: 999px 999px 16px 16px / 230px 230px 16px 16px; overflow: hidden; background: #2a2118; box-shadow: 0 30px 60px -30px rgba(var(--shadow-warm),.55); }
.arc .index-d .preview img { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--d-med) var(--ease), transform var(--d-slow) var(--ease); }
.arc .index-d .preview .cap { margin-top: 14px; }
.arc .index-d h2 { margin-bottom: 18px; }
.arc .index-d .rows { margin-top: 30px; border-bottom: 1px solid var(--line); }
.arc .index-d .rows a { display: grid; grid-template-columns: 1fr auto; gap: 4px 24px; align-items: baseline; padding: 22px 4px 20px; border-top: 1px solid var(--line); text-decoration: none; transition: background var(--d-med) var(--ease), padding var(--d-med) var(--ease); }
.arc .index-d .rows a:hover, .arc .index-d .rows a:focus-visible { padding-left: 14px; background: linear-gradient(90deg, rgba(199,165,122,.14), rgba(199,165,122,0)); }
.arc .index-d .rows strong { font: 400 clamp(26px, 2.6vw, 36px)/1.1 var(--display); color: var(--navy); }
.arc .index-d .rows span { font-size: 14.5px; color: var(--ink-3); text-align: right; }
.arc .index-d .rows .he { font-size: 16px; color: var(--bronze); margin-left: 10px; }

/* ---------- Environment 5: visiting, a welcome card on stone ---------- */
.arc .welcome-d { position: relative; padding: 130px 0; background: radial-gradient(60% 80% at 100% 0%, rgba(255,250,240,.9), rgba(255,250,240,0) 60%), #ECE5DA; }
.arc .welcome-d .grid { display: grid; grid-template-columns: 6fr 5fr; gap: 80px; align-items: center; }
.arc .card-paper { position: relative; padding: 38px 38px 30px; border-radius: 8px; background: linear-gradient(160deg, #FFFDF9, #F6F0E6);
  box-shadow: inset 0 0 0 1px rgba(110,84,50,.1), 0 2px 2px rgba(var(--shadow-warm),.08), 0 26px 30px -20px rgba(var(--shadow-warm),.35), 26px 60px 80px -50px rgba(var(--shadow-warm),.45); }
.arc .card-paper .stamp { position: absolute; right: 28px; top: 26px; width: 96px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; text-align: center; font: 400 15px/1.2 var(--hebrew); color: var(--bronze);
  box-shadow: inset 0 0 0 1px rgba(122,90,50,.45), inset 0 0 0 6px var(--paper), inset 0 0 0 7px rgba(122,90,50,.3); }
.arc .card-paper h3 { font-size: 26px; margin-bottom: 18px; max-width: 12em; }
.arc .card-paper ul { list-style: none; margin: 0; padding: 0; }
.arc .card-paper li { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 13px 0; border-top: 1px dashed rgba(110,84,50,.25); font-size: 15.5px; }
.arc .card-paper li small { display: block; font-size: 13px; color: var(--ink-3); }
.arc .card-paper li span:last-child { font-variant-numeric: tabular-nums; color: var(--ink-2); }

/* ---------- Moments rail (bleeds off the edge) ---------- */
.arc .moments-d { padding: 120px 0 40px; background: var(--stone); overflow: clip; }
.arc .moments-d .rail { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--gutter), calc((100vw - 1320px) / 2 + var(--gutter))); padding: 10px max(var(--gutter), calc((100vw - 1320px) / 2 + var(--gutter))) 30px; scrollbar-width: none; }
.arc .moments-d .rail::-webkit-scrollbar { display: none; }
.arc .moments-d .rail > * { flex: 0 0 auto; scroll-snap-align: start; height: 420px; border-radius: 18px; overflow: hidden; position: relative; box-shadow: 0 30px 50px -30px rgba(var(--shadow-warm),.55); text-decoration: none; }
.arc .moments-d .rail img { height: 100%; width: auto; max-width: none; display: block; object-fit: cover; }
.arc .moments-d .rail .w-4-5 { aspect-ratio: 4 / 5; } .arc .moments-d .rail .w-16-10 { aspect-ratio: 16 / 10; } .arc .moments-d .rail .w-1 { aspect-ratio: 1; }
.arc .moments-d .rail .w-4-5 img, .arc .moments-d .rail .w-16-10 img, .arc .moments-d .rail .w-1 img { width: 100%; }
.arc .moments-d figcaption { position: absolute; left: 14px; bottom: 14px; padding: 9px 14px; border-radius: 12px; font-size: 13px; color: var(--navy); }

/* ---------- Belonging diptych with real materials ---------- */
.arc .belong-d { padding: 90px 0 130px; background: var(--stone); }
.arc .belong-d .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.arc .belong-d .leaf { position: relative; overflow: clip; border-radius: 30px; padding: 54px 50px 46px; min-height: 380px; display: flex; flex-direction: column; }
.arc .belong-d .leaf h3 { font-size: clamp(34px, 3.2vw, 46px); margin-bottom: 14px; }
.arc .belong-d .leaf p { max-width: 26em; margin-bottom: 30px; }
.arc .belong-d .leaf .actions { margin-top: auto; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.arc .belong-d .leaf--paper { background: linear-gradient(160deg, #FFFDF8, #F3ECE0); box-shadow: inset 0 0 0 1px rgba(110,84,50,.1), 0 30px 60px -40px rgba(var(--shadow-warm),.55); }
.arc .belong-d .leaf--paper::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16px; background: repeating-linear-gradient(90deg, var(--oak-1) 0 9px, var(--oak-2) 9px 10px, #CBAE8B 10px 17px, var(--oak-3) 17px 18px); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.arc .belong-d .leaf--night { color: var(--ivory); background: radial-gradient(90% 80% at 85% 10%, rgba(240,170,90,.35), rgba(240,170,90,0) 60%), linear-gradient(170deg, #12305A, var(--night)); box-shadow: 0 40px 70px -40px rgba(8,24,48,.75); }
.arc .belong-d .leaf--night h3 { color: var(--ivory); }
.arc .belong-d .leaf--night p { color: rgba(251,249,245,.8); }
.arc .belong-d .leaf--night .ring { position: absolute; right: -80px; top: -80px; width: 300px; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(226,190,140,.5); box-shadow: 0 0 0 26px transparent, 0 0 0 27px rgba(226,190,140,.22), 0 0 0 62px transparent, 0 0 0 63px rgba(226,190,140,.12); }

/* ---------- Film variant hero ---------- */
.arc .film { position: relative; margin-top: -82px; padding: 110px var(--gutter) 70px; background: linear-gradient(180deg, #F3EEE6, #ECE5DA); }
.arc .film .frame { position: relative; max-width: 1360px; margin: 0 auto; aspect-ratio: 16 / 8.2; border-radius: 34px; overflow: hidden; box-shadow: 0 2px 4px rgba(var(--shadow-warm),.12), 0 50px 90px -50px rgba(var(--shadow-warm),.7); }
.arc .film .frame .slot { position: absolute; inset: 0; }
.arc .film .frame .scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,18,36,.72) 0%, rgba(8,18,36,.35) 42%, rgba(8,18,36,0) 70%); }
.arc .film .copy { position: absolute; left: 5%; bottom: 14%; z-index: 2; max-width: 560px; color: var(--ivory); }
.arc .film .copy h1 { color: var(--ivory); font-size: clamp(48px, 5.4vw, 86px); line-height: .98; margin: 18px 0 18px; }
.arc .film .copy .lede { color: rgba(251,249,245,.86); margin-bottom: 28px; }
.arc .film .controls { position: absolute; right: 3%; bottom: 6%; z-index: 3; display: flex; align-items: center; gap: 6px; padding: 8px; border-radius: 999px; }
.arc .film .controls button { height: 40px; padding: 0 16px; border-radius: 999px; border: 0; background: transparent; color: var(--ivory); font: 600 13.5px/1 var(--text); cursor: pointer; }
.arc .film .controls button[aria-pressed="true"] { background: rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.arc .film .controls .pp { width: 40px; padding: 0; display: grid; place-items: center; }
.arc .film .controls .pp::before { content: ""; width: 12px; height: 14px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; box-sizing: border-box; }

/* ---------- Families (interior) ---------- */
.arc .opener { position: relative; margin-top: -82px; padding: 140px 0 90px; overflow: clip; background: radial-gradient(60% 70% at 0% 0%, var(--sun), rgba(255,244,222,0) 65%), linear-gradient(180deg, #F3EEE6, #ECE5DA); }
.arc .opener .grid { display: grid; grid-template-columns: 6fr 6fr; gap: 56px; align-items: center; }
.arc .opener h1 { font-size: clamp(50px, 5.6vw, 88px); line-height: .98; margin: 20px 0 22px; }
.arc .opener .pair { position: relative; height: 520px; }
.arc .opener .pair .m { position: absolute; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(var(--shadow-warm),.6); }
.arc .opener .pair .m img { width: 100%; height: 100%; object-fit: cover; }
.arc .opener .pair .a { right: 0; top: 0; width: 64%; height: 92%; border-radius: 999px 999px 18px 18px / 240px 240px 18px 18px; }
.arc .opener .pair .b { left: 0; bottom: 0; width: 46%; aspect-ratio: 4 / 3; border-radius: 18px; z-index: 2; }
.arc .opener .pair .price { position: absolute; left: 4%; top: 6%; z-index: 3; padding: 18px 20px; width: 230px; }
.arc .opener .pair .price strong { display: block; font: 400 30px/1 var(--display); color: var(--navy); }
.arc .opener .pair .price span { font-size: 13.5px; color: var(--ink-2); }
.arc .spread { padding: 110px 0; }
.arc .spread .grid { display: grid; grid-template-columns: 5fr 7fr; gap: 72px; align-items: start; }
.arc .spread.flip .grid { grid-template-columns: 7fr 5fr; }
.arc .spread.flip .grid > :first-child { order: 2; }
.arc .spread h2 { font-size: clamp(36px, 3.6vw, 54px); line-height: 1.04; margin: 18px 0 18px; }
.arc .spread .facts-line { display: flex; flex-wrap: wrap; gap: 26px 40px; margin: 26px 0 28px; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.arc .spread .facts-line div strong { display: block; font: 400 22px/1.15 var(--display); color: var(--navy); }
.arc .spread .facts-line div span { font-size: 14px; color: var(--ink-3); }
.arc .spread .poster { position: relative; justify-self: end; width: min(400px, 100%); }
.arc .program-list { margin: 0; padding: 0; list-style: none; }
.arc .program-list li { display: grid; grid-template-columns: 1fr auto; gap: 4px 20px; padding: 22px 0; border-top: 1px solid var(--line); }
.arc .program-list li:last-child { border-bottom: 1px solid var(--line); }
.arc .program-list h3 { font-size: 27px; }
.arc .program-list .who { font: 600 13px/1.4 var(--text); color: var(--bronze); text-align: right; }
.arc .program-list p { grid-column: 1 / -1; color: var(--ink-2); font-size: 15.5px; max-width: 40em; }
.arc .program-list .t { grid-column: 1 / -1; font-size: 14px; font-weight: 600; color: var(--navy); }
.arc .board { position: relative; padding: 110px 0 120px; color: var(--ivory); overflow: clip;
  background: radial-gradient(50% 60% at 85% 20%, rgba(240,170,90,.3), rgba(240,170,90,0) 70%), linear-gradient(180deg, #0B1E3B, var(--night)); }
.arc .board h2 { color: var(--ivory); }
.arc .board .muted { color: rgba(251,249,245,.75); }
.arc .board .sheets { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 44px; }
.arc .board table { width: 100%; border-collapse: collapse; font-size: 15px; }
.arc .board caption { text-align: left; font: 400 26px/1.2 var(--display); color: var(--ivory); padding-bottom: 14px; }
.arc .board th, .arc .board td { text-align: left; padding: 11px 10px 11px 0; border-top: 1px solid rgba(255,236,206,.16); vertical-align: top; }
.arc .board th { width: 100px; color: #F1CF9E; font-weight: 600; }
.arc .board td { color: rgba(251,249,245,.88); }
.arc .board td.t { white-space: nowrap; text-align: right; padding-right: 0; font-variant-numeric: tabular-nums; color: var(--ivory); }
.arc .board .gd--dark { padding: 28px 28px 18px; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .arc .collage .m, .arc .collage-wrap .shabbat { animation: none !important; }
  .arc .collage-wrap .shabbat { transform: translateY(-46%); }
}

/* ---------- Tablet ---------- */
@media (max-width: 1180px) {
  .arc .site-header .bar { padding: 0 10px 0 20px !important; }
  .arc .arrive .grid, .arc .shabbos-room .grid, .arc .index-d .grid, .arc .welcome-d .grid, .arc .opener .grid, .arc .spread .grid, .arc .spread.flip .grid { grid-template-columns: 1fr; gap: 48px; }
  .arc .spread.flip .grid > :first-child { order: 0; }
  .arc .index-d .preview { display: none; }
  .arc .wall .hang { grid-template-columns: 1fr 1fr; }
}

/* ---------- Phone ---------- */
@media (max-width: 760px) {
  .arc .site-header { padding: 10px 10px 0; }
  .arc .site-header .bar { height: 60px; padding: 0 8px 0 16px !important; gap: 10px; }
  .arc .brand img { height: 38px; }
  .arc .arrive { padding: 104px 0 80px; }
  .arc .arrive h1 { font-size: 48px; margin: 18px 0 18px; }
  .arc .arrive .lede { font-size: 17px; margin-bottom: 26px; }
  .arc .arrive .actions .btn { flex: 1 1 100%; }
  .arc .collage { height: 470px; margin: 0 -6px; }
  .arc .collage .m--arch { left: 18%; width: 64%; height: 78%; border-radius: 999px 999px 16px 16px / 200px 200px 16px 16px; }
  .arc .collage .m--wide { width: 56%; bottom: 0; }
  .arc .collage .m--tall { display: none; }
  .arc .collage .m--small { width: 40%; right: 0; bottom: 6%; }
  .arc .collage-wrap .shabbat { position: relative; left: auto; top: auto; transform: none !important; width: auto; margin: -30px 8px 0; animation: none; }
  .arc .collage-wrap { display: flex; flex-direction: column; }
  .arc .wall { padding: 80px 0 90px; }
  .arc .wall .head { grid-template-columns: 1fr; gap: 14px; margin-bottom: 34px; }
  .arc .wall .hang { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 22px; margin: 0 calc(-1 * var(--gutter)); padding: 8px var(--gutter) 30px; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .arc .wall .hang::-webkit-scrollbar { display: none; }
  .arc .wall .hang > * { flex: 0 0 74%; scroll-snap-align: start; }
  .arc .wall .hang > .weekly-sheet { flex-basis: 88%; }
  .arc .shabbos-room { padding: 80px 0 90px; }
  .arc .shabbos-room .ways-d { grid-template-columns: 1fr; }
  .arc .instrument .candles b { font-size: 44px; }
  .arc .index-d, .arc .welcome-d { padding: 84px 0; }
  .arc .index-d .rows a { grid-template-columns: 1fr; }
  .arc .index-d .rows span { text-align: left; }
  .arc .card-paper { padding: 30px 22px 22px; }
  .arc .card-paper .stamp { width: 72px; right: 16px; top: 16px; font-size: 12px; }
  .arc .moments-d .rail > * { height: 300px; }
  .arc .belong-d .grid { grid-template-columns: 1fr; }
  .arc .belong-d .leaf { padding: 38px 26px 34px; min-height: 0; }
  .arc .film { padding: 90px 10px 40px; }
  .arc .film .frame { aspect-ratio: 4 / 5.6; border-radius: 26px; }
  .arc .film .scrim { background: linear-gradient(0deg, rgba(8,18,36,.8) 0%, rgba(8,18,36,.3) 55%, rgba(8,18,36,0) 75%) !important; }
  .arc .film .copy { left: 22px; right: 22px; bottom: 96px; }
  .arc .film .copy h1 { font-size: 44px; }
  .arc .film .controls { left: 12px; right: 12px; bottom: 14px; overflow-x: auto; }
  .arc .opener { padding: 104px 0 60px; }
  .arc .opener .pair { height: 380px; }
  .arc .opener .pair .price { width: 190px; }
  .arc .spread, .arc .board { padding: 80px 0; }
  .arc .board .sheets { grid-template-columns: 1fr; }
}

/* Glass must not override the positioning of floating panels */
.arc .mega.gd { position: absolute; }
.arc .sheet-panel.gd { position: fixed; }
.arc .play.gd { position: absolute; }
.arc .chip-g.gd, .arc .moments-d figcaption.gd { position: absolute; }
/* Arrows stay on the label in the program index */
.arc .index-d .rows a.ext::after { display: none; }
.arc .index-d .rows a.ext strong::after { content: ""; display: inline-block; width: .42em; height: .42em; margin-left: .3em; vertical-align: .35em; background: currentColor; opacity: .4;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 1h7v7M11 1 1 11' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 1h7v7M11 1 1 11' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat; }
/* Tighter collage: every tile touches or overlaps the arch */
.arc .collage .m--arch { left: 19%; width: 49%; height: 90%; }
.arc .collage .m--tall { right: 0; top: 4%; width: 34%; }
.arc .collage .m--small { right: 5%; bottom: 0; width: 28%; }
.arc .collage .m--wide { left: 0; bottom: 6%; width: 42%; }
/* Denser glass where small text crosses a busy photograph */
.arc .collage-wrap .shabbat { background: linear-gradient(150deg, rgba(255,255,255,.82) 0%, rgba(252,249,243,.72) 45%, rgba(246,241,233,.68) 100%); }
@media (max-width: 760px) {
  .arc .collage { height: 430px; margin: 4px 0 0; }
  .arc .collage .m--arch { left: 0; top: 0; width: 72%; height: 100%; border-radius: 999px 999px 16px 16px / 170px 170px 16px 16px; }
  .arc .collage .m--tall { display: block; right: 0; top: 14%; width: 44%; z-index: 2; }
  .arc .collage .m--wide, .arc .collage .m--small { display: none; }
  .arc .collage-wrap .shabbat { margin: -46px 6px 0; }
  .arc .threshold { height: 56px; margin-top: -56px; }
}
/* Families: framed posters on the spread, sub-nav glass placement */
.arc .spread .poster { width: min(380px, 100%); justify-self: end; align-self: center; }
.arc .subnav.gd { position: sticky; top: 96px; z-index: 30; margin: -28px auto 0; width: max-content; max-width: calc(100% - 2 * var(--gutter)); display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.arc .subnav .chip { box-shadow: none; }
.arc .belong-d .leaf--night { max-width: none; }
@media (max-width: 760px) { .arc .subnav.gd { top: 80px; } .arc .spread .poster { justify-self: center; width: 78%; } }
@media (min-width: 1181px) { .arc .spread .poster { position: sticky; top: 150px; align-self: start; } }