/* Chabad Kingston (formerly Kingston Kehilla Guide)
   Layout: nav bar, deep-petrol hero with the name and this Friday's candle lighting as the one big moment,
   a sticky search panel on its edge, the directory as four headed lists, then one column of sections. People-and-places as cards;
   trails and outings as a distance ledger. One brand color plus a gold accent; no per-section hues. */
/* Fonts are served from assets/fonts (SIL Open Font License; from Google Fonts, October 2026). */
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400 500;font-display:swap;src:url(fonts/newsreader-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400 500;font-display:swap;src:url(fonts/newsreader-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/public-sans-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/public-sans-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  --paper:#FFFFFF; --alt:#F4F5F2; --card:#FFFFFF; --ink:#14212B; --soft:#4A5866; --rule:#E3E6E8; --rule-2:#C7CFD3;
  --brand:#0F3B4C; --brand-deep:#0A2733; --brand-tint:#EEF3F4; --on-brand:#FFFFFF; --on-brand-soft:#C9D6DC;
  --gold:#D9A441; --gold-hi:#E5B85E; --gold-ink:#8A5A12; --gold-soft:#F7EEDC;
  --red:#A23B2A; --red-soft:#F4E1DC;
  --shadow:0 1px 2px rgba(10,39,51,.06), 0 12px 32px -14px rgba(10,39,51,.22);
  --f-display:"Newsreader", Georgia, "Times New Roman", serif;
  --f-body:"Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r-sm:8px; --r-md:14px; --r-lg:20px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#0C1519; --alt:#111D22; --card:#131F25; --ink:#E4ECEF; --soft:#9DB0B8; --rule:#22323A; --rule-2:#304550;
  --brand:#0F3B4C; --brand-deep:#08202A; --brand-tint:#16303A; --on-brand-soft:#BFD0D7;
  --gold-ink:#E5B85E; --gold-soft:#2B2414;
  --red:#E88E7D; --red-soft:#3A201B;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 32px -14px rgba(0,0,0,.6);
  color-scheme:dark }}
:root[data-theme="dark"]{
  --paper:#0C1519; --alt:#111D22; --card:#131F25; --ink:#E4ECEF; --soft:#9DB0B8; --rule:#22323A; --rule-2:#304550;
  --brand:#0F3B4C; --brand-deep:#08202A; --brand-tint:#16303A; --on-brand-soft:#BFD0D7;
  --gold-ink:#E5B85E; --gold-soft:#2B2414;
  --red:#E88E7D; --red-soft:#3A201B;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 32px -14px rgba(0,0,0,.6);
  color-scheme:dark }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:150px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.55;font-variant-numeric:tabular-nums}
img{max-width:100%}
[hidden]{display:none!important}
a{color:var(--brand)}
/* :where keeps this at plain-link strength, so links styled by their own class keep their color. */
@media (prefers-color-scheme: dark){:where(:root:not([data-theme="light"])) a{color:#8FC3D3}}
:where(:root[data-theme="dark"]) a{color:#8FC3D3}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.gut{padding-left:max(20px, env(safe-area-inset-left, 0px));padding-right:max(20px, env(safe-area-inset-right, 0px))}
.wrap{max-width:1200px;margin:0 auto}
svg.i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.eyebrow{display:block;font-size:15px;font-weight:600;color:var(--gold-ink)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-size:15px;font-weight:600;border-radius:var(--r-sm);padding:12px 20px;min-height:44px;border:1px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn-gold{background:var(--gold);color:#1A1406}
.btn-gold:hover{background:var(--gold-hi);color:#1A1406}
.btn-solid{background:var(--brand);color:var(--on-brand)}
.btn-solid:hover{background:var(--brand-deep);color:var(--on-brand)}
.btn-solid:disabled{opacity:.6;cursor:progress}


/* ---------- Top strip: Hebrew date, candle lighting, Chaverim ---------- */
.topbar{background:var(--brand-deep);color:var(--on-brand-soft);font-size:13px;padding-top:env(safe-area-inset-top, 0px)}
.topbar .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 24px;padding-block:8px}
.tb-l,.tb-r{display:flex;flex-wrap:wrap;gap:4px 22px}
.topbar a{color:var(--on-brand-soft);text-decoration:none}
.topbar a:hover{color:#FFFFFF;text-decoration:underline}
.topbar .cl-strip{color:var(--gold);font-weight:600}
.topbar .tb-chav{color:#FFFFFF}
.topbar .cl-strip,.topbar .tb-chav{display:inline-flex;align-items:center;gap:6px}
.topbar .cl-strip{flex-wrap:wrap;column-gap:16px}
.topbar .cl-strip span + span{color:var(--on-brand-soft);font-weight:500}
.sb-x:has(span:empty:first-child){display:none}
.topbar .cl-strip::before,.topbar .tb-chav::before{content:"";width:14px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3c2.6 3 4 5.2 4 7.3a4 4 0 0 1-8 0C8 8.2 9.4 6 12 3Z' fill='%23D9A441'/%3E%3Cpath d='M12 15v6' stroke='%23D9A441' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.topbar .tb-chav::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9D6DC' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M5 3.5h3.5l1.7 4.3-2.2 1.4a11 11 0 0 0 6.8 6.8l1.4-2.2 4.3 1.7V19a1.6 1.6 0 0 1-1.7 1.6C10.4 20.1 3.9 13.6 3.4 5.2A1.6 1.6 0 0 1 5 3.5Z'/%3E%3C/svg%3E")}

/* ---------- Nav bar (white, above the hero) ---------- */
.navbar{position:sticky;top:0;z-index:25;background:var(--card);border-bottom:1px solid var(--rule)}
.navbar .wrap{padding-block:14px;transition:padding-block .2s ease}
/* Once the page scrolls, the bar stays at the top and slims down (app.js adds .compact). */
.navbar.compact{box-shadow:0 8px 20px -14px rgba(10,39,51,.55)}
.navbar.compact .wrap{padding-block:6px}
.navbar.compact .brand .mark{width:36px;height:36px}
.navbar.compact .brand .mark svg{width:32px;height:32px}
.navbar.compact .brand .bs{display:none}
.nav{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:12px 24px}
.brand{display:inline-flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;flex:none}
.brand .mark{width:44px;height:44px;border-radius:12px;background:var(--brand);display:grid;place-items:center;flex:none}
.brand .mark svg{width:40px;height:40px}
.brand .bt{display:grid;line-height:1.15}
.brand .bn{font-family:var(--f-display);font-size:25px;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.brand .bs{font-size:13px;color:var(--soft)}
.links{display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-end;gap:2px;min-width:0}
.links > a:not(.btn){position:relative;color:var(--ink);text-decoration:none;font-size:15px;font-weight:500;padding:10px 11px;border-radius:var(--r-sm);white-space:nowrap}
.links > a:not(.btn)::after{content:"";position:absolute;left:11px;right:11px;bottom:4px;height:2px;border-radius:2px;background:var(--gold);transform:scaleX(0);transition:transform .18s ease}
.links > a:not(.btn):hover::after,.links > a[aria-current]::after{transform:scaleX(1)}
.links > a[aria-current]{font-weight:600}
.links .btn{margin-left:10px;white-space:nowrap}
/* Members: "Sign in", or a first name and Sign out (filled in by app.js when Google sign-in is set up). */
.member form{margin:0;display:contents}
.links > .member{display:flex;align-items:center}
.links > .member a,.links > .member button{color:var(--ink);background:none;border:0;font:inherit;font-size:15px;font-weight:500;padding:10px 11px;white-space:nowrap;border-radius:var(--r-sm);text-decoration:none;cursor:pointer}
.links > .member a:hover,.links > .member button:hover{background:var(--alt)}
.menu-list .member{display:grid;gap:2px;margin-top:6px;padding-top:6px;border-top:1px solid var(--rule)}
.menu-list .member button{color:inherit;background:none;border:0;font:inherit;font-size:15px;font-weight:500;text-align:left;padding:11px 14px;border-radius:var(--r-sm);cursor:pointer}
.menu-list .member button:hover{background:var(--alt)}
.menu{display:none}
.menu summary{list-style:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid var(--rule-2);border-radius:var(--r-sm);color:var(--ink);font-size:15px;font-weight:600;cursor:pointer;user-select:none}
.menu summary::-webkit-details-marker{display:none}
.menu summary svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.menu[open] summary{background:var(--alt)}
/* While the menu is open, lift the nav bar (and the menu in it) above the sticky search bar. */
.navbar:has(.menu[open]){z-index:30}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--brand);color:var(--on-brand);overflow:hidden}
.hero > .wrap{position:relative;max-width:1240px;padding-block:64px 136px}
/* Fixed so the header's overflow:hidden can't clip it. */
.menu-list{position:fixed;z-index:60;top:calc(env(safe-area-inset-top, 0px) + 72px);right:16px;width:min(300px, calc(100vw - 32px));max-height:calc(100vh - 96px);overflow:auto;display:grid;gap:2px;padding:8px;background:var(--card);border:1px solid var(--rule);border-radius:14px;box-shadow:var(--shadow)}
.menu-list a{display:block;padding:11px 14px;border-radius:var(--r-sm);color:var(--ink);text-decoration:none;font-size:15px;font-weight:500}
.menu-list a:hover,.menu-list a[aria-current="page"]{background:var(--alt)}
.menu-list .menu-post{margin-top:6px;background:var(--gold);color:#1A1406;font-weight:600;text-align:center}


/* Mazal tov strip, first thing on the home page */
.mazal{display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;margin:-36px 0 32px;padding:10px 18px;border:1px solid rgba(229,184,94,.6);border-radius:var(--r-md);background:rgba(255,255,255,.06)}
.mz-l{margin:0;display:flex;align-items:center;gap:8px;font-family:var(--f-display);font-size:22px;line-height:1;color:var(--gold-hi)}
.mz-l .i{width:24px;height:24px;stroke:var(--gold-hi)}
.mz-list{display:flex;gap:10px;flex:1;min-width:0;margin:0;padding:0;list-style:none;overflow-x:auto;scrollbar-width:none}
.mz-list a{display:flex;flex-direction:column;gap:2px;padding:8px 14px;border-radius:10px;background:rgba(255,255,255,.09);color:#FFFFFF;text-decoration:none;white-space:nowrap}
.mz-list a:hover{background:rgba(255,255,255,.16)}
.mz-list b{font-size:15px;font-weight:600}
.mz-list span{font-size:13px;color:var(--on-brand-soft)}
.mz-x{flex:1;min-width:220px;margin:0;font-size:14px;color:var(--on-brand-soft)}
.mz-go{color:var(--gold-hi);font-size:15px;font-weight:600;white-space:nowrap}
@media (max-width:760px){.mazal{margin:0 0 28px;padding:14px 16px}.mz-list{flex-basis:100%}}
.hero-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:40px 64px;align-items:center}
.hero-copy{display:grid;gap:20px;min-width:0}
.kicker{margin:0;font-size:15px;font-weight:600;color:var(--gold)}
.hero h1{font-family:var(--f-display);font-weight:400;font-size:clamp(46px,6.4vw,86px);line-height:.98;letter-spacing:-.025em;margin:0;max-width:12ch;text-wrap:balance}
.lede{margin:0;font-size:19px;line-height:1.5;color:var(--on-brand-soft);max-width:34em}
.hero-search{background:var(--card);border:0;border-radius:14px;padding:4px 16px;box-shadow:0 20px 50px -24px rgba(0,0,0,.6)}
.hero-search input{padding:15px 0}
.quick{display:flex;flex-wrap:wrap;gap:8px}
.quick a{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.28);color:#FFFFFF;text-decoration:none;font-size:14px;font-weight:600}
.quick a:hover{background:rgba(255,255,255,.12)}
/* Three real photos beside the heading; on phones two, side by side. */
.collage{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-rows:220px 220px;gap:14px;min-width:0}
.collage figure{margin:0;position:relative;border-radius:20px;overflow:hidden;background:var(--brand-deep)}
.collage figure:first-child{grid-row:1/span 2}
.collage img{width:100%;height:100%;object-fit:cover;display:block}
.collage figcaption{position:absolute;left:12px;bottom:12px;padding:5px 12px;border-radius:999px;background:rgba(10,39,51,.82);color:#FFFFFF;font-size:13px;font-weight:600}

/* ---------- This week: cards that overlap the bottom of the hero ---------- */
.week{position:relative;z-index:2;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:16px;margin-top:-80px}
.week-dyn{display:contents}
.wk{border-radius:var(--r-lg);padding:24px;display:flex;flex-direction:column;gap:6px;background:var(--card);border:1px solid var(--rule);box-shadow:0 24px 50px -32px rgba(10,39,51,.45)}
.wk p{margin:0}
.wk > a{margin-top:auto;padding-top:12px;font-weight:600;font-size:15px}
.wk-l{font-size:15px;font-weight:600;color:var(--soft)}
.wk-n{font-family:var(--f-display);font-size:52px;line-height:1;font-variant-numeric:lining-nums}
.wk-t{font-size:15px;color:var(--soft)}
.wk-move{background:var(--gold-soft);border-color:transparent}
.wk-move .wk-l{color:var(--gold-ink)}
/* This Friday's candle lighting: the one large number in gold (app.js fills in the time). */
.wk.shabbos{background:var(--brand-deep);border-color:rgba(217,164,65,.5);color:#FFFFFF;gap:4px}
.sb-l{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:#FFFFFF}
.sb-l svg{width:20px;height:20px;fill:none;stroke:var(--gold);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sb-t{font-family:var(--f-display);font-weight:400;font-size:clamp(46px,5vw,60px);line-height:1.05;letter-spacing:-.01em;color:var(--gold);font-variant-numeric:lining-nums;padding-top:6px}
.sb-d{display:flex;flex-wrap:wrap;gap:2px 14px;font-size:15px;color:var(--on-brand-soft)}
.sb-d .cl-day{color:#FFFFFF;font-weight:600}
.wk.shabbos a{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.14);color:#FFFFFF;text-decoration:underline;text-decoration-color:rgba(217,164,65,.7);text-underline-offset:4px}
.wk.shabbos a:hover{text-decoration-color:var(--gold)}

/* ---------- Search panel ---------- */
.panel{position:sticky;top:var(--nav-h, 0px);z-index:20;margin-top:-64px;padding-top:env(safe-area-inset-top, 0px)}
.panel-in{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-md);box-shadow:var(--shadow);padding:10px;display:grid;gap:8px}
.search{display:flex;align-items:center;gap:10px;padding:0 14px;border-radius:var(--r-sm);background:var(--alt);border:1px solid var(--rule)}
.search:focus-within{border-color:var(--brand)}
.search .i{color:var(--soft)}
.search input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:inherit;font-size:17px;padding:13px 0;outline:none}
.search input::placeholder{color:var(--soft)}
.search .count{font-size:14px;color:var(--soft);white-space:nowrap}


/* ---------- Picture cards (the Moving guide) ---------- */
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.feat{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.feat img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:#EEF3F4}
.feat > div{padding:20px 22px 22px;display:grid;gap:8px}
.feat h3{font-family:var(--f-display);font-weight:400;font-size:24px;line-height:1.15}
.feat p{margin:0;color:var(--soft);font-size:15px}
.feat a{font-weight:600;font-size:15px;text-decoration:none;margin-top:4px}
.feat .num{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;font-family:var(--f-display);font-weight:400;font-size:40px;line-height:1;color:var(--brand)}
.feat .num small{font-family:var(--f-body);font-size:15px;font-weight:600;color:var(--soft)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .feat .num{color:#8FC3D3}}
:root[data-theme="dark"] .feat .num{color:#8FC3D3}

/* ---------- Home page blocks ---------- */
.block{padding-top:96px}
.block:empty{display:none}
.bh{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 32px;margin-bottom:28px}
.bh > div{display:grid;gap:8px}
.bh h2,.head h2,.post h2,.post h1{font-family:var(--f-display);font-weight:400;font-size:clamp(34px,4vw,48px);line-height:1.05;letter-spacing:-.015em;margin:0;text-wrap:balance}
.bh p{margin:0;color:var(--soft);font-size:17px}
.bh > a{font-weight:600}
.head{display:grid;gap:10px;padding-top:96px;margin-bottom:24px}

/* The directory: four headed lists */
.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:28px 20px;align-items:start}
.dir{display:grid;gap:14px}
.dir h3{display:flex;align-items:center;gap:12px;margin:0;font-family:var(--f-display);font-weight:400;font-size:26px;line-height:1.2}
.dir-ic{width:40px;height:40px;border-radius:12px;background:var(--brand-tint);display:grid;place-items:center;flex:none}
.dir-ic svg{width:20px;height:20px;fill:none;stroke:var(--brand);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dir ul{list-style:none;margin:0;padding:0;background:var(--card);border:1px solid var(--rule);border-radius:16px;overflow:hidden}
.dir li + li{border-top:1px solid var(--rule)}
.dir a{display:flex;align-items:center;gap:10px;min-height:52px;padding:10px 16px;color:var(--ink);text-decoration:none}
.dir a:hover{background:var(--alt)}
.dir .dn{flex:1;min-width:0;font-weight:600;line-height:1.3}
.dir .dc{flex:none;font-size:14px;color:var(--soft)}
.dir .dc-empty{color:var(--gold-ink);font-weight:600}

/* The featured partner spot */
.block.ad{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;margin-top:96px;padding:40px clamp(24px,4vw,48px);border-radius:24px;background:var(--brand-deep);color:#FFFFFF}
.ad p{margin:0}
.ad > div{display:grid;gap:10px;max-width:44em}
.ad-l{font-size:14px;font-weight:600;color:var(--gold)}
.ad-t{font-family:var(--f-display);font-size:clamp(30px,3.4vw,40px);line-height:1.08;letter-spacing:-.01em}
.ad-x{font-size:17px;color:var(--on-brand-soft)}

/* Homes near the shuls */
.hf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:20px}
.hf{display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:20px;overflow:hidden;background:var(--card);color:var(--ink);text-decoration:none;transition:box-shadow .15s}
a.hf{color:var(--ink)}
.hf:hover{box-shadow:var(--shadow)}
.hf img{width:100%;height:220px;object-fit:cover;display:block;background:var(--alt)}
.hf-b{display:grid;gap:8px;padding:18px 22px 22px}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{font-size:13px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--alt);color:var(--soft)}
.tag-in{background:var(--brand-tint);color:var(--brand)}
.hf-p{font-family:var(--f-display);font-size:34px;line-height:1}
.hf-p small{font-family:var(--f-body);font-size:15px;color:var(--soft)}
.hf-n{font-size:17px;font-weight:600}
.hf-r{font-size:15px;color:var(--soft)}

/* Jobs, news and kosher food, side by side */
.block.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:40px;align-items:start}
.col{display:grid}
.col-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:12px;margin-bottom:6px;border-bottom:2px solid var(--ink)}
.col-h h2{margin:0;font-family:var(--f-display);font-weight:400;font-size:32px;line-height:1.1}
.col-h a{font-weight:600;font-size:15px}
.cr{display:grid;gap:2px;padding:12px 8px;margin:0 -8px;border-radius:10px;color:var(--ink);text-decoration:none}
a.cr{color:var(--ink)}
.cr + .cr{border-top:1px solid var(--rule)}
.cr:hover{background:var(--alt)}
.cr b{font-size:17px;line-height:1.3}
.cr > span,.cr-tx > span{font-size:14px;color:var(--soft)}
.cr .cr-d{font-size:13px;font-weight:600;color:var(--gold-ink)}
.cr-th{display:flex;align-items:center;gap:14px}
.cr-th img{width:88px;height:66px;object-fit:cover;border-radius:10px;flex:none;background:var(--alt)}
.cr-tx{display:grid;gap:2px;min-width:0}

/* Moving to Kingston */
.move{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));border-radius:28px;overflow:hidden;background:var(--alt)}
.move > img{width:100%;height:100%;min-height:320px;object-fit:cover;display:block}
.move-b{padding:clamp(24px,4vw,48px);display:grid;gap:18px;align-content:center}
.move-b h2{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(32px,3.6vw,44px);line-height:1.05;letter-spacing:-.015em;text-wrap:balance}
.move-b p{margin:0;font-size:17px;color:var(--soft)}
.move-b .src{font-size:13px}
.stats{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px}
.stats div{display:flex;flex-direction:column-reverse;gap:2px;border-top:1px solid var(--rule-2);padding-top:12px}
.stats dt{font-size:14px;color:var(--soft)}
.stats dd{margin:0;font-family:var(--f-display);font-size:36px;line-height:1;font-variant-numeric:lining-nums}
.move-a{display:flex;flex-wrap:wrap;gap:10px}

@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .dir-ic svg{stroke:#8FC3D3}}
:root[data-theme="dark"] .dir-ic svg{stroke:#8FC3D3}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .tag-in{color:#8FC3D3}}
:root[data-theme="dark"] .tag-in{color:#8FC3D3}

/* ---------- Sections ---------- */
main{display:grid;gap:80px;padding-block:72px 80px}
section.sec{display:grid;gap:22px}
.sh{display:flex;gap:16px;align-items:center;padding-bottom:18px;border-bottom:1px solid var(--rule)}
.sh .ic{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:var(--brand);color:var(--on-brand);flex:none;margin-top:2px}
.sh h2{font-family:var(--f-display);font-weight:400;font-size:clamp(28px,3.2vw,38px);line-height:1.1;letter-spacing:-.01em;margin:0;text-wrap:balance}
.sh p{margin:6px 0 0;color:var(--soft);max-width:62ch}
.sh .n{font-size:13px;font-weight:600;color:var(--brand);background:var(--brand-tint);border-radius:999px;padding:3px 10px;white-space:nowrap}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .sh .n{color:#8FC3D3}}
:root[data-theme="dark"] .sh .n{color:#8FC3D3}
.sh-t{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;min-width:0}

/* Filter pills and groups on a section page */
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:14px;font-weight:600;color:var(--ink);background:var(--card);border:1px solid var(--rule-2);border-radius:999px;padding:8px 14px;min-height:40px;cursor:pointer}
.pill span{font-weight:500;color:var(--soft)}
.pill:hover{border-color:var(--brand)}
.pill.on{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.pill.on span{color:var(--on-brand-soft)}
.groups{display:grid;gap:36px}
.group{display:grid;gap:14px}
.gh{display:flex;align-items:baseline;gap:10px;margin:0;font-family:var(--f-display);font-size:22px;font-weight:400;line-height:1.2;color:var(--ink)}
.gh span{font-family:var(--f-body);font-size:14px;color:var(--soft)}
.gh::after{content:"";flex:1;height:1px;background:var(--rule);align-self:center}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.card{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-md);padding:22px;display:flex;flex-direction:column;gap:12px;min-width:0;transition:border-color .15s, box-shadow .15s}
.card:hover{border-color:var(--rule-2);box-shadow:var(--shadow)}
.card-h{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:flex-start}
.mono{width:44px;height:44px;border-radius:10px;flex:none;display:grid;place-items:center;background:var(--brand-tint);color:var(--brand);font-family:var(--f-display);font-size:18px;letter-spacing:.02em}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .mono{color:#8FC3D3}}
:root[data-theme="dark"] .mono{color:#8FC3D3}
.card-h .tx{min-width:0;flex:1 1 10em;display:grid;gap:2px}
h3,.card h2{margin:0;font-size:17px;font-weight:600;line-height:1.3;text-wrap:balance}
.sec-intro p{margin:0;max-width:72ch;font-size:16px;color:var(--soft)}
.sec-intro p + p{margin-top:12px}
.sec-intro .sources{font-size:14px}
/* Long section intros: about two lines and a "More" button, only when app.js runs (html.js) so it can open them. */
.sec-intro .more{display:none;margin-top:4px;padding:6px 0;font:inherit;font-size:15px;font-weight:600;color:var(--brand);background:none;border:0;cursor:pointer}
.js .sec-intro .more{display:inline-block}
.js .sec-intro.clamp:not(.open) p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .sec-intro .more{color:#8FC3D3}}
:root[data-theme="dark"] .sec-intro .more{color:#8FC3D3}
.kind{font-size:14px;color:var(--soft)}
.badges{display:flex;gap:6px;flex-wrap:wrap}
.badge{font-size:12px;font-weight:700;letter-spacing:.02em;border-radius:999px;padding:3px 10px;white-space:nowrap}
.badge.closed{color:var(--red);background:var(--red-soft)}
.badge.new{color:#1A1406;background:var(--gold)}
.badge.members{color:var(--ink);background:var(--brand-tint);box-shadow:inset 0 0 0 1px var(--rule-2)}
.who{font-weight:600;font-size:15px}
.note{margin:0;font-size:15px;color:var(--ink)}
.note.long{white-space:pre-line}
.addr{display:flex;gap:8px;align-items:flex-start;font-size:14px;color:var(--soft)}
/* Davening times and shiurim fold behind a tap; Details on home cards works the same way. */
.times{display:grid;gap:6px;background:var(--alt);border:1px solid var(--rule);border-radius:var(--r-sm);padding:0 14px;font-size:14px}
.times summary{cursor:pointer;padding:10px 0;font-size:14px;font-weight:600;color:var(--ink)}
.times[open]{padding-bottom:12px}
/* Home cards: "Details" and "Report a problem" share the last line; open Details takes the full width. */
.card-f{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 16px}
.more-info{display:grid;gap:6px;font-size:14px}
.more-info[open]{flex-basis:100%}
.more-info summary{cursor:pointer;font-size:14px;font-weight:600;color:var(--brand)}
.more-info .who{font-size:14px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .more-info summary{color:#8FC3D3}}
:root[data-theme="dark"] .more-info summary{color:#8FC3D3}
.card-f .report{margin-left:auto}
.times dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;margin:0}
.times dt{font-weight:600}
.times dd{margin:0}
.times-src{font-size:12px;color:var(--soft)}
.addr .i{width:16px;height:16px;margin-top:3px}
.contact{display:grid;gap:8px;margin-top:auto;padding-top:14px;border-top:1px solid var(--rule)}
.cl{display:flex;align-items:center;gap:10px;min-width:0;font-size:15px}
.cl .i{width:17px;height:17px;color:var(--soft)}
.cl a,.cl span.val{color:var(--ink);text-decoration:none;overflow-wrap:anywhere;min-width:0;font-weight:500}
.cl a:hover{text-decoration:underline}
.copy{margin-left:auto;flex:none;font:inherit;font-size:13px;font-weight:600;color:var(--soft);background:transparent;border:1px solid var(--rule);border-radius:6px;padding:4px 10px;cursor:pointer}
.copy:hover,.copy.ok{color:var(--ink);border-color:var(--rule-2);background:var(--alt)}
.acts{display:flex;flex-wrap:wrap;gap:8px}
.act{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--brand);text-decoration:none;border-radius:var(--r-sm);padding:7px 12px;background:var(--brand-tint)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .act{color:#8FC3D3}}
:root[data-theme="dark"] .act{color:#8FC3D3}
.act .i{width:15px;height:15px}
.act:hover{text-decoration:underline}
/* "Report a problem": opens the fix-a-listing form for that listing. */
.report{align-self:flex-end;font-size:13px;color:var(--soft);text-decoration:underline;text-underline-offset:2px}
a.report{color:var(--soft)}
a.report:hover{color:var(--ink)}
.ledger + .report,.ledgers + .report{justify-self:end}

/* Homes */
.price{font-family:var(--f-display);font-size:30px;line-height:1;color:var(--ink)}
.price small{font-family:var(--f-body);font-size:14px;color:var(--soft);margin-left:6px}
.specs{display:flex;flex-wrap:wrap;gap:6px}
.spec{display:inline-flex;align-items:center;gap:6px;font-size:14px;background:var(--alt);border:1px solid var(--rule);border-radius:6px;padding:4px 9px}
.spec .i{width:16px;height:16px;color:var(--soft)}
.spec b{font-weight:700}
/* Home cards stay short: tighter spacing; the long note sits under Details. */
.card.home{gap:8px;padding:18px}
.card.home.has-ph{padding-top:0}
.card.home .photo{margin:0 -18px 4px}
.card.home .contact{padding-top:10px}
.card.home .specs{gap:5px}
.card.home .spec{font-size:13px;padding:3px 8px}
.card.home .price{font-size:26px}
.spec.eiruv{font-weight:600;color:var(--soft)}
.spec.eiruv.in{color:var(--brand);background:var(--brand-tint);border-color:var(--rule-2)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .spec.eiruv.in{color:#8FC3D3}}
:root[data-theme="dark"] .spec.eiruv.in{color:#8FC3D3}
.pill-eiruv{border-style:dashed}
.pill-eiruv.on{border-style:solid}
.term{font-size:14px;font-weight:600;color:var(--gold-ink)}

/* Photos and flyers on cards (tap to see the whole picture) */
.card.has-ph{padding-top:0}
.photo{position:relative;display:block;margin:0 -22px 4px;height:180px;padding:0;border:0;border-radius:var(--r-md) var(--r-md) 0 0;overflow:hidden;background:var(--alt);cursor:zoom-in;font:inherit}
.card.home .photo{height:150px}
.photo img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.photo .zoom{position:absolute;right:10px;bottom:10px;font-size:12px;font-weight:600;color:#FFFFFF;background:rgba(10,39,51,.78);border-radius:999px;padding:4px 10px}
.photo:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
.photo.sv{cursor:default}
.by{position:absolute;left:10px;bottom:10px;font:500 12px/1 Roboto,Arial,sans-serif;color:#FFFFFF;background:rgba(0,0,0,.6);border-radius:4px;padding:4px 6px}
.hf-ph{position:relative;display:block}
.ev.has-ph{flex-wrap:wrap}
.ev.has-ph .photo{flex:0 0 calc(100% + 44px);height:220px}
.lightbox{border:0;padding:0;background:transparent;max-width:min(960px,100vw - 24px);max-height:calc(100dvh - 24px);overflow:visible}
.lightbox::backdrop{background:rgba(6,16,20,.86)}
.lightbox img{display:block;max-width:100%;max-height:calc(100dvh - 100px);margin:0 auto;border-radius:var(--r-sm);background:#FFFFFF}
.lb-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:12px}
.lb-open{color:#E6EEF1;font-size:14px;font-weight:600}
.lb-stage{position:relative}
.lb-nav{display:none;position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;background:rgba(10,39,51,.78);color:#FFFFFF;font-size:28px;line-height:1;cursor:pointer}
.lb-prev{left:8px} .lb-next{right:8px}
.lightbox.many .lb-nav{display:grid;place-items:center}
.lb-nav:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.lb-count{color:#E6EEF1;font-size:14px;margin-left:auto}
.photo-prev{display:flex;align-items:center;gap:12px}
.photo-prev img{width:96px;height:96px;object-fit:cover;border-radius:var(--r-sm);border:1px solid var(--rule)}
.photo-prev .copy{margin-left:0}
.field input[type=file]{padding:9px 10px;cursor:pointer}

/* Events */
.ev{flex-direction:row;gap:18px;align-items:stretch}
.date{flex:none;width:68px;border-radius:10px;background:var(--brand);color:#FFFFFF;display:grid;place-items:center;align-content:center;padding:10px 4px;text-align:center;align-self:flex-start;min-height:72px}
.date .m{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.date .d{font-family:var(--f-display);font-size:30px;line-height:1}
.date.star .d{font-size:22px;color:var(--gold)}
.ev .body{display:flex;flex-direction:column;gap:8px;min-width:0;flex:1}

/* Ledger with distance bars */
.ledgers{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:18px;align-items:start}
.ledger{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-md);overflow:hidden}
.lrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;padding:14px 20px;border-top:1px solid var(--rule);text-decoration:none;color:inherit;align-items:center}
a.lrow{color:var(--ink)}
.lrow:first-child{border-top:0}
.lrow:hover{background:var(--alt)}
.lrow .nm{font-weight:600;min-width:0}
.lrow .ty{font-size:14px;color:var(--soft)}
.lrow .ex{font-size:14px;color:var(--gold-ink);grid-column:1/-1}
.lrow .mi{grid-row:1/span 2;grid-column:2;display:grid;justify-items:end;gap:5px;min-width:84px}
.lrow .mi b{font-size:15px}
.lrow .mi b small{font-weight:500;color:var(--soft);margin-left:2px}
.bar{width:84px;height:4px;border-radius:4px;background:var(--rule);overflow:hidden}
.bar i{display:block;height:100%;border-radius:4px;background:var(--gold)}
.lrow.has-th{grid-template-columns:76px minmax(0,1fr) auto;column-gap:14px}
.lrow .lthumb{grid-column:1;grid-row:1/span 3;align-self:center;width:76px;height:56px;object-fit:cover;border-radius:8px;background:#EEF3F4}
.lrow.has-th .mi{grid-column:3}
.lrow.has-th .ex{grid-column:2/-1}
/* Utility and insurance pictures are logos: show them whole on white. */
body[data-page="utilities"] .card .photo img{object-fit:contain;background:#FFFFFF}
.sec-links{display:flex;flex-wrap:wrap;gap:8px;margin:-4px 0 4px}
.lrow .open{font-size:14px;font-weight:600;color:var(--soft)}

.empty-sec{background:var(--alt);border:1px dashed var(--rule-2);border-radius:var(--r-md);padding:24px;color:var(--soft);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.noresult{padding:48px 0;text-align:center;color:var(--soft)}
/* Homes and Jobs: how many listings only members can see. */
.teaser{background:var(--brand-tint);border:1px solid var(--rule-2);border-radius:var(--r-md);padding:18px 20px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px}
.teaser p{margin:0;font-weight:600}
.teaser-btns{display:flex;flex-wrap:wrap;gap:8px}
.btn-line{background:var(--card);color:var(--ink);border-color:var(--rule-2)}
.btn-line:hover{background:var(--alt);color:var(--ink)}
.loading{padding:48px 0;color:var(--soft)}

/* ---------- Pages ----------
   body[data-view] is set by app.js: "home" (tiles), "section" (one section) or "post" (the form). */
body:not([data-view="home"]) #cats{display:none}
body:not([data-view="home"]) .hero > .wrap{padding-block:0 76px}
body:not([data-view="post"]) section.post{display:none}
body[data-view="post"] .post-cta{display:none}
body[data-view="post"] section.post{margin-top:24px}
body[data-view="section"] main{padding-top:24px}
.crumbs{padding-top:28px;font-size:15px;font-weight:600}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.sh h1{font-family:var(--f-display);font-weight:400;font-size:clamp(32px,4vw,46px);line-height:1.1;letter-spacing:-.01em;margin:0;text-wrap:balance}
.see-all{display:inline-block;margin-top:8px;font-size:15px;font-weight:600;text-decoration:none}
.see-all:hover{text-decoration:underline}
.pager{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding-top:8px}
.pager a{display:grid;gap:2px;background:var(--card);border:1px solid var(--rule);border-radius:var(--r-md);padding:16px 20px;text-decoration:none;color:var(--ink);font-weight:600}
.pager a span{font-size:13px;font-weight:500;color:var(--soft)}
.pager a.nx{text-align:right;grid-column:2}
.pager a:hover{border-color:var(--rule-2);box-shadow:var(--shadow)}
.post-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;background:var(--card);border:1px solid var(--rule);border-top:3px solid var(--gold);border-radius:var(--r-lg);padding:28px clamp(20px,4vw,40px);margin:64px 0 80px}
.post-cta b{display:block;font-family:var(--f-display);font-weight:400;font-size:clamp(24px,3vw,32px);line-height:1.15}
.post-cta span{color:var(--soft)}

/* Questions and answers on the home page */
.faq-list{display:grid;gap:10px;max-width:880px}
.faq details{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-md);padding:0 20px}
.faq summary{cursor:pointer;font-weight:600;font-size:17px;padding:16px 0;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:9px;height:9px;margin-right:4px;border-right:2px solid var(--soft);border-bottom:2px solid var(--soft);transform:rotate(45deg) translateY(-3px)}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-3px,0)}
.faq details[open] summary{border-bottom:1px solid var(--rule)}
.faq details p{margin:0;padding:14px 0 18px;color:var(--soft)}
.crumbs span{color:var(--soft)}

/* ---------- Post ---------- */
section.post{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);background:var(--card);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;scroll-margin-top:150px;margin-bottom:96px;box-shadow:var(--shadow)}
.post .intro{background:var(--brand);color:var(--on-brand);padding:clamp(24px,4vw,48px)}
.post .intro .eyebrow{color:var(--gold);margin-bottom:12px}
.post .intro h2{margin-bottom:12px}
.post .intro p{margin:0 0 28px;color:#D3DFE4;max-width:40ch}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:s}
.steps li{display:grid;grid-template-columns:32px 1fr;gap:14px;align-items:start;counter-increment:s;padding:16px 18px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)}
.steps li::before{content:counter(s);width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#FFFFFF;color:#0F3B4C;font-weight:700;font-size:14px}
.steps b{display:block;font-weight:600}
.steps span{color:var(--on-brand-soft);font-size:14px}
form.pf{display:grid;gap:16px;min-width:0;padding:clamp(24px,4vw,48px)}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.field{display:grid;gap:6px;min-width:0}
.field.full{grid-column:1/-1}
.field label,.flabel{font-size:14px;font-weight:600}
.field label .opt{font-weight:400;color:var(--soft)}
.field input,.field select,.field textarea{font:inherit;font-size:16px;color:var(--ink);background:var(--card);border:1px solid var(--rule-2);border-radius:var(--r-sm);padding:11px 13px;min-height:46px;width:100%;min-width:0}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid var(--brand-tint);outline-offset:0;border-color:var(--brand)}
.types{display:flex;flex-wrap:wrap;gap:8px}
.types input{position:absolute;opacity:0;pointer-events:none}
.types label{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;border:1px solid var(--rule-2);border-radius:999px;padding:9px 15px;cursor:pointer;background:var(--card)}
.types label .i{width:16px;height:16px;color:var(--soft)}
.types input:checked + label{border-color:var(--brand);background:var(--brand);color:var(--on-brand)}
.types input:checked + label .i{color:var(--on-brand)}
.types input:focus-visible + label{outline:2px solid var(--gold);outline-offset:2px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.msg{font-size:15px;font-weight:600}
.msg.ok{color:#1E7A4F}
.msg.err{color:var(--red)}

/* ---------- Footer ---------- */
footer.foot{background:var(--brand-deep);color:var(--on-brand-soft)}
.foot-top{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:32px 24px;padding-block:64px 36px}
.foot-id{display:grid;gap:8px;align-content:start;font-size:15px}
.foot-id b{font-family:var(--f-display);font-weight:400;font-size:28px;line-height:1.2;color:#FFFFFF;margin-bottom:2px}
.foot-id a{color:#FFFFFF;text-decoration:none;justify-self:start}
.foot-col{display:grid;gap:10px;align-content:start;font-size:15px}
.foot-col b{color:#FFFFFF;font-weight:600;margin-bottom:2px}
.foot-col a{color:var(--on-brand-soft);text-decoration:none;justify-self:start}
.foot-id a:hover,.foot-col a:hover{color:#FFFFFF;text-decoration:underline}
.foot-base{display:flex;flex-wrap:wrap;gap:6px 20px;border-top:1px solid rgba(255,255,255,.12);padding-block:20px calc(28px + env(safe-area-inset-bottom, 0px));font-size:14px}

@media (max-width:900px){
  section.post{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:1400px){
  .brand .bs{display:none}
}
@media (max-width:1240px){
  .links > a:not(.btn),.links > .member{display:none}
  .menu{display:block}
  .links{gap:8px}
  .links .btn{margin-left:0}
}
@media (max-width:760px){
  .hero > .wrap{padding-block:32px 96px}
  .collage{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:150px}
  .collage figure:first-child{grid-row:auto}
  .collage figure:nth-child(3),.tb-ad,.today-heb{display:none}
  .week{margin-top:-64px}
  .wk-stat{display:none}
  .block,.head{padding-top:64px}
  .block.ad{margin-top:64px}
  /* Homes: a sideways row you swipe, so three photos don't fill three screens. */
  .hf-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:80%;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -20px;padding:0 20px 8px;scroll-padding:0 20px}
  .hf{scroll-snap-align:start}
  .hf img{height:170px}
  .move > img{height:200px;min-height:0}
  body:not([data-view="home"]) .hero > .wrap{padding-block:0 76px}
  .lede{font-size:17px}
}
@media (max-width:460px){
  .brand .bn{font-size:19px}
  .brand .bs{display:none}
  .links .btn{padding:10px 14px}
  /* Phones: one row in the bar (brand and Menu); "Post a listing" is in the menu and at the foot of each page. */
  .links > .btn{display:none}
  .nav{flex-wrap:nowrap}
  .wk.shabbos{padding:20px}
  .foot-id{grid-column:1/-1}
  .ev{flex-direction:column}
  .ev.has-ph{flex-wrap:nowrap}
  .ev.has-ph .photo{flex:none}
  .date{width:auto;grid-auto-flow:column;gap:8px;justify-content:start;padding:6px 12px;min-height:0}
  .date .d{font-size:22px}
  .ledgers{grid-template-columns:minmax(0,1fr)}
}
/* Parts of the site switched off on the admin page (the Worker sets <html data-off="shabbos">). */
html[data-off~="shabbos"] a[href="shabbos/"],html[data-off~="shabbos"] [data-feature="shabbos"]{display:none !important}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media (prefers-reduced-motion:reduce){.links > a:not(.btn)::after,.navbar .wrap{transition:none}}

/* layout guards */
main, section.sec, form.pf{grid-template-columns:minmax(0,1fr)}
.sh > div{min-width:0}
.panel-in{grid-template-columns:minmax(0,1fr)}
.search input{width:100%}
.types{position:relative}
.types input{left:0;top:0;width:1px;height:1px;margin:0}
/* A card with a photo needs no initials box. */
.card.has-ph .mono{display:none}