/* Phase F: editorial craft layer. Loaded last (after arc, arc-d, arc-cine, arc-light).
   A development layer: before production the five arc*.css files must be consolidated into one scoped
   stylesheet for ShulCloud's CSS override (see research/HANDOFF_FEASIBILITY.md).
   Two parts: (1) site-wide typography and surface refinements; (2) editorial patterns, all prefixed f-.
   The homepage hero (.approach) is deliberately left alone. */

/* ====================================================================== 1. Craft */
:root {
  --t-1: clamp(36px, 3.9vw, 58px);
  --t-2: clamp(28px, 2.55vw, 40px);
  --t-3: 24px;
  --t-4: 20px;
  --measure: 64ch;
  --hair: rgba(126, 95, 54, .2);
  --hair-strong: rgba(126, 95, 54, .36);
  --limestone: #F1EADF;
  --sand: #F6F0E6;
  --rust: #8A3B22;
  --f-pad: clamp(64px, 7.5vw, 112px);
}

/* Daylight: a soft directional light instead of a flat field */
body.arc { background:
  radial-gradient(90% 55% at 88% -8%, rgba(255, 253, 247, .95) 0%, rgba(255, 253, 247, 0) 62%),
  radial-gradient(70% 40% at 0% 30%, rgba(220, 235, 229, .28) 0%, rgba(220, 235, 229, 0) 70%),
  var(--stone); background-attachment: fixed, fixed, scroll; }

/* Headlines: tighter optical tracking, balanced breaks */
.arc main h1, .arc main h2 { line-height: 1.08; }
.arc main h3 { line-height: 1.22; }
.arc h1, .arc h2 { letter-spacing: -.014em; }
.arc .t-1 { line-height: 1.04; }
.arc .t-2 { line-height: 1.1; }
.arc h3 { letter-spacing: -.005em; }

/* Kickers: tracked capitals, quieter (the homepage hero keeps its own) */
.arc :not(.hero-copy) > .kicker { font: 600 12px/1.3 var(--text); letter-spacing: .17em; text-transform: uppercase; gap: 14px; }
.arc :not(.hero-copy) > .kicker::before { width: 26px; }

/* No bold lead-ins: emphasis comes from structure, not bold fragments (hero excepted) */
.arc :not(.hero-copy) > .two-tone { color: var(--ink-2); }
.arc :not(.hero-copy) > .two-tone b { font-weight: inherit; color: var(--ink); }

/* Body copy */
.arc .f-prose p, .arc .f-prose li { font-size: 17.5px; line-height: 1.68; color: #2E3644; }
.arc .f-prose p + p { margin-top: 1.05em; }
.arc .f-prose { max-width: var(--measure); }
.arc .f-prose a:not(.btn) { color: var(--navy); text-decoration-color: var(--bronze-lt); text-underline-offset: 3px; }
.arc .f-prose ul { padding-left: 1.1em; margin: 1em 0 0; }
.arc .f-prose li + li { margin-top: .35em; }
.arc .num, .arc .f-times dd, .arc .f-ledger b { font-variant-numeric: tabular-nums lining-nums; }
.arc em, .arc i { font-style: italic; }

/* Small capitals used for labels, actions and table heads */
.arc .f-sc { font: 600 12px/1.3 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--bronze); }

/* Header: a discreet Member login before Give (desktop only; the sheet and footer carry it on small screens) */
.arc .header-actions .login { font: 500 14.5px/1 var(--text); color: var(--navy); text-decoration: none; padding: 10px 4px; opacity: .78; transition: opacity var(--d-fast); }
.arc .header-actions .login:hover { opacity: 1; text-decoration: underline; text-decoration-color: var(--bronze-lt); text-underline-offset: 4px; }
.arc .header-actions .login.ext::after { display: none; }
@media (max-width: 1180px) { .arc .header-actions .login { display: none; } }

/* ====================================================================== 2. Patterns */

/* ---- Masthead (each page varies the device under or beside the headline) ---- */
.arc .f-mast { position: relative; padding: clamp(36px, 5vw, 76px) 0 clamp(40px, 5vw, 72px); }
.arc .f-mast .crumbs { margin-bottom: clamp(26px, 3.2vw, 44px); }
.arc .f-mast h1 { font-size: var(--t-1); max-width: 15em; }
.arc .f-mast .kicker { margin-bottom: 20px; }
.arc .f-mast .stand { font-size: clamp(18px, 1.45vw, 20.5px); line-height: 1.58; color: var(--ink-2); max-width: 35em; margin-top: 22px; text-wrap: pretty; }
.arc .f-mast .grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 88px); align-items: end; }
.arc .f-mast--center { text-align: center; }
.arc .f-mast--center h1, .arc .f-mast--center .stand { margin-left: auto; margin-right: auto; }
.arc .f-mast--center .kicker { justify-content: center; }
.arc .f-mast--center .kicker::after { content: ""; width: 26px; height: 1px; background: currentColor; }

/* Route: walking distances along Collins Avenue, drawn as a line with stops (Visitor masthead) */
.arc .f-route { list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(var(--stops, 6), 1fr); }
.arc .f-route::before { content: ""; position: absolute; left: 6px; right: 0; top: 6px; height: 1px; background: linear-gradient(90deg, var(--bronze) 0%, var(--hair-strong) 40%, rgba(126,95,54,.12) 100%); }
.arc .f-route li { position: relative; padding: 26px 16px 0 0; }
.arc .f-route li::before { content: ""; position: absolute; left: 0; top: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--stone); box-shadow: inset 0 0 0 1.5px var(--bronze); }
.arc .f-route li.here::before { background: var(--navy); box-shadow: 0 0 0 4px rgba(29,54,88,.12); }
.arc .f-route b { display: block; font: 400 26px/1 var(--display); color: var(--navy); font-variant-numeric: lining-nums; }
.arc .f-route b small { font: 500 13px/1 var(--text); color: var(--ink-3); margin-left: 3px; letter-spacing: .02em; }
.arc .f-route span { display: block; margin-top: 8px; font-size: 14px; line-height: 1.35; color: var(--ink-2); }
.arc .f-route a { text-decoration: none; }
.arc .f-route a:hover span { color: var(--navy); text-decoration: underline; text-decoration-color: var(--bronze-lt); }
.arc .f-route-cap { margin-top: 18px; font-size: 13.5px; color: var(--ink-3); }

/* ---- Sections ---- */
.arc .f-sec { padding: var(--f-pad) 0 0; }
.arc .f-sec:last-of-type { padding-bottom: var(--f-pad); }
.arc .f-sec > .wrap { position: relative; }
.arc .f-sec.f-rule > .wrap::before { content: ""; position: absolute; left: var(--gutter); right: var(--gutter); top: calc(-.5 * var(--f-pad)); height: 1px; background: var(--hair); }
/* Two-column editorial section: a label column that holds the heading, then the content */
.arc .f-cols { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 96px); align-items: start; }
.arc .f-cols--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.arc .f-cols--wide { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); }
.arc .f-cols--form { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.arc .f-label { position: sticky; top: calc(var(--header-short) + 32px); }
.arc .f-label h2 { font-size: var(--t-2); }
.arc .f-label p { margin-top: 14px; color: var(--ink-2); font-size: 16px; line-height: 1.6; max-width: 26em; }
.arc .f-label .f-sc { display: block; margin-bottom: 14px; }
.arc .f-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: clamp(26px, 3vw, 40px); flex-wrap: wrap; }
.arc .f-head h2 { font-size: var(--t-2); }
.arc .f-head p { color: var(--ink-2); max-width: 34em; }

/* Surfaces: limestone band for the "building" moments, sand for quiet emphasis */
.arc .f-band { margin-top: var(--f-pad); padding: var(--f-pad) 0; background:
  radial-gradient(80% 120% at 100% 0%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .09' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .45  0 0 0 0 .37  0 0 0 0 .26  0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E"),
  var(--limestone); border-top: 1px solid rgba(126,95,54,.14); border-bottom: 1px solid rgba(126,95,54,.14); }
.arc .f-band + .f-sec { padding-top: var(--f-pad); }
.arc .f-band--sea { background: linear-gradient(180deg, rgba(220,235,229,.55), rgba(220,235,229,.2)), var(--stone); }

/* ---- Almanac: a typeset directory (hotels, dining, shops). Hairlines, no cards. ---- */
.arc .f-almanac { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 4.5vw, 72px); }
.arc .f-almanac--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.arc .f-almanac > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; align-content: start; padding: 20px 0 24px; border-top: 1px solid var(--hair); }
.arc .f-almanac > li[hidden] { display: none; }
.arc .f-almanac h3 { font-size: 21px; line-height: 1.22; grid-column: 1; }
.arc .f-almanac .d { grid-column: 2; grid-row: 1 / span 2; text-align: right; font: 400 25px/1 var(--display); color: var(--bronze); white-space: nowrap; padding-top: 2px; }
.arc .f-almanac .d small { display: block; margin-top: 5px; font: 500 11.5px/1 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.arc .f-almanac .at { grid-column: 1; margin-top: 4px; font-size: 14px; color: var(--ink-3); }
.arc .f-almanac p { grid-column: 1 / -1; margin-top: 10px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); max-width: 40em; }
.arc .f-almanac .kind { grid-column: 1 / -1; margin-top: 6px; font-size: 14px; font-style: italic; color: var(--ink-2); }
.arc .f-almanac .kind .sh { font-style: normal; color: var(--navy); font-weight: 500; }
.arc .f-almanac .kind .sh::before { content: "\2726"; margin: 0 6px 0 2px; color: var(--bronze); font-size: 10px; vertical-align: 2px; }
.arc .f-almanac .is-closed h3, .arc .f-almanac .is-closed .at { color: var(--ink-3); }
.arc .f-almanac .is-closed .kind { color: var(--rust); font-style: normal; }
.arc .f-acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 14px; }
.arc .f-acts a, .arc .f-acts span { font: 600 12.5px/1.4 var(--text); letter-spacing: .09em; text-transform: uppercase; color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--bronze-lt); padding-bottom: 2px; }
.arc .f-acts span { border: 0; color: var(--ink-2); }
.arc .f-acts a:hover { color: var(--bronze); border-color: var(--bronze); }
.arc .f-code { display: inline-block; margin-top: 12px; grid-column: 1 / -1; justify-self: start; font: 600 11.5px/1 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--bronze); padding: 6px 9px 5px; border: 1px solid var(--hair-strong); border-radius: 3px; background: rgba(255,255,255,.45); }

/* ---- Timetable: a printed programme. Dotted leaders, tabular figures. ---- */
.arc .f-programme { position: relative; padding: clamp(26px, 3vw, 40px) clamp(24px, 3vw, 44px) clamp(24px, 2.6vw, 34px); background: linear-gradient(180deg, #FFFEFB, #FBF7F0); border-radius: 4px; box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 1px 2px rgba(60,44,24,.06), 0 24px 48px -32px rgba(60,44,24,.4); }
.arc .f-programme::before { content: ""; position: absolute; inset: 8px; border: 1px solid var(--hair); border-radius: 2px; pointer-events: none; }
.arc .f-programme > header { text-align: center; margin-bottom: 22px; }
.arc .f-programme > header h2, .arc .f-programme > header h3 { font-size: clamp(24px, 2vw, 30px); }
.arc .f-programme > header p { margin-top: 6px; font-size: 14.5px; color: var(--ink-2); }
.arc .f-programme .he { font-size: 20px; color: var(--bronze); }
.arc .f-programme { container-type: inline-size; }
@container (max-width: 620px) { .arc .f-programme .cols { grid-template-columns: minmax(0, 1fr) !important; } }
.arc .f-programme .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 6px clamp(28px, 3.5vw, 56px); }
.arc .f-programme .cols > div + div { position: relative; }
.arc .f-programme > footer { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--hair); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13.5px; color: var(--ink-3); }
.arc .f-times, .arc .f-times dl { margin: 0; }
.arc .f-times h3, .arc .f-times h4 { margin: 18px 0 6px; font: 600 12px/1.3 var(--text); letter-spacing: .15em; text-transform: uppercase; color: var(--bronze); }
.arc .f-times > :first-child { margin-top: 0; }
.arc .f-times dl > div { display: flex; align-items: baseline; gap: 12px; padding: 7px 0; }
.arc .f-times dt { display: flex; flex: 1; align-items: baseline; gap: 12px; font-size: 16px; color: var(--ink); min-width: 0; }
.arc .f-times dt::after { content: ""; flex: 1; min-width: 18px; border-bottom: 1.5px dotted rgba(126,95,54,.4); transform: translateY(-4px); }
.arc .f-times dt small { display: block; font-size: 13px; color: var(--ink-3); font-style: italic; }
.arc .f-times dd { margin: 0; font-weight: 500; font-size: 16px; color: var(--navy); white-space: nowrap; }
.arc .f-times .key dd { font: 400 22px/1 var(--display); }
.arc .f-src { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); }
.arc .f-src::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #6E9F8A; box-shadow: 0 0 0 3px rgba(110,159,138,.2); }

/* ---- Notes: a margin annotation, not an alert box ---- */
.arc .f-note { display: grid; grid-template-columns: minmax(120px, 2fr) minmax(0, 7fr); gap: 8px 28px; padding: 20px 0 4px; border-top: 2px solid var(--bronze); max-width: 860px; }
.arc .f-note > .f-sc { padding-top: 3px; }
.arc .f-note p { font-size: 16px; line-height: 1.62; color: var(--ink); }
.arc .f-note p + p { margin-top: .6em; }
.arc .f-note--quiet { border-top-color: var(--hair-strong); }

/* Content that still needs confirming with The Shul: visible, never hidden */
.arc .f-tbc { display: block; margin-top: 14px; padding: 10px 14px; border-left: 2px solid var(--rust); background: rgba(138,59,34,.05); font-size: 13.5px; line-height: 1.5; color: #5B3021; max-width: 44em; }
.arc .f-tbc b { font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: 11.5px; margin-right: 6px; }
.arc .f-flag { display: inline-block; margin-left: 6px; font: 600 10.5px/1 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--rust); border: 1px solid rgba(138,59,34,.35); padding: 4px 6px 3px; border-radius: 3px; vertical-align: 2px; cursor: help; }

/* ---- Portraits: only real ones, small, in an arch ---- */
.arc .f-portrait { margin: 0; width: var(--pw, 220px); }
.arc .f-portrait .arch { position: relative; aspect-ratio: 4 / 5; border-radius: 999px 999px 4px 4px; overflow: hidden; background: var(--limestone); box-shadow: 0 1px 2px rgba(60,44,24,.08), 0 22px 40px -28px rgba(60,44,24,.55); }
.arc .f-portrait .arch::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); pointer-events: none; }
.arc .f-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.arc .f-portrait.bw img { filter: grayscale(1) contrast(1.02); }
.arc .f-portrait figcaption { margin-top: 14px; font-size: 13.5px; line-height: 1.45; color: var(--ink-3); }
.arc .f-portrait figcaption b { display: block; font: 400 18px/1.25 var(--display); color: var(--navy); margin-bottom: 3px; }

/* ---- People: leadership profiles ---- */
.arc .f-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: clamp(36px, 4vw, 56px) clamp(40px, 5vw, 80px); }
.arc .f-person { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 22px; align-items: start; }
.arc .f-person .f-portrait { --pw: 112px; }
.arc .f-person h3 { font-size: 23px; line-height: 1.2; }
.arc .f-person .role { margin-top: 4px; font-style: italic; color: var(--ink-2); font-size: 15.5px; }
.arc .f-person p:not(.role) { margin-top: 12px; font-size: 15.5px; line-height: 1.62; color: var(--ink-2); }
.arc .f-person .f-acts { margin-top: 12px; }

/* ---- Directory: staff as an index set by department ---- */
.arc .f-dir { columns: 2 340px; column-gap: clamp(36px, 5vw, 80px); }
.arc .f-dir > section { break-inside: avoid; margin-bottom: 36px; }
.arc .f-dir h3 { font: 600 12px/1.3 var(--text); letter-spacing: .15em; text-transform: uppercase; color: var(--bronze); padding-bottom: 10px; border-bottom: 1px solid var(--hair-strong); }
.arc .f-dir ul { list-style: none; margin: 0; padding: 0; }
.arc .f-dir li { padding: 13px 0 12px; border-bottom: 1px solid var(--hair); }
.arc .f-dir .n { font: 400 19px/1.25 var(--display); color: var(--navy); }
.arc .f-dir .r { display: block; margin-top: 2px; font-style: italic; font-size: 14.5px; color: var(--ink-2); }
.arc .f-dir .c { display: flex; flex-wrap: wrap; gap: 2px 16px; margin-top: 6px; font-size: 14px; font-variant-numeric: tabular-nums; }
.arc .f-dir .c a { color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--hair-strong); }
.arc .f-dir .c a:hover { border-color: var(--bronze); }

.arc .f-dir--grid { columns: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr); gap: 0 clamp(28px, 3vw, 44px); }
.arc .f-dir--grid > section { margin-bottom: 0; }
.arc .f-dir .two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; }
@media (max-width: 760px) { .arc .f-dir--grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

/* ---- Quote ---- */
.arc .f-quote { margin: 0; position: relative; padding-left: clamp(28px, 3vw, 44px); }
.arc .f-quote::before { content: "\201C"; position: absolute; left: -6px; top: -18px; font: 400 88px/1 var(--display); color: var(--bronze-lt); opacity: .7; }
.arc .f-quote p { font: 400 clamp(23px, 2.1vw, 31px)/1.36 var(--display); color: var(--navy); letter-spacing: -.008em; text-wrap: balance; }
.arc .f-quote footer, .arc .f-quote cite { display: block; margin-top: 18px; font: 600 12px/1.4 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--bronze); font-style: normal; }

/* ---- Ledger: a few sourced facts, separated by hairlines ---- */
.arc .f-ledger { display: flex; flex-wrap: wrap; margin: 0; }
.arc .f-ledger > div { flex: 1 1 140px; padding: 4px 24px 4px 0; margin-right: 24px; border-right: 1px solid var(--hair); }
.arc .f-ledger > div:last-child { border-right: 0; margin-right: 0; }
.arc .f-ledger dt { order: 2; font-size: 14px; line-height: 1.4; color: var(--ink-2); margin-top: 8px; }
.arc .f-ledger dd { margin: 0; font: 400 clamp(34px, 3.4vw, 48px)/1 var(--display); color: var(--navy); }
.arc .f-ledger > div { display: flex; flex-direction: column; }
.arc .f-ledger dd { order: 1; }

/* ---- Artwork: The Shul's own campaign art, presented with care and kept intact ---- */
.arc .f-art { margin: 0; }
.arc .f-art .mat { display: block; border-radius: 6px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(60,44,24,.08), 0 30px 60px -36px rgba(60,44,24,.55); transition: transform var(--d-med) var(--ease), box-shadow var(--d-med) var(--ease); }
.arc a.f-art:hover .mat, .arc .f-art a:hover .mat { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(60,44,24,.08), 0 38px 70px -36px rgba(60,44,24,.6); }
.arc .f-art img { width: 100%; height: auto; }
.arc .f-art figcaption, .arc .f-art .cap { margin-top: 12px; font-size: 13px; color: var(--ink-3); }
.arc a.f-art { text-decoration: none; color: inherit; display: block; }

/* Campaign shelf: original web stickers in a row, each a link to its native page */
.arc .f-shelf { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 36px); }
.arc .f-shelf > a, .arc .f-shelf > div { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.arc .f-shelf .mat { aspect-ratio: var(--ar, 16 / 7); display: grid; place-items: center; overflow: hidden; border-radius: 6px; background: #fff; box-shadow: 0 1px 2px rgba(60,44,24,.08), 0 22px 44px -30px rgba(60,44,24,.5); transition: transform var(--d-med) var(--ease); }
.arc .f-shelf .mat img { width: 100%; height: 100%; object-fit: contain; }
.arc .f-shelf .mat.cover img { object-fit: cover; }
.arc .f-shelf > a:hover .mat { transform: translateY(-3px); }
.arc .f-shelf h3 { margin-top: 16px; font-size: 20px; }
.arc .f-shelf p { margin-top: 6px; font-size: 15px; color: var(--ink-2); line-height: 1.55; }
.arc .f-shelf .go { margin-top: 10px; font: 600 12.5px/1.4 var(--text); letter-spacing: .09em; text-transform: uppercase; color: var(--navy); }

/* ---- Flyers: The Shul's own flyers, as objects ---- */
.arc .f-flyers { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: clamp(22px, 2.6vw, 36px); }
.arc .f-flyers > a { text-decoration: none; color: inherit; display: block; }
.arc .f-flyers img { width: 100%; height: auto; border-radius: 3px; box-shadow: 0 1px 2px rgba(60,44,24,.1), 0 20px 36px -24px rgba(60,44,24,.55); transition: transform var(--d-med) var(--ease); }
.arc .f-flyers > a:hover img { transform: translateY(-3px) rotate(-.4deg); }
.arc .f-flyers b { display: block; margin-top: 14px; font: 400 18px/1.25 var(--display); color: var(--navy); }
.arc .f-flyers span { display: block; margin-top: 4px; font-size: 13.5px; color: var(--ink-3); }

/* ---- Handoff: the native ShulCloud page does the work ---- */
.arc .f-handoff { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 36px; align-items: center; padding: 26px 0; border-top: 1px solid var(--hair-strong); border-bottom: 1px solid var(--hair-strong); }
.arc .f-handoff h3 { font-size: 23px; }
.arc .f-handoff p { margin-top: 6px; font-size: 15.5px; color: var(--ink-2); max-width: 40em; }
.arc .f-handoff .via { display: block; margin-top: 8px; font-size: 13px; color: var(--ink-3); }
.arc .f-handoff .btns { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.arc .f-handoff + .f-handoff { border-top: 0; }

/* ---- Index: a list of destinations set as type, with a short line each ---- */
.arc .f-index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair-strong); }
.arc .f-index > li { border-bottom: 1px solid var(--hair); }
.arc .f-index a, .arc .f-index .row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) auto; gap: 8px 28px; align-items: baseline; padding: 18px 0 17px; text-decoration: none; color: inherit; }
.arc .f-index b { font: 400 22px/1.2 var(--display); color: var(--navy); }
.arc .f-index span { font-size: 15.5px; color: var(--ink-2); }
.arc .f-index i { font-style: normal; font: 600 12px/1 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--bronze); white-space: nowrap; }
.arc .f-index a:hover b { color: var(--bronze); }
.arc .f-index a { transition: padding var(--d-med) var(--ease); }
.arc .f-index a:hover { padding-left: 8px; }

/* ---- Front page: the homepage's essentials, set like the front of a weekly ---- */
.arc .f-front { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--hair-strong); border-bottom: 1px solid var(--hair-strong); }
.arc .f-front > article { padding: 26px 26px 24px; border-left: 1px solid var(--hair); display: flex; flex-direction: column; }
.arc .f-front > article:first-child { border-left: 0; padding-left: 0; }
.arc .f-front > article:last-child { padding-right: 0; }
.arc .f-front h3 { font-size: 22px; margin-top: 12px; }
.arc .f-front p { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.arc .f-front .f-times { margin-top: 12px; }
.arc .f-front .f-times dl > div { padding: 4px 0; }
.arc .f-front .f-times dt, .arc .f-front .f-times dd { font-size: 14.5px; }
.arc .f-front .f-acts { margin-top: auto; padding-top: 16px; }

/* ---- Tribute: a dignified memorial spread on limestone ---- */
.arc .f-tribute .grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 6vw, 104px); align-items: start; }
.arc .f-tribute h2 { font-size: var(--t-1); }
.arc .f-tribute .obm { display: block; margin-top: 10px; font: 400 18px/1.3 var(--display); color: var(--bronze); letter-spacing: .02em; }
.arc .f-tribute .f-prose { margin-top: 24px; }
.arc .f-tribute .f-art { margin-top: clamp(36px, 5vw, 64px); }

/* ---- Bilingual: English and Spanish side by side ---- */
.arc .f-bi { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.arc .f-bi > div { padding: 0 clamp(24px, 3.5vw, 56px); }
.arc .f-bi > div:first-child { padding-left: 0; border-right: 1px solid var(--hair); }
.arc .f-bi > div:last-child { padding-right: 0; }
.arc .f-bi .f-sc { display: block; margin-bottom: 14px; }

/* ---- Split: media beside text ---- */
.arc .f-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5.5vw, 96px); align-items: center; }
.arc .f-split--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.arc .f-split--flip > :first-child { order: 2; }
.arc .f-split h2 { font-size: var(--t-2); }
.arc .f-split .f-prose { margin-top: 18px; }
.arc .f-split .actions { margin-top: 26px; display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }

/* ---- Nameplate: the magazine's masthead ---- */
.arc .f-nameplate { text-align: center; padding: 22px 0 18px; border-top: 3px double var(--navy); border-bottom: 1px solid var(--navy); }
.arc .f-nameplate .t { font: 400 clamp(44px, 7vw, 104px)/.95 var(--display); color: var(--navy); letter-spacing: -.02em; }
.arc .f-nameplate .row { display: flex; justify-content: space-between; gap: 16px; margin-top: 18px; padding-top: 10px; border-top: 1px solid var(--hair-strong); font: 600 12px/1.3 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }

/* ---- Steps (numbered, for processes) ---- */
.arc .f-steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 28px clamp(28px, 3.5vw, 56px); }
.arc .f-steps > li { counter-increment: s; padding-top: 18px; border-top: 1px solid var(--hair-strong); }
.arc .f-steps > li::before { content: counter(s, decimal-leading-zero); display: block; font: 400 15px/1 var(--display); color: var(--bronze); margin-bottom: 12px; letter-spacing: .06em; }
.arc .f-steps h3 { font-size: 20px; }
.arc .f-steps p { margin-top: 8px; font-size: 15.5px; color: var(--ink-2); line-height: 1.6; }

/* Prices or fees quoted from a source page */
.arc .f-fees { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--hair-strong); border-bottom: 1px solid var(--hair-strong); }
.arc .f-fees > div { flex: 1 1 160px; padding: 18px 20px 16px 0; }
.arc .f-fees > div + div { padding-left: 20px; border-left: 1px solid var(--hair); }
.arc .f-fees b { display: block; font: 400 32px/1 var(--display); color: var(--navy); font-variant-numeric: lining-nums; }
.arc .f-fees span { display: block; margin-top: 8px; font-size: 14px; color: var(--ink-2); }

/* Rendering hero for subject pages (Renovation) */
.arc .f-plate { margin: 0; }
.arc .f-plate img { width: 100%; height: clamp(320px, 52vw, 680px); object-fit: cover; border-radius: 4px; }
.arc .f-plate figcaption { margin-top: 12px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--ink-3); }

/* ====================================================================== 3. Small screens */
@media (max-width: 960px) {
  .arc .f-mast .grid, .arc .f-cols, .arc .f-cols--even, .arc .f-cols--wide, .arc .f-cols--form, .arc .f-split, .arc .f-split--flip, .arc .f-tribute .grid { grid-template-columns: minmax(0, 1fr); }
  .arc .f-split--flip > :first-child { order: 0; }
  .arc .f-label { position: static; }
  .arc .f-almanac--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arc .f-front { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arc .f-front > article:nth-child(3) { border-left: 0; padding-left: 0; }
  .arc .f-front > article:nth-child(n+3) { border-top: 1px solid var(--hair); }
  .arc .f-front > article:nth-child(2) { padding-right: 0; }
  .arc .f-steps { --cols: 1; }
}
@media (max-width: 760px) {
  .arc .f-almanac, .arc .f-almanac--3 { grid-template-columns: minmax(0, 1fr); }
  .arc .f-route { grid-template-columns: minmax(0, 1fr); padding-left: 2px; }
  .arc .f-route::before { left: 6px; right: auto; top: 6px; bottom: 18px; width: 1px; height: auto; background: linear-gradient(180deg, var(--bronze), rgba(126,95,54,.15)); }
  .arc .f-route li { padding: 0 0 18px 34px; display: flex; align-items: baseline; gap: 14px; }
  .arc .f-route li::before { top: 4px; }
  .arc .f-route b { font-size: 21px; min-width: 76px; }
  .arc .f-route span { margin-top: 0; }
  .arc .f-programme .cols, .arc .f-bi { grid-template-columns: minmax(0, 1fr); }
  .arc .f-bi > div { padding: 0; border: 0 !important; }
  .arc .f-bi > div + div { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--hair) !important; }
  .arc .f-note { grid-template-columns: minmax(0, 1fr); }
  .arc .f-front { grid-template-columns: minmax(0, 1fr); }
  .arc .f-front > article { border-left: 0 !important; padding: 22px 0 !important; }
  .arc .f-front > article + article { border-top: 1px solid var(--hair); }
  .arc .f-index a, .arc .f-index .row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .arc .f-handoff { grid-template-columns: minmax(0, 1fr); }
  .arc .f-shelf { --cols: 1 !important; }
  .arc .f-person { grid-template-columns: 84px minmax(0, 1fr); gap: 16px; }
  .arc .f-person .f-portrait { --pw: 84px; }
  .arc .f-ledger > div { flex-basis: 40%; border-right: 0; margin-bottom: 18px; }
  .arc .f-nameplate .row { flex-direction: column; gap: 4px; text-align: center; }
  .arc .f-fees > div + div { border-left: 0; padding-left: 0; }
  .arc .f-fees > div { flex-basis: 100%; border-bottom: 1px solid var(--hair); }
  .arc .f-fees > div:last-child { border-bottom: 0; }
}

/* ---- Flyer archive: The Shul's flyers kept on the page of the program they belong to,
   each labelled Ongoing or Past so an old date never reads as an upcoming event ---- */
.arc .f-archive { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr)); gap: clamp(18px, 2vw, 28px); }
.arc .f-archive > a { text-decoration: none; color: inherit; display: block; }
.arc .f-archive img { width: 100%; height: auto; border-radius: 3px; box-shadow: 0 1px 2px rgba(60,44,24,.1), 0 16px 30px -22px rgba(60,44,24,.5); transition: transform var(--d-med) var(--ease); }
.arc .f-archive > a:hover img { transform: translateY(-3px); }
.arc .f-archive .past img { filter: saturate(.7); opacity: .92; }
.arc .f-archive b { display: block; margin-top: 12px; font: 400 16.5px/1.25 var(--display); color: var(--navy); }
.arc .f-archive em { display: inline-block; margin-top: 6px; font: 600 10.5px/1 var(--text); font-style: normal; letter-spacing: .12em; text-transform: uppercase; padding: 4px 6px 3px; border-radius: 3px; color: #2F6B55; background: rgba(110,159,138,.16); }
.arc .f-archive .past em { color: var(--ink-3); background: rgba(126,95,54,.1); }
/* External links inside grid rows: the arrow belongs to the label, not a grid cell of its own */
.arc .f-index a.ext::after, .arc a.f-art.ext::after, .arc .f-shelf > a.ext::after, .arc .f-flyers > a.ext::after { display: none; }
.arc .f-index a.ext i::after { content: "\2197"; margin-left: 6px; font-size: 12px; letter-spacing: 0; }
.arc .sheet-actions .btn { white-space: nowrap; padding: 0 18px; }

/* ---- Director corrections, 5 Nov ---- */
/* Header: no Member login in the desktop header (it stays in the mobile menu and the footer) */
.arc .header-actions .login { display: none; }

/* Hero accent: "steps from the sea" in the menorah gold of the logo */
.arc .approach h1 em { color: #D8AC6C; text-shadow: 0 1px 1px rgba(29,54,88,.18), 0 2px 18px rgba(255,255,255,.35); }

/* This Shabbos strip: the actions stack so "Visiting for Shabbos" never runs past the glass */
.arc .strip-glass .s-actions { flex-direction: column; align-items: center; gap: 8px; }
.arc .strip-glass .s-actions .link { font-size: 14.5px; }

/* Flyer viewer: the flyer rises on its own, in 3D, with no box around it */
.arc dialog.lightbox { width: min(1100px, 96vw); background: transparent; }
.arc dialog.lightbox::backdrop { background: rgba(244, 239, 231, .78); -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1); }
.arc .lb-inner { background: none; border-radius: 0; overflow: visible; animation: none; box-shadow: none; perspective: 1600px; }
.arc .lb-stage { background: transparent; min-height: 0; max-height: none; padding: 2vh 0 0; }
.arc .lb-stage img { max-height: 80vh; border-radius: 4px; transform-origin: 50% 85%;
  box-shadow: 0 2px 4px rgba(40,30,15,.12), 0 30px 60px -20px rgba(40,30,15,.45), 0 70px 120px -50px rgba(29,54,88,.45); }
.arc dialog.lightbox[open] .lb-stage img { animation: f-lift .75s cubic-bezier(.16,.84,.24,1) both; }
@keyframes f-lift { from { opacity: 0; transform: translateY(80px) rotateX(24deg) scale(.82); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
.arc .lb-stage img.is-swapping { opacity: 0; transform: translateY(14px) scale(.97); animation: none; }
.arc .lb-bar { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; box-shadow: none; padding: 18px 4px 0; justify-content: center; gap: 28px; }
.arc .lb-cap { color: var(--navy); text-align: center; }
.arc .lb-cap small { color: var(--ink-3); }
.arc .lb-ctrl .icon-btn { background: rgba(255,255,255,.7); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 8px 20px -10px rgba(29,54,88,.4); }
@media (prefers-reduced-motion: reduce) { .arc dialog.lightbox[open] .lb-stage img { animation: none; } }
/* Lightbox zoom */
.arc .lb-stage { touch-action: pan-y pinch-zoom; }
.arc .lb-stage img { cursor: zoom-in; }
.arc .lb-stage.is-zoomed { display: block; height: 82vh; max-height: 82vh; padding: 0; overflow: auto; overscroll-behavior: contain; touch-action: pan-x pan-y pinch-zoom; border-radius: 6px; box-shadow: 0 30px 60px -30px rgba(40,30,15,.45); scrollbar-width: thin; }
.arc .lb-stage.is-zoomed img { max-width: none; max-height: none; cursor: zoom-out; animation: none !important; transform: none; border-radius: 0; user-select: none; -webkit-user-drag: none; }
.arc .lb-inner { position: relative; }
.arc .lb-zoom { position: absolute; z-index: 3; top: 50%; right: -66px; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; }
.arc .lb-zoom .icon-btn { width: 46px; height: 46px; background: rgba(255,255,255,.78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 10px 24px -12px rgba(29,54,88,.45); }
.arc .lb-zoom .icon-btn:disabled { opacity: .35; cursor: default; }
@media (max-width: 1240px) { .arc .lb-zoom { right: 10px; } }

/* Renovation plate: show the building, not the sky */
.arc .f-plate img { object-position: 50% 92%; }
/* Dropdowns: an invisible bridge from the menu item down to the panel, on the item itself
   (the panel's ::before draws its glass border, so it must not be reused) */
.arc .nav > li.is-open::after { content: ""; position: absolute; left: -24px; right: -24px; top: 100%; height: 56px; }
/* One menu at a time: once the script runs, only the menu it marks open is shown (no second menu from CSS hover) */
html.js .arc .nav > li:not(.is-open):hover > .mega { opacity: 0; visibility: hidden; pointer-events: none; }

/* ---- Visitor: hotels with a photo beside each ---- */
.arc .f-almanac > li.has-pic { grid-template-columns: 132px minmax(0, 1fr) auto; column-gap: 22px; }
.arc .f-almanac > li.has-pic > .pic { grid-column: 1; grid-row: 1 / span 8; align-self: start; width: 132px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 999px 999px 4px 4px;
  box-shadow: 0 1px 2px rgba(60,44,24,.08), 0 18px 32px -22px rgba(60,44,24,.55); }
.arc .f-almanac > li.has-pic > :not(.pic):not(.d) { grid-column: 2 / -1; }
.arc .f-almanac > li.has-pic > h3, .arc .f-almanac > li.has-pic > .at { grid-column: 2; }
.arc .f-almanac > li.has-pic > .d { grid-column: 3; }
.arc .f-almanac > li.has-pic > .f-code { justify-self: start; }
.arc .pic.mono { display: grid; place-items: center; font: 400 34px/1 var(--display); color: rgba(255,255,255,.95); letter-spacing: .02em;
  background: radial-gradient(120% 90% at 50% 110%, rgba(255,255,255,.35), rgba(255,255,255,0) 55%), linear-gradient(170deg, #9CC8CF 0%, #5F9AA8 55%, #2F5F7A 100%); }
@media (max-width: 760px) {
  .arc .f-almanac > li.has-pic { grid-template-columns: 84px minmax(0, 1fr) auto; column-gap: 16px; }
  .arc .f-almanac > li.has-pic > .pic { width: 84px; }
}

/* ---- Visitor: Explore as Art Deco postcards ---- */
.arc .f-postcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px); perspective: 1400px; }
.arc .pc { background: #FFFDF8; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 2px rgba(60,44,24,.1), 0 26px 50px -34px rgba(60,44,24,.55);
  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s; transform-style: preserve-3d; }
.arc .pc:nth-child(3n+1) { transform: rotate(-.6deg); } .arc .pc:nth-child(3n+3) { transform: rotate(.5deg); }
.arc .pc:hover { transform: translateY(-6px) rotateX(4deg) rotateY(-3deg); box-shadow: 0 2px 4px rgba(60,44,24,.1), 0 40px 70px -36px rgba(60,44,24,.6); }
.arc .pc-face { position: relative; aspect-ratio: 16 / 10; display: flex; flex-direction: column; justify-content: flex-end; padding: 22px 24px; color: #fff; overflow: hidden; isolation: isolate;
  background: var(--pc, linear-gradient(160deg, #F7B6A3, #5FA9B5)); }
.arc .pc-face::before { content: ""; position: absolute; inset: -40% -20% -60%; z-index: -1; opacity: .22;
  background: repeating-conic-gradient(from -90deg at 50% 100%, #fff 0deg 4deg, transparent 4deg 12deg); }
.arc .pc-face::after { content: ""; position: absolute; left: 50%; bottom: -46%; width: 70%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(255,240,210,.85) 0 38%, rgba(255,240,210,0) 39%), radial-gradient(circle, transparent 0 46%, rgba(255,255,255,.5) 46.5% 47.5%, transparent 48%); }
.arc .pc-greet { font: italic 400 16px/1 var(--text); letter-spacing: .04em; opacity: .92; }
.arc .pc-name { margin-top: 6px; font: 400 clamp(26px, 2.4vw, 36px)/1.02 var(--display); letter-spacing: -.01em; text-shadow: 0 2px 16px rgba(0,0,0,.18); }
.arc .pc-back { position: relative; padding: 20px 24px 22px; border-top: 1px dashed rgba(126,95,54,.3); }
.arc .pc-back h3 { font-size: 19px; }
.arc .pc-back p { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.arc .pc--wynwood { --pc: linear-gradient(150deg, #F25C7A 0%, #F79A4E 55%, #FFD36E 100%); }
.arc .pc--south { --pc: linear-gradient(160deg, #F6B5C6 0%, #F2C6A0 45%, #6BC4C6 100%); }
.arc .pc--garden { --pc: linear-gradient(160deg, #A9D18E 0%, #4E9A6B 60%, #24624F 100%); }
.arc .pc--glades { --pc: linear-gradient(170deg, #E9C77B 0%, #8DB59A 55%, #2E6E78 100%); }
.arc .pc--brickell { --pc: linear-gradient(165deg, #9DBFE6 0%, #4C6FA8 55%, #1D3658 100%); }
.arc .pc--keys { --pc: linear-gradient(165deg, #FFB38A 0%, #F07F7A 40%, #3FA7C2 100%); }
@media (max-width: 960px) { .arc .f-postcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .arc .f-postcards { grid-template-columns: minmax(0, 1fr); } .arc .pc { transform: none !important; } }
@media (prefers-reduced-motion: reduce) { .arc .pc, .arc .pc:hover { transform: none; transition: none; } }
/* Visitor hero: a daylight wash behind the copy only, so the headline reads over the busy shoreline */
.arc .approach--visit .haze { background:
  linear-gradient(90deg, rgba(248,244,238,.9) 0%, rgba(248,244,238,.72) 30%, rgba(248,244,238,.18) 55%, rgba(248,244,238,0) 70%),
  linear-gradient(180deg, rgba(255,255,255,.25) 0%, rgba(255,255,255,0) 25%); }
@media (max-width: 760px) { .arc .approach--visit .haze { background: linear-gradient(180deg, rgba(248,244,238,.88) 0%, rgba(248,244,238,.7) 45%, rgba(248,244,238,.1) 75%); } }
.arc .approach--visit h1 em { text-shadow: 0 1px 1px rgba(29,54,88,.25), 0 0 24px rgba(255,255,255,.6); }
.arc .pc-face::after { left: 80%; bottom: -30%; width: 52%; }
.arc .pc-name { text-shadow: 0 1px 2px rgba(0,0,0,.18), 0 2px 18px rgba(0,0,0,.22); }
.arc .pc-back h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.arc .pc-back p { margin-top: 0; padding-right: 56px; }

/* ---- Over the Top: the story, as a timeline ---- */
.arc .f-story { list-style: none; margin: 0; padding: 0; position: relative; }
.arc .f-story::before { content: ""; position: absolute; left: 120px; top: 10px; bottom: 10px; width: 1px; background: linear-gradient(180deg, var(--bronze), var(--hair-strong) 30%, var(--hair) 85%, var(--bronze)); }
.arc .f-story > li { position: relative; display: grid; grid-template-columns: 120px minmax(0, 5fr) minmax(0, 6fr); gap: 16px clamp(32px, 4vw, 64px); padding: clamp(36px, 4.5vw, 64px) 0; border-bottom: 1px solid var(--hair); align-items: start; }
.arc .f-story > li:last-child { border-bottom: 0; }
.arc .f-story > li::before { content: ""; position: absolute; left: 114px; top: calc(clamp(36px, 4.5vw, 64px) + 14px); width: 13px; height: 13px; border-radius: 50%; background: var(--stone); box-shadow: inset 0 0 0 1.5px var(--bronze); }
.arc .f-story > li.now::before { background: var(--navy); box-shadow: 0 0 0 5px rgba(29,54,88,.12); }
.arc .f-story .yr { font: 400 clamp(28px, 2.6vw, 40px)/1 var(--display); color: var(--bronze); padding-right: 28px; padding-top: 4px; }
.arc .f-story .tx h2 { font-size: clamp(24px, 2.2vw, 32px); margin-left: 24px; }
.arc .f-story .tx p { margin: 14px 0 0 24px; font-size: 17px; line-height: 1.68; color: #2E3644; max-width: 34em; }
.arc .f-story .ph { margin: 0; }
.arc .f-story .ph img { border-radius: 4px; box-shadow: 0 1px 2px rgba(60,44,24,.1), 0 18px 34px -24px rgba(60,44,24,.55); }
.arc .f-story .ph--portrait { width: 180px; }
.arc .f-story .ph--portrait img { border-radius: 999px 999px 4px 4px; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1); }
.arc .f-story .ph figcaption { margin-top: 10px; font-size: 13px; color: var(--ink-3); }
.arc .f-story .ph--trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.arc .f-story .ph--trio img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.arc .f-story .ph--wide { display: grid; grid-template-columns: 3fr 2fr; gap: 12px; }
.arc .f-story .ph--wide img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.arc .f-story > li:not(:has(.ph)) .tx { grid-column: 2 / -1; }
@media (max-width: 860px) {
  .arc .f-story::before { left: 6px; }
  .arc .f-story > li { grid-template-columns: minmax(0, 1fr); padding-left: 32px; }
  .arc .f-story > li::before { left: 0; top: calc(clamp(36px, 4.5vw, 64px) + 8px); }
  .arc .f-story .tx h2, .arc .f-story .tx p { margin-left: 0; }
  .arc .f-story > li:not(:has(.ph)) .tx { grid-column: auto; }
}

/* ---- Native form, restyled (design preview of a ShulCloud form) ---- */
.arc .f-preview { margin-bottom: 28px; padding: 14px 18px; border-left: 2px solid var(--bronze); background: rgba(126,95,54,.06); font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.arc .f-preview b { margin-right: 8px; font: 600 11.5px/1 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--bronze); }
.arc .f-form form { padding: clamp(26px, 3vw, 44px); background: linear-gradient(180deg, #FFFEFB, #FBF7F0); border-radius: 6px;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 1px 2px rgba(60,44,24,.06), 0 30px 60px -40px rgba(60,44,24,.45); }
.arc .f-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.arc .f-form fieldset + fieldset { margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--hair); }
.arc .f-form legend { padding: 0; margin-bottom: 18px; }
.arc .f-form .row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 26px; }
.arc .f-form label { display: block; }
.arc .f-form label > span, .arc .f-form .choice > span { display: block; font-size: 14px; color: var(--ink-2); margin-bottom: 8px; }
.arc .f-form label i { font-style: normal; color: var(--bronze); }
.arc .f-form input, .arc .f-form textarea { width: 100%; font: 400 17px/1.4 var(--text); color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--hair-strong); padding: 8px 0 9px; border-radius: 0; }
.arc .f-form textarea { border: 1px solid var(--hair-strong); border-radius: 4px; padding: 12px 14px; resize: vertical; }
.arc .f-form input::placeholder { color: rgba(88,94,105,.6); }
.arc .f-form .full { margin-top: 24px; }
.arc .f-form .choice { margin-top: 24px; }
.arc .f-form .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.arc .f-form .opt { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; font-size: 15px; color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair-strong); background: rgba(255,255,255,.6); }
.arc .f-form .opt:first-child { background: var(--navy); color: var(--ivory); box-shadow: none; }
.arc .f-form .send { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--hair); display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.arc .f-std { margin: 12px 0 0; padding: 0; list-style: none; }
.arc .f-std li { position: relative; padding: 10px 0 10px 22px; border-top: 1px solid var(--hair); font-size: 15.5px; line-height: 1.55; }
.arc .f-std li::before { content: ""; position: absolute; left: 2px; top: 19px; width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid var(--bronze); }
@media (max-width: 960px) { .arc .f-form .row3 { grid-template-columns: minmax(0, 1fr); } }
.arc .f-story > li.now .ph { grid-column: 2 / -1; margin-left: 24px; }
.arc .f-story .ph--wide img { aspect-ratio: 16 / 10; }
@media (max-width: 860px) { .arc .f-story > li.now .ph { grid-column: auto; margin-left: 0; } }

/* Sub-nav pill: sits snugly under the settled header */
.arc .subnav.gd { top: calc(var(--header-short) + 8px); }

/* ---- Home essentials as raised glass tablets with depth ---- */
.arc .f-front--3d { border: 0; gap: clamp(16px, 1.8vw, 26px); perspective: 1200px; }
.arc .f-front--3d > article, .arc .f-front--3d > article:first-child, .arc .f-front--3d > article:last-child {
  --rx: 0deg; --ry: 0deg; position: relative; padding: 30px 28px 26px !important; border: 0 !important; border-radius: 22px; overflow: hidden;
  transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s;
  background: linear-gradient(155deg, rgba(255,255,255,.92) 0%, rgba(253,250,244,.78) 45%, rgba(244,236,224,.7) 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 -1px 0 rgba(126,95,54,.08) inset, 0 2px 4px rgba(60,44,24,.05), 0 26px 50px -30px rgba(60,44,24,.42), 0 60px 90px -60px rgba(29,54,88,.35); }
.arc .f-front--3d > article:hover { box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 4px 8px rgba(60,44,24,.06), 0 40px 70px -34px rgba(60,44,24,.5), 0 80px 110px -60px rgba(29,54,88,.4); }
.arc .f-front--3d > article > * { position: relative; z-index: 3; transform: translateZ(18px); }
.arc .f-front--3d > article > .f-sc { transform: translateZ(26px); }
.arc .f-front--3d > article > h3 { transform: translateZ(40px); text-shadow: 0 1px 0 rgba(255,255,255,.9), 0 10px 18px rgba(29,54,88,.12); }
.arc .f-front--3d > article > .f-acts { transform: translateZ(30px); }
.arc .f-front--3d .emb { position: absolute !important; right: -6px; bottom: -14px; z-index: 1 !important; transform: translateZ(-10px) !important; font: 500 clamp(64px, 6vw, 96px)/1 var(--hebrew); color: #EFE6D8; pointer-events: none;
  text-shadow: -1px -1px 0 rgba(255,255,255,.95), 1px 1px 0 rgba(126,95,54,.18), 0 0 1px rgba(126,95,54,.1); }
.arc .f-front--3d > article::before { content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 2px; border-radius: 2px; z-index: 4; background: linear-gradient(90deg, transparent, #D8AC6C, transparent); opacity: .8; padding: 0; -webkit-mask: none; mask: none; inset: 0 22px auto 22px; }
@media (max-width: 960px) { .arc .f-front--3d > article:nth-child(n) { border-top: 0 !important; } }
@media (max-width: 760px) { .arc .f-front--3d { gap: 16px; } .arc .f-front--3d > article { padding: 24px 22px !important; } }
@media (prefers-reduced-motion: reduce) { .arc .f-front--3d > article { transform: none; transition: none; } }

/* Tablets: quieter, no embossed words */
.arc .f-front--3d .emb { display: none; }

/* ---- Founder: a long-form life in chapters ---- */
.arc .f-mast--memorial .dates { margin-top: 14px; display: flex; gap: 18px; flex-wrap: wrap; align-items: baseline; font: 400 20px/1.3 var(--display); color: var(--bronze); }
.arc .f-mast--memorial .dates .he { font-size: 21px; }
.arc .f-chapter { padding: var(--f-pad) 0 0; }
.arc .f-chapter.f-band { margin-top: var(--f-pad); padding: var(--f-pad) 0; }
.arc .f-chapter > .wrap { display: grid; grid-template-columns: 90px minmax(0, 6fr) minmax(0, 6fr); gap: 28px clamp(32px, 4.5vw, 72px); align-items: start; }
.arc .f-chapter .num { font: 400 clamp(54px, 5vw, 80px)/.9 var(--display); color: rgba(126,95,54,.28); padding-top: 6px; }
.arc .f-chapter .body h2 { font-size: var(--t-2); margin-top: 12px; }
.arc .f-chapter .body .f-prose { margin-top: 20px; }
.arc .f-chapter--flip > .wrap { grid-template-columns: 90px minmax(0, 6fr) minmax(0, 6fr); }
.arc .f-chapter--flip .body { order: 3; }
.arc .f-chapter--flip .mosaic { order: 2; }
.arc .f-chapter .plate { align-self: center; }
.arc .f-chapter .plate img { filter: grayscale(.15); }
.arc .f-chapter .mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-self: start; }
.arc .f-chapter .mosaic > :first-child { grid-column: 1 / -1; }
.arc .f-chapter .mosaic--two { grid-template-columns: 1fr; }
.arc .f-chapter .mosaic img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.arc .f-chapter .mosaic > :first-child img { aspect-ratio: 16 / 10; }
.arc .f-chapter .f-art figcaption { font-size: 12.5px; }
.arc .f-chapter--legacy > .wrap { grid-template-columns: 90px minmax(0, 1fr); }
.arc .f-chapter--legacy .plate { grid-column: 2; margin-top: 8px; }
@media (max-width: 960px) {
  .arc .f-chapter > .wrap, .arc .f-chapter--flip > .wrap, .arc .f-chapter--legacy > .wrap { grid-template-columns: minmax(0, 1fr); }
  .arc .f-chapter .num { font-size: 48px; }
  .arc .f-chapter--flip .body, .arc .f-chapter--flip .mosaic { order: 0; }
  .arc .f-chapter--legacy .plate { grid-column: auto; }
}

/* Section banners from the original site, kept modest */
.arc .f-art.banner .mat { border-radius: 4px; }
.arc .f-art.banner img { max-height: 230px; object-fit: cover; }
/* ---- The Jewish year: a band of months, each with its holidays ---- */
.arc .f-year { list-style: none; margin: 8px 0 0; padding: 34px 0 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; position: relative; }
.arc .f-year::before { content: ""; position: absolute; left: 0; right: 0; top: 40px; height: 1px; background: linear-gradient(90deg, rgba(126,95,54,.15), var(--bronze) 15%, var(--bronze) 85%, rgba(126,95,54,.15)); }
.arc .f-year .m { position: relative; padding: 30px 18px 0 0; }
.arc .f-year .moon { position: absolute; top: 0; left: 0; width: 13px; height: 13px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFF6E3, #E8D2A8 60%, #C9A46A); box-shadow: 0 0 0 4px var(--stone), 0 0 14px 2px rgba(216,172,108,.45); }
.arc .f-year .he { display: block; font: 500 26px/1.1 var(--hebrew); color: var(--navy); }
.arc .f-year .en { display: block; margin-top: 4px; font: 600 11.5px/1.3 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--bronze); }
.arc .f-year ul { list-style: none; margin: 16px 0 0; padding: 0; }
.arc .f-year ul li + li { margin-top: 8px; }
.arc .f-year ul a { font: 400 18px/1.25 var(--display); color: var(--navy); text-decoration: none; background: linear-gradient(var(--bronze-lt), var(--bronze-lt)) 0 100% / 0 1px no-repeat; transition: background-size var(--d-med) var(--ease); }
.arc .f-year ul a:hover { background-size: 100% 1px; }
.arc .f-year ul a.ext::after { display: none; }
@media (max-width: 960px) { .arc .f-year { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 34px; } .arc .f-year::before { display: none; } }
@media (max-width: 560px) { .arc .f-year { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Chabad.org: a small, quiet strip */
.arc .f-cdo { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 18px 28px; align-items: center; padding: 18px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.arc .f-cdo .logo img { width: 120px; border-radius: 8px; }
.arc .f-cdo h2 { font-size: 22px; }
.arc .f-cdo p { margin-top: 4px; font-size: 15px; color: var(--ink-2); }
.arc .f-cdo .f-acts { margin-top: 0; }
@media (max-width: 760px) { .arc .f-cdo { grid-template-columns: 84px minmax(0, 1fr); } .arc .f-cdo .logo img { width: 84px; } .arc .f-cdo .f-acts { grid-column: 1 / -1; } }

/* Postcards with real photographs: the lettering sits on the picture */
.arc .pc--photo .pc-face { background: linear-gradient(0deg, rgba(10,22,40,.62) 0%, rgba(10,22,40,.18) 48%, rgba(10,22,40,0) 70%), var(--pc-img) center / cover no-repeat; }
.arc .pc--photo .pc-face::before, .arc .pc--photo .pc-face::after { display: none; }

/* Over 78 programs: a typeset index in four columns */
.arc .f-progs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px clamp(24px, 3vw, 48px); }
.arc .f-progs h3 { font: 600 12px/1.3 var(--text); letter-spacing: .15em; text-transform: uppercase; color: var(--bronze); padding-bottom: 10px; border-bottom: 1px solid var(--hair-strong); }
.arc .f-progs ul { list-style: none; margin: 0; padding: 0; }
.arc .f-progs li { padding: 8px 0; border-bottom: 1px solid var(--hair); font: 400 16.5px/1.3 var(--display); color: var(--navy); }
@media (max-width: 960px) { .arc .f-progs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .arc .f-progs { grid-template-columns: minmax(0, 1fr); } }

/* ---- Buttons: subtle 3D. A curved face, a thin edge for thickness, lift on hover, press on click ---- */
.arc .btn { position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #2E4E78 0%, #1F3A60 52%, #183052 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 -2px 6px rgba(0,0,0,.18) inset, 0 3px 0 #0F2340, 0 10px 22px -10px rgba(15,35,64,.65);
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s, filter .2s; }
.arc .btn::before { content: ""; position: absolute; inset: 1px 1px auto 1px; height: 48%; border-radius: inherit; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0)); }
.arc .btn::after { pointer-events: none; }
.arc .btn:hover { transform: translateY(-2px); background: linear-gradient(180deg, #355886 0%, #234270 52%, #1B355A 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.32) inset, 0 -2px 6px rgba(0,0,0,.16) inset, 0 5px 0 #0F2340, 0 16px 28px -12px rgba(15,35,64,.7); }
.arc .btn:active { transform: translateY(2px); transition-duration: .06s;
  box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 -1px 4px rgba(0,0,0,.2) inset, 0 1px 0 #0F2340, 0 4px 10px -6px rgba(15,35,64,.6); }
/* a soft sheen that crosses the face on hover */
.arc .btn > .sheen { display: none; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .arc .btn { background-size: 100% 100%; }
  .arc .btn:hover::before { background: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,0)); }
}
/* Light and outline buttons: ivory, with a sand-coloured edge */
.arc .btn--light, .arc .btn--ghost { color: var(--navy); background: linear-gradient(180deg, #FFFFFF 0%, #F8F3EA 100%);
  box-shadow: 0 1px 0 #fff inset, 0 0 0 1px rgba(126,95,54,.22) inset, 0 3px 0 #E2D6C2, 0 10px 20px -12px rgba(60,44,24,.45); }
.arc .btn--light:hover, .arc .btn--ghost:hover { background: linear-gradient(180deg, #FFFFFF 0%, #FBF7F0 100%);
  box-shadow: 0 1px 0 #fff inset, 0 0 0 1px rgba(126,95,54,.3) inset, 0 5px 0 #E2D6C2, 0 16px 26px -14px rgba(60,44,24,.5); }
.arc .btn--light:active, .arc .btn--ghost:active { box-shadow: 0 1px 0 #fff inset, 0 0 0 1px rgba(126,95,54,.3) inset, 0 1px 0 #E2D6C2, 0 4px 8px -6px rgba(60,44,24,.4); }
.arc .btn--light::before, .arc .btn--ghost::before { background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,0)); }
/* external-link arrow stays visible above the highlight */
.arc .btn.ext::after { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .arc .btn, .arc .btn:hover, .arc .btn:active { transform: none; } }

/* Blue buttons, calmer: a soft face and a soft shadow, no hard edge */
.arc .btn:not(.btn--light):not(.btn--ghost) {
  background: linear-gradient(180deg, #284A74 0%, #1D3658 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.16) inset, 0 8px 18px -10px rgba(15,35,64,.55); }
.arc .btn:not(.btn--light):not(.btn--ghost)::before { background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,0)); }
.arc .btn:not(.btn--light):not(.btn--ghost):hover {
  transform: translateY(-1px); background: linear-gradient(180deg, #2E5280 0%, #213D63 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 12px 24px -12px rgba(15,35,64,.6); }
.arc .btn:not(.btn--light):not(.btn--ghost):active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 4px 10px -6px rgba(15,35,64,.5); }
.arc .f-almanac .kind .ag { font-style: normal; margin-left: 8px; font: 600 10.5px/1 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--bronze); padding: 3px 6px 2px; border: 1px solid var(--hair-strong); border-radius: 3px; vertical-align: 1px; }

/* Printed schedules on the homepage: three sheets and the magazine, as objects */
.arc .f-sheets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) repeat(2, minmax(0, .5fr)); gap: clamp(14px, 1.6vw, 22px); align-items: start; }
.arc .f-sheets a { display: block; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 2px rgba(60,44,24,.1), 0 22px 40px -26px rgba(29,54,88,.55); transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s; }
.arc .f-sheets a:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(60,44,24,.1), 0 32px 52px -28px rgba(29,54,88,.6); }
.arc .f-sheets img { width: 100%; height: auto; }
.arc .f-sheets .sheet-l:nth-child(1) { grid-column: 1; grid-row: 1; }
.arc .f-sheets .sheet-l:nth-child(2) { grid-column: 2; grid-row: 1; }
.arc .f-sheets .sheet-l:nth-child(3) { grid-column: 1 / span 2; grid-row: 2; max-width: calc(50% - 11px); }
.arc .f-sheets .sheet-p:nth-child(4) { grid-column: 3; grid-row: 1 / span 2; }
.arc .f-sheets .sheet-p:nth-child(5) { grid-column: 4; grid-row: 1 / span 2; }
@media (max-width: 960px) { .arc .f-sheets { grid-template-columns: 1fr 1fr; } .arc .f-sheets a:nth-child(n) { grid-column: auto; grid-row: auto; max-width: none; } }
/* one row, equal heights: column widths follow each sheet's proportions */
.arc .f-sheets { grid-template-columns: 1.467fr 1.467fr 1.467fr .733fr .733fr; }
.arc .f-sheets a:nth-child(n) { grid-column: auto !important; grid-row: auto !important; max-width: none !important; }
@media (max-width: 960px) { .arc .f-sheets { grid-template-columns: 1fr 1fr; } }

/* ---- Buttons as glass: slim, translucent, a thin bright edge, no bevel ---- */
.arc .btn, .arc .btn:not(.btn--light):not(.btn--ghost) {
  min-height: 46px; padding: 0 24px; font-weight: 500; letter-spacing: .01em;
  background: linear-gradient(180deg, rgba(43,75,116,.78) 0%, rgba(29,54,88,.86) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), inset 0 1px 0 rgba(255,255,255,.35), 0 8px 22px -12px rgba(15,35,64,.45); }
.arc .btn::before, .arc .btn:not(.btn--light):not(.btn--ghost)::before { inset: 1px 14px auto 14px; height: 1px; border-radius: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0)); }
.arc .btn:hover, .arc .btn:not(.btn--light):not(.btn--ghost):hover { transform: translateY(-1px);
  background: linear-gradient(180deg, rgba(50,86,132,.82) 0%, rgba(33,61,99,.9) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), inset 0 1px 0 rgba(255,255,255,.45), 0 12px 26px -12px rgba(15,35,64,.5); }
.arc .btn:active, .arc .btn:not(.btn--light):not(.btn--ghost):active { transform: translateY(0) scale(.985);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), inset 0 1px 0 rgba(255,255,255,.25), 0 4px 12px -8px rgba(15,35,64,.45); }
.arc .btn--light, .arc .btn--ghost { color: var(--navy);
  background: linear-gradient(180deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,.42) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.75), inset 0 0 0 2px rgba(126,95,54,.08), 0 8px 20px -14px rgba(60,44,24,.4); }
.arc .btn--light:hover, .arc .btn--ghost:hover { background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.55));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), inset 0 0 0 2px rgba(126,95,54,.12), 0 12px 24px -14px rgba(60,44,24,.45); }
.arc .btn--light:active, .arc .btn--ghost:active { box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), 0 4px 10px -8px rgba(60,44,24,.4); }
.arc .btn--light::before, .arc .btn--ghost::before { background: linear-gradient(90deg, rgba(255,255,255,0), #fff, rgba(255,255,255,0)); }
.arc .btn--small { min-height: 40px; padding: 0 18px; }

/* Real photos in former placeholder slots */
.arc .slot.has-img { background: #EDE6DA; overflow: hidden; }
.arc .slot.has-img::before, .arc .slot.has-img::after { display: none; }
.arc .slot.has-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.arc .slot.has-img .slot-cap { position: absolute; left: 12px; bottom: 12px; z-index: 2; padding: 7px 12px; border-radius: 999px; font: 500 12.5px/1.2 var(--text); color: var(--navy); background: rgba(253,251,247,.82); }
/* A row of community photographs */
.arc .f-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.arc .f-photos figure { margin: 0; }
.arc .f-photos img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 999px 999px 6px 6px; box-shadow: 0 1px 2px rgba(60,44,24,.08), 0 24px 44px -30px rgba(60,44,24,.55); }
.arc .f-photos figcaption { margin-top: 12px; font-size: 13.5px; color: var(--ink-3); }
@media (max-width: 760px) { .arc .f-photos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .arc .f-photos figure:nth-child(3) { display: none; } }

/* ---- Over the Top: construction filmstrip ---- */
.arc .f-film { list-style: none; margin: clamp(24px, 3vw, 40px) 0 0; padding: 4px max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))) 18px; display: flex; gap: clamp(14px, 1.6vw, 22px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.arc .f-film li { flex: 0 0 clamp(240px, 26vw, 360px); scroll-snap-align: start; }
.arc .f-film a { display: block; border-radius: 4px; overflow: hidden; box-shadow: 0 1px 2px rgba(60,44,24,.1), 0 18px 34px -24px rgba(60,44,24,.55); }
.arc .f-film img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.arc .f-film a:hover img { transform: scale(1.04); }
.arc .f-film b { display: block; margin-top: 12px; font: 400 18px/1.2 var(--display); color: var(--bronze); }
.arc .f-film span { display: block; margin-top: 3px; font-size: 14.5px; color: var(--ink-2); }
/* the timeline photo column stays modest */
.arc #past .f-story .ph img { width: 100%; max-width: 340px; aspect-ratio: 16 / 10; object-fit: cover; }
/* ---- The new spaces: a mosaic ---- */
.arc .f-spaces { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.arc .f-spaces figure { margin: 0; }
.arc .f-spaces .big { grid-column: span 2; grid-row: span 2; }
.arc .f-spaces img { width: 100%; height: 100%; min-height: 0; aspect-ratio: 16 / 11; object-fit: cover; border-radius: 4px; box-shadow: 0 1px 2px rgba(60,44,24,.08), 0 18px 34px -26px rgba(60,44,24,.5); }
.arc .f-spaces .big img { aspect-ratio: auto; height: calc(100% - 30px); }
.arc .f-spaces figcaption { margin-top: 8px; font-size: 13px; color: var(--ink-2); }
.arc .f-photos--wide { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.arc .f-photos--wide img { border-radius: 4px; aspect-ratio: 4 / 5; }
@media (max-width: 960px) { .arc .f-spaces { grid-template-columns: repeat(2, minmax(0, 1fr)); } .arc .f-photos--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); } .arc .f-photos--wide figure:nth-child(3) { display: block; } }
/* Sponsorship option cards (form previews) */
.arc .f-form .optgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.arc .f-form .optgrid--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.arc .f-form .optc { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 12px; background: rgba(255,255,255,.65); box-shadow: inset 0 0 0 1px var(--hair-strong); cursor: default; }
.arc .f-form .optc input { position: absolute; opacity: 0; pointer-events: none; }
.arc .f-form .optc .p { font: 400 24px/1 var(--display); color: var(--navy); }
.arc .f-form .optc .t { font-size: 14px; color: var(--ink-2); line-height: 1.35; }
.arc .f-form .optc:first-child { box-shadow: inset 0 0 0 1.5px var(--navy); background: #fff; }
.arc .f-form .optc { position: relative; } .arc .f-form .optc input { width: 1px; height: 1px; left: 0; top: 0; }

.arc .f-art.grow { max-width: 1100px; margin: 0 auto; }
.arc .f-art.grow img { width: 100%; height: auto; }

/* New spaces: an even grid, one proportion, captions below */
.arc .f-spaces { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }
.arc .f-spaces .big { grid-column: auto; grid-row: auto; }
.arc .f-spaces img, .arc .f-spaces .big img { aspect-ratio: 4 / 3; height: auto; }
.arc .f-spaces figcaption { margin-top: 10px; font: 400 16px/1.3 var(--display); color: var(--navy); }
.arc .f-photos--today { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.arc .f-photos--today img { border-radius: 4px; aspect-ratio: 4 / 3; }
@media (max-width: 960px) { .arc .f-spaces { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .arc .f-photos--today { grid-template-columns: minmax(0, 1fr); } .arc .f-photos--today figure:nth-child(3) { display: block; } }

/* A glowing past: compact cards, five across, small photos (originals are low resolution) */
.arc .f-past { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(22px, 2.4vw, 34px) clamp(16px, 1.8vw, 26px); }
.arc .f-past > li { display: flex; flex-direction: column; position: relative; padding-top: 16px; border-top: 1px solid var(--hair-strong); }
.arc .f-past > li::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--stone); box-shadow: inset 0 0 0 1.5px var(--bronze); }
.arc .f-past > li.now::before { background: var(--navy); box-shadow: none; }
.arc .f-past .ph { order: -1; margin: 0 0 14px; padding: 0; background: none; border: 0; box-shadow: none; }
.arc .f-past .ph::before, .arc .f-past .ph::after { display: none; }
.arc .f-past .ph img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 4px; box-shadow: 0 1px 2px rgba(60,44,24,.08), 0 12px 24px -18px rgba(60,44,24,.5); }
.arc .f-past .yr { font: 400 26px/1 var(--display); color: var(--bronze); }
.arc .f-past .tx h2 { margin-top: 8px; font-size: 18px; line-height: 1.25; }
.arc .f-past .tx p { margin-top: 6px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 1100px) { .arc .f-past { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .arc .f-past { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.arc .pc--photo .pc-face { background-size: cover; background-position: center; }

/* Form previews: the whole form opens The Shul's secure ShulCloud form (no data is collected here) */
.arc .f-form form { position: relative; }
.arc .f-form .f-cover { position: absolute; inset: 0; z-index: 2; cursor: pointer; border-radius: inherit; }
.arc .f-form .send { position: relative; z-index: 3; }
.arc .f-form form:has(.f-cover:hover) .optc { border-color: rgba(30,48,80,.45); }
.arc .f-form form:has(.f-cover:hover) input, .arc .f-form form:has(.f-cover:hover) textarea { border-color: rgba(30,48,80,.4); }

/* Renovation page: "Today" closes the timeline as a wide card; renovation photo grid with a lead image */
.arc .f-past > li.today { grid-column: 1 / -1; display: grid; grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4px clamp(20px, 3vw, 44px); align-items: start; }
.arc .f-past > li.today .ph { order: 0; grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.arc .f-past > li.today .ph img { aspect-ratio: 16 / 8; }
.arc .f-past > li.today .tx h2 { font-size: clamp(22px, 2vw, 28px); }
.arc .f-past > li.today .tx p { font-size: 16px; }
.arc .f-photos--ren { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.arc .f-photos--ren figure { grid-column: span 2; }
.arc .f-photos--ren .wide { grid-column: span 4; grid-row: span 2; }
.arc .f-photos--ren .half { grid-column: span 3; }
.arc .f-photos--ren .half img { aspect-ratio: 16 / 9; }
.arc .f-renlist { list-style: none; margin: 0 0 clamp(32px, 4vw, 52px); padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 clamp(16px, 2vw, 28px); border-top: 1px solid var(--hair-strong); }
.arc .f-renlist li { padding-top: 16px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.arc .f-renlist b { display: block; margin-bottom: 6px; font: 400 22px/1.1 var(--display); color: var(--navy); }
@media (max-width: 960px) { .arc .f-renlist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; } }
.arc .f-photos--ren .wide img { aspect-ratio: auto; height: calc(100% - 34px); width: 100%; object-fit: cover; }
@media (max-width: 760px) { .arc .f-past > li.today { grid-template-columns: minmax(0, 1fr); } .arc .f-past > li.today .ph { grid-column: 1; grid-row: auto; order: -1; margin-bottom: 14px; } .arc .f-photos--ren { grid-template-columns: minmax(0, 1fr); } .arc .f-photos--ren figure, .arc .f-photos--ren .wide, .arc .f-photos--ren .half { grid-column: auto; grid-row: auto; } .arc .f-photos--ren .wide img { aspect-ratio: 4 / 3; height: auto; } }

/* Sticky section labels and anchor jumps clear the "On this page" bar where a page has one (Ask the Rabbi and others). */
.arc:has(.subnav) .f-label { top: calc(var(--header-short) + 104px); }
.arc:has(.subnav) [id] { scroll-margin-top: calc(var(--header-h) + 120px); }
/* Folded long reading ("Continue reading"), see arc.js. */
.arc .is-folded .fold-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s cubic-bezier(.2,.7,.2,1); }
.arc .is-folded.is-open .fold-more { grid-template-rows: 1fr; }
.arc .is-folded .fold-inner { overflow: hidden; min-height: 0; }
.arc .is-folded .fold-inner > :first-child { margin-top: 1.05em; }
.arc .is-folded:not(.is-open) .f-prose { position: relative; }
.arc .is-folded:not(.is-open) .f-prose::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5.5em; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--fold-bg, var(--limestone, #F1EADF))); }
.arc .fold-act { margin-top: 22px; }
@media (prefers-reduced-motion: reduce) { .arc .is-folded .fold-more { transition: none; } }

/* Weekly Magazine: this week's issue with its real front page (director's choice, 2026-11-08). */
.mz-h1{font:400 var(--t-1)/1.05 var(--display);color:var(--navy);margin:10px 0 0}
.mz-cover{--w:min(380px,78vw);width:var(--w);aspect-ratio:8.5/11;position:relative;perspective:1400px}
.mz-sheet{position:absolute;inset:0;background:linear-gradient(160deg,#10294F 0%,#0B2141 55%,#081A35 100%);color:#F6F0E6;
  border-radius:3px 6px 6px 3px;padding:9% 9% 8%;display:flex;flex-direction:column;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 30px 60px -24px rgba(11,33,65,.55), 0 8px 18px -8px rgba(11,33,65,.4);
  transform:rotateY(-9deg) rotateX(2deg);transform-origin:left center;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.mz-sheet::before{content:"";position:absolute;left:0;top:0;bottom:0;width:7%;background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(255,255,255,.06) 60%,transparent);border-radius:3px 0 0 3px}
.mz-sheet::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.10) 45%,transparent 60%);
  background-size:250% 100%;background-position:120% 0;transition:background-position 1.2s ease}
.mz-cover:hover .mz-sheet{transform:rotateY(-3deg) rotateX(0) translateY(-6px)}
.mz-cover:hover .mz-sheet::after{background-position:-20% 0}
.mz-cover::after{content:"";position:absolute;left:4%;right:-3%;bottom:-3%;height:5%;background:radial-gradient(closest-side,rgba(11,33,65,.28),transparent);filter:blur(6px);z-index:-1}
.mz-top{display:flex;justify-content:space-between;font:600 clamp(8px,.8vw,10.5px)/1.2 var(--text);letter-spacing:.2em;text-transform:uppercase;color:#C7A57A}
.mz-sheet>p{margin:0}.mz-sheet .mz-name{font:400 clamp(40px,4.6vw,64px)/.98 var(--display);margin-top:9%;letter-spacing:-.01em}
.mz-name br+*{color:#C7A57A}
.mz-sheet .mz-rule{height:1px;background:linear-gradient(90deg,#C7A57A,transparent);margin:auto 0 6%}
.mz-issue{font:400 clamp(17px,1.7vw,23px)/1.2 var(--display);color:#E9D3B0}
.mz-inside{font:500 clamp(9px,.85vw,11px)/1.5 var(--text);letter-spacing:.14em;text-transform:uppercase;color:rgba(246,240,230,.72);margin-top:4%}
.mz-sheet .mz-foot{font:500 clamp(8px,.75vw,10px)/1.2 var(--text);letter-spacing:.18em;text-transform:uppercase;color:rgba(246,240,230,.5);margin-top:9%;padding-top:5%;border-top:1px solid rgba(199,165,122,.25)}
@keyframes mz-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.mz-anim{animation:mz-rise 1s cubic-bezier(.2,.7,.2,1) both}.mz-anim.d2{animation-delay:.12s}.mz-anim.d3{animation-delay:.24s}
@media (prefers-reduced-motion:reduce){.mz-anim{animation:none}.mz-sheet,.mz-sheet::after{transition:none}}
.mz-meta{display:flex;flex-wrap:wrap;gap:6px 18px;font:600 12px/1.4 var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--bronze)}
.mz-he{font:400 clamp(22px,2vw,30px)/1 "Frank Ruhl Libre","David",serif;color:var(--bronze)}
.mz-note{font:400 13px/1.5 var(--text);color:var(--ink-2,#4A5465);margin-top:14px}

.oa{padding:clamp(28px,3.4vw,56px) 0 var(--f-pad)}
.oa .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,6vw,104px);align-items:center}
.oa .mz-link{display:block;width:100%;max-width:420px;justify-self:center}.oa .mz-cover{--w:100%}
.oa h2{font:400 clamp(52px,6.4vw,104px)/.95 var(--display);color:var(--navy);letter-spacing:-.02em;margin:18px 0 0}
.oa .mz-he{display:block;margin-top:16px;text-align:left}
.oa .actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.oa .mz-line{height:1px;background:var(--hair-strong);margin:28px 0 22px;max-width:520px}
.oa .lede{font-size:18px;line-height:1.6;color:#2E3644;max-width:30em}
.oa .actions{margin-top:30px}
@media (max-width:760px){.oa .wrap{grid-template-columns:1fr;gap:34px}.oa .mz-link{max-width:min(300px,76vw)}.oa .txt{order:2}.oa h2{font-size:clamp(46px,13vw,64px)}}
.oa .wrap{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(40px,5vw,88px)}.oa .mz-link{max-width:560px}@media (max-width:760px){.oa .wrap{grid-template-columns:1fr}.oa .mz-link{max-width:min(360px,88vw)}}.mz-real{display:block;transform:none;transform-origin:left center;transition:transform .9s cubic-bezier(.2,.7,.2,1);border-radius:2px 5px 5px 2px;overflow:hidden;box-shadow:0 34px 64px -26px rgba(11,33,65,.55),0 8px 18px -8px rgba(11,33,65,.35)}.mz-real img{display:block;width:100%;height:auto}.mz-link:hover .mz-real{transform:translateY(-6px)}@media (prefers-reduced-motion:reduce){.mz-real{transition:none}}
/* Mobile: the D'var Torah heading and its "Continue reading" button centred. */
@media (max-width: 760px) { .arc section:has([data-fold]) .f-label, .arc .fold-act { text-align: center; } }

/* Homepage: the glass "This Shabbos" strip's soft edge must reach the page colour inside the strip itself (it is shorter than
   the 168 px the original gradient assumed), and end in the page's own colour, so the building fades out with no seam. */
.arc .shabbos-strip { padding-bottom: 96px; background: linear-gradient(180deg, rgba(248,244,238,0) 0, rgba(248,244,238,0) 64px, rgba(248,244,238,.92) 124px, rgb(248,244,238) 168px); }
.arc .shabbos-strip + * { margin-top: -96px; }

/* Program pages (Bat Mitzvah Club and the youth programs): a photo collage beside the title, and photo cards. */
.arc .bm-hero { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,6fr); gap: clamp(32px,5vw,80px); align-items: center; margin-top: clamp(20px,2.4vw,36px); }
.arc .bm-collage { position: relative; aspect-ratio: 6/5; }
.arc .bm-collage figure { position: absolute; margin: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px -28px rgba(11,33,65,.45); background: var(--limestone); }
.arc .bm-collage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.arc .bm-a { left: 0; top: 0; width: 66%; height: 72%; }
.arc .bm-b { right: 0; top: 14%; width: 40%; height: 46%; }
.arc .bm-c { right: 8%; bottom: 0; width: 52%; height: 38%; }
.arc .bm-cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(18px,2vw,30px); margin-top: clamp(28px,3vw,44px); }
.arc .bm-cards article { background: var(--white, #FFFEFC); border-radius: 20px; overflow: hidden; box-shadow: 0 24px 48px -30px rgba(11,33,65,.35); }
.arc .bm-cards img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.arc .bm-cards h3 { font: 400 26px/1.1 var(--display); color: var(--navy); margin: 22px 24px 0; }
.arc .bm-cards p { font-size: 16px; line-height: 1.6; color: #2E3644; margin: 10px 24px 26px; }
@media (max-width: 760px) {
  .arc .bm-hero { grid-template-columns: 1fr; }
  .arc .bm-cards { grid-template-columns: 1fr; }
}
.arc .bm-hero .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.arc .bm-cards { align-items: start; }
/* Bat Mitzvah collage: the wide group photo runs the full width under the two above it, so every girl shows. */
.arc .bm-collage { aspect-ratio: 6/5.4; }
.arc .bm-c { left: 6%; right: 0; width: auto; bottom: 0; height: auto; aspect-ratio: 850/350; }
.arc .bm-a { height: 60%; }
.arc .bm-b { top: 8%; height: 44%; }
.arc .bm-collage { aspect-ratio: 6/5.6; }
.arc .bm-c img { height: auto; object-fit: contain; }
.arc .bm-c { background: transparent; }
.arc .bm-collage { aspect-ratio: 6/5.6; }
.arc .bm-a { height: 60%; }
.arc .bm-b { top: 8%; height: 44%; }

/* Program page variants: a full-width photo, a photo strip, numbers, and a day-by-day week. */
.arc .bm-hero--solo { grid-template-columns: 1fr; }
.arc .pg-wide { margin: clamp(30px,3.6vw,52px) 0 0; border-radius: 22px; overflow: hidden; box-shadow: 0 34px 70px -34px rgba(11,33,65,.5); }
.arc .pg-wide img { width: 100%; aspect-ratio: 21/8; object-fit: cover; object-position: 50% 30%; display: block; }
.arc .pg-strip { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: clamp(12px,1.4vw,20px); margin-top: clamp(30px,3.6vw,52px); }
.arc .pg-strip figure { margin: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 26px 52px -30px rgba(11,33,65,.45); }
.arc .pg-strip figure:nth-child(2) { transform: translateY(26px); }
.arc .pg-strip img { width: 100%; aspect-ratio: 4/3.4; object-fit: cover; display: block; }
.arc .pg-stats { background: var(--navy); color: #F6F0E6; padding: clamp(34px,4vw,56px) 0; margin-top: clamp(40px,5vw,72px); }
.arc .pg-stats .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.arc .pg-stats b { display: block; font: 400 clamp(38px,4vw,60px)/1 var(--display); color: #E9D3B0; }
.arc .pg-stats span { display: block; margin-top: 8px; font: 500 13px/1.4 var(--text); letter-spacing: .14em; text-transform: uppercase; color: rgba(246,240,230,.75); }
.arc .pg-week { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--bronze-lt); }
.arc .pg-week li { position: relative; padding: 0 0 26px 28px; }
.arc .pg-week li::before { content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--bronze); box-shadow: 0 0 0 4px rgba(199,165,122,.25); }
.arc .pg-week b { display: block; font: 400 24px/1.2 var(--display); color: var(--navy); }
.arc .pg-week span { display: block; margin-top: 6px; font-size: 16.5px; line-height: 1.6; color: #2E3644; }
@media (max-width: 760px) {
  .arc .pg-strip { grid-template-columns: 1fr 1fr; } .arc .pg-strip figure:first-child { grid-column: 1 / -1; } .arc .pg-strip figure:nth-child(2) { transform: none; }
  .arc .pg-stats .wrap { grid-template-columns: 1fr 1fr; }
  .arc .pg-wide img { aspect-ratio: 4/3; }
}