/* ==========================================================================
   PROJECT NIVNEH — Partners in Shidduchim
   --------------------------------------------------------------------------
   The system is masonry. Nivneh means "we will build", and the logo is four
   courses of brick laid in running bond: brick 111x60, horizontal pitch
   117.5, course pitch 64, every course offset by half a pitch so each brick
   bridges the joint beneath it. Those proportions, measured from the supplied
   logo, drive the grid, the cards, the rules and the reveal order here.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------- */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(../fonts/cormorant-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:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(../fonts/cormorant-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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* The italic. A serif with only one voice reads as a system font doing its
   best; the italic is where Cormorant actually earns its keep, and it is used
   once per page, for a line that is being said rather than stated. Served
   from here like the others: the privacy page promises no outside fonts. */
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300 700;font-display:swap;
  src:url(../fonts/cormorant-italic-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:'Cormorant Garamond';font-style:italic;font-weight:300 700;font-display:swap;
  src:url(../fonts/cormorant-italic-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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Figtree';font-style:normal;font-weight:300 800;font-display:swap;
  src:url(../fonts/figtree-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:'Figtree';font-style:normal;font-weight:300 800;font-display:swap;
  src:url(../fonts/figtree-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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* --- Tokens --------------------------------------------------------------- */
:root{
  /* Colour, sampled from the supplied logo file. Contrast measured against
     the grounds each one is actually used on. */
  --navy-900:#050F26;
  --navy:#0B1C3A;          /* ivory on this = 15.16:1 */
  --navy-700:#12294C;
  --navy-600:#1D3560;
  --gold:#C9963F;          /* on navy 6.38:1. DECORATION ONLY on light. */
  --gold-lit:#D8A94E;      /* on navy 7.82:1 */
  --gold-ink:#7A5A22;      /* gold that is safe as TEXT on ivory, 5.68:1 */
  --ivory:#FAF6EC;          /* warmer than before, less grey */
  /* The second ground has to be a real step down, not a shade. At the old
     #F2EADA the two were about five points of lightness apart, which over a
     whole screen reads as one continuous beige field and the chapters stop
     being chapters. */
  --ivory-2:#EFE4CE;
  --ivory-3:#E4D7BC;
  --card:#FFFDF8;           /* cards sit above the ground, not in it */
  --on-navy-soft:#C4D2E4;
  --on-ivory-soft:#5C5142;
  --line-navy:rgba(201,150,63,.30);
  --line-ivory:#E2D7C1;

  /* Depth. Warm-tinted, never grey, so shadows read as paper not plastic. */
  --lift-1:0 1px 2px rgba(58,42,16,.05), 0 2px 6px -2px rgba(58,42,16,.06);
  --lift-2:0 2px 4px rgba(58,42,16,.05), 0 14px 32px -10px rgba(58,42,16,.16);
  --lift-navy:0 2px 6px rgba(0,0,0,.28), 0 18px 40px -12px rgba(0,0,0,.45);

  /* The brick module */
  --joint:14px;
  --radius:7px;

  --shell:1360px;
  --pad:clamp(20px,5vw,72px);
  --gap-s:clamp(24px,3vw,40px);
  --gap:clamp(44px,6vw,88px);
  --gap-l:clamp(72px,10vw,150px);

  --ease:cubic-bezier(.22,.7,.3,1);
}

/* --- Reset ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ivory);color:#12233F;
  font-family:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17.5px;line-height:1.68;font-weight:380;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%;height:auto;display:block}
/* A faint paper tooth over the warm grounds. Two percent, felt not seen. */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:.028;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
body>*{position:relative;z-index:1}
h1,h2,h3,h4{margin:0;font-weight:500;line-height:1.08;
  font-family:'Cormorant Garamond',Georgia,serif;letter-spacing:-.004em}
p,ul,ol,dl{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold-lit);outline-offset:3px;border-radius:2px}
.navy :focus-visible{outline-color:var(--gold-lit)}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--navy);
  color:var(--ivory);padding:12px 20px;text-decoration:none}
.skip:focus{left:8px;top:8px}

/* --- Layout --------------------------------------------------------------- */
.shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad)}
.shell-narrow{max-width:940px;margin-inline:auto;padding-inline:var(--pad)}
section{padding-block:var(--gap)}
section.tall{padding-block:var(--gap-l)}
/* The supplied logo is photographed on a navy wall with a soft light behind
   it. The navy sections here are lit the same way, so the ground has depth
   rather than being a flat fill. */
.navy,.navy-deep{position:relative;isolation:isolate}
.navy{background:var(--navy);color:var(--ivory)}
.navy-deep{background:var(--navy-900);color:var(--ivory)}
/* Light falls on it from above and to the left, and the ground darkens as it
   drops away. A single centred glow at .15 was too faint and too symmetrical
   to read as anything, so the navy sat there as a flat slab. Two layers, one
   warm highlight and one falling shadow, and it becomes a wall with a lamp on
   it, which is exactly how the mark was photographed. */
.navy::before,.navy-deep::before{content:"";position:absolute;inset:0;z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(88% 72% at 24% -12%,rgba(146,183,236,.26),transparent 58%),
    radial-gradient(120% 96% at 62% 118%,rgba(0,0,0,.34),transparent 56%)}
/* Where two warm grounds meet there is a joint, not a blur. */
.ivory-2{background:var(--ivory-2);
  border-block:1px solid var(--line-ivory)}

/* --- Type roles ----------------------------------------------------------- */
.d1{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;
  font-size:clamp(46px,8vw,112px);line-height:.96;letter-spacing:-.014em}
.d2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;
  font-size:clamp(35px,5.2vw,68px);line-height:1.02;letter-spacing:-.01em}
.d3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;
  font-size:clamp(25px,3vw,38px);line-height:1.12}
.d4{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;
  font-size:clamp(21px,2vw,25px);line-height:1.2}
.lede{font-size:clamp(18.5px,1.7vw,22px);line-height:1.55;font-weight:380}
.prose{max-width:66ch}
.prose p+p{margin-top:1.05em}
.prose a{color:var(--gold-ink);text-underline-offset:3px;text-decoration-thickness:1px}
.navy .prose a{color:var(--gold-lit)}
.small{font-size:15px;line-height:1.55}
.muted{color:var(--on-ivory-soft)}
/* Every dark surface has to be named here, exactly as they are for
   .act-primary. The footer is navy-900 but carries neither .navy nor
   .navy-deep, so muted text in it was falling back to the light-ground brown
   and printing at 2.46:1 on near black. */
.navy .muted,.navy-deep .muted,.foot .muted,.mast .muted,
.drawer .muted{color:var(--on-navy-soft)}

/* A section label is a label: plain, readable, no rule and no tracking. */
.designation{font-family:'Figtree',sans-serif;font-size:16px;font-weight:600;color:var(--gold-ink);
  margin-bottom:clamp(12px,1.6vw,18px)}
.navy .designation,.navy-deep .designation{color:var(--gold-lit)}


/* --- Controls: brick-proportioned, never a pill --------------------------- */
.act{display:inline-flex;align-items:center;gap:12px;
  font-family:'Figtree',sans-serif;font-size:16px;font-weight:600;letter-spacing:.005em;
  padding:16px 30px;border-radius:var(--radius);text-decoration:none;
  border:1px solid transparent;cursor:pointer;
  /* A <button> carrying .act must match the anchors beside it: Safari ignores
     the radius and repaints the background without this. */
  -webkit-appearance:none;appearance:none;
  transition:background .2s var(--ease),color .2s var(--ease),
             border-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease)}
.act:hover{transform:translateY(-1px)}
/* On a light ground a primary action is navy; on any dark ground it is gold.
   Every dark surface in the site is listed here once, so a control can never
   end up navy on navy. */
.act-primary{background:var(--navy);color:var(--ivory);border-color:var(--navy);
  box-shadow:var(--lift-1)}
.act-primary:hover{background:var(--navy-700);box-shadow:var(--lift-2)}
.act-quiet{border-color:currentColor;color:var(--navy)}
.act-quiet:hover{background:var(--navy);color:var(--ivory)}

.navy .act-primary,.navy-deep .act-primary,.mast .act-primary,
.drawer .act-primary,.foot .act-primary{
  background:var(--gold);color:var(--navy-900);border-color:var(--gold)}
.navy .act-primary:hover,.navy-deep .act-primary:hover,.mast .act-primary:hover,
.drawer .act-primary:hover,.foot .act-primary:hover{
  background:var(--gold-lit)}

.navy .act-quiet,.navy-deep .act-quiet,.mast .act-quiet,
.drawer .act-quiet,.foot .act-quiet{
  color:var(--ivory);border-color:rgba(247,242,232,.45)}
.navy .act-quiet:hover,.navy-deep .act-quiet:hover,.mast .act-quiet:hover,
.drawer .act-quiet:hover,.foot .act-quiet:hover{
  background:var(--ivory);color:var(--navy);border-color:var(--ivory)}
.acts{display:flex;flex-wrap:wrap;gap:14px}
/* On a narrow phone two actions side by side shrink each other until their
   labels break out of the buttons. Stacked and full width, they stay whole
   and land under the thumb. */
@media(max-width:430px){
  .acts{flex-direction:column;align-items:stretch}
  .acts>.act{width:100%;justify-content:center}
}

/* --- Masthead ------------------------------------------------------------- */
.mast{background:var(--navy);color:var(--ivory);position:relative;z-index:2;
  box-shadow:0 1px 0 rgba(201,150,63,.22)}
.mast-in{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-block:16px}
.mast a.brand{display:block;flex:none}
.mast a.brand img{height:60px;width:auto}
.mast nav{display:none}
.menu-btn{display:inline-flex;align-items:center;gap:10px;background:none;
  border:1px solid rgba(247,242,232,.42);color:var(--ivory);border-radius:var(--radius);
  padding:10px 16px;font:600 15px/1 'Figtree',sans-serif;cursor:pointer}
.menu-btn:hover{border-color:var(--gold)}
.menu-btn svg{width:15px;height:11px}
@media(min-width:1080px){
  .mast nav{display:flex;align-items:center;gap:clamp(14px,1.6vw,28px);flex-wrap:wrap;justify-content:flex-end}
  .mast nav a{font-size:15px;text-decoration:none;color:var(--ivory);padding:6px 0;
    border-bottom:1px solid transparent;white-space:nowrap}
  .mast nav a:hover{border-bottom-color:var(--gold)}
  .mast nav a[aria-current="page"]:not(.act){border-bottom-color:var(--gold);color:var(--gold-lit)}
  .mast nav a.act{padding:11px 20px;font-size:15px;border-bottom:0}
  .mast .menu-btn{display:none}
}

/* Drawer */
.drawer{position:fixed;inset:0;z-index:60;background:var(--navy-900);
  display:flex;flex-direction:column;padding:20px var(--pad) 40px;
  overflow-y:auto;visibility:hidden;opacity:0;transition:opacity .22s var(--ease),visibility .22s}
.drawer[data-open]{visibility:visible;opacity:1}
.drawer-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}
.drawer-top img{height:56px;width:auto}
.drawer a{color:var(--ivory);text-decoration:none;font-family:'Cormorant Garamond',serif;
  font-size:30px;line-height:1.1;padding:16px 0;border-bottom:1px solid var(--line-navy);
  display:block}
.drawer a[aria-current="page"]{color:var(--gold-lit)}
.drawer .act{display:flex;justify-content:center;font-family:'Figtree',sans-serif;
  font-size:16px;margin-top:26px;border-bottom:0}

/* --- The wall ------------------------------------------------------------- */
/* A course is a row. Alternate courses begin and end with a half brick, the
   way a bricklayer uses a closer, so the bond staggers without any content
   being pushed off the edge. */
.wall{display:flex;flex-direction:column;gap:var(--joint);overflow:hidden}
.course{display:grid;gap:var(--joint);grid-template-columns:repeat(var(--n,1),minmax(0,1fr))}
/* Every course is aligned. The stagger read as a mistake, and a wall that
   is not level is not a virtue on a website. */
/* How many bricks to a course. This lives in a class, never in a style
   attribute on the element: an inline custom property cannot be overridden by
   a media query, so a course written that way is stuck at its desktop count
   all the way down. A course that runs short keeps the same count, so its
   cards stay the width of every card above them and the row just ends early. */
.cols-1{--n:1}
.cols-2{--n:2}
.cols-3{--n:3}
.cols-4{--n:4}
/* Three or four across stops being readable long before the phone
   breakpoint. Measured on every wall on the site: at 1440px a three-across
   card runs 31 to 42 characters a line, but by 1150px it is down to 25 to 36
   and by 1024px to 20 to 31, which is a column of words rather than a
   sentence. The same squeeze drives the courses apart in height, and the
   committees wall was leaving 129px of empty card under its shortest brick.
   Two across over the same span runs 34 to 51 characters and closes that gap,
   so the drop happens at 1319 rather than 959: above that a three-across
   card measures 31 to 42 characters and the courses sit level, and below it
   the committees wall was still leaving 100px under its shortest brick. */
@media(max-width:1059px){.cols-4{--n:3}}
@media(max-width:1319px){.cols-3,.cols-4{--n:2}}
/* A closer is a half brick, not an empty card: it reads as the wall carrying
   on past the content, so it is filled and unoutlined. */

.brick{position:relative;border:1px solid var(--line-ivory);border-radius:var(--radius);
  background:var(--card);padding:clamp(24px,2.6vw,34px);box-shadow:var(--lift-1);
  display:flex;flex-direction:column;gap:11px}
.ivory-2 .brick{background:var(--ivory)}

.navy .brick,.navy-deep .brick{background:rgba(255,255,255,.045);border-color:var(--line-navy);
  color:var(--ivory);box-shadow:var(--lift-navy)}
a.brick{text-decoration:none;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease)}
a.brick:hover{border-color:var(--gold);box-shadow:var(--lift-2);transform:translateY(-3px)}
.navy a.brick:hover,.navy-deep a.brick:hover{border-color:var(--gold);background:rgba(201,150,63,.075)}
.brick .n{font-size:14.5px;font-weight:600;color:var(--gold-ink)}
.navy .brick .n,.navy-deep .brick .n{color:var(--gold)}
.brick h2,.brick h3{font-family:'Cormorant Garamond',serif;font-size:clamp(24px,2.3vw,31px);
  font-weight:600;line-height:1.08;color:var(--navy)}
.brick p{font-size:16px;line-height:1.6;color:var(--on-ivory-soft)}
.navy .brick p,.navy-deep .brick p{color:var(--on-navy-soft)}
.navy .brick h2,.navy .brick h3,.navy-deep .brick h2,.navy-deep .brick h3{color:var(--ivory)}

.brick.compact{padding:clamp(14px,1.4vw,19px) clamp(17px,1.7vw,23px);gap:4px}
.brick.compact h2,.brick.compact h3{font-size:clamp(20px,1.7vw,24px)}
.brick.compact p{font-size:15px;line-height:1.45}

/* Narrow: a course re-lays to one brick, and the bond is kept by nudging
   alternate courses. It is a re-course, not a plain stack. */
@media(max-width:699px){
  /* .cap must be named here. It carries two classes, so it outranks a bare
     .course selector no matter where that sits, and without it the short
     final course of every wall keeps its desktop column count on a phone and
     crushes its last cards to about twenty pixels wide. */
  .course,.course.offset,.course.cap{grid-template-columns:minmax(0,1fr)}
    /* Indent, do not shift: shifting would push the brick's own text past
     the clipped edge of the wall. */
  .course.offset{margin-left:9%;margin-right:0}
}

/* --- The routing list: the entry to the site is a choice ------------------ */
.routes{border-top:1px solid var(--line-navy);margin-inline:clamp(-14px,-1.6vw,-20px)}
/* A row is a destination and its index, side by side. Written as a block the
   number falls under the description instead, at body size, which is what it
   did until 2026-08-27. */
.routes a{display:flex;align-items:baseline;justify-content:space-between;
  gap:clamp(12px,2vw,24px);border-radius:var(--radius);
  padding:clamp(17px,2vw,23px) clamp(14px,1.6vw,20px);
  border-bottom:1px solid var(--line-navy);text-decoration:none;color:var(--ivory);
  transition:background .2s var(--ease),transform .2s var(--ease)}
.routes .n{flex:none;font-size:14.5px;font-weight:600;color:var(--gold);
  font-variant-numeric:tabular-nums}
.routes a:last-child{border-bottom:0}
.routes a:hover{background:rgba(201,150,63,.10);transform:translateX(6px)}
.routes .lead{font-family:'Cormorant Garamond',serif;font-size:clamp(22px,2.2vw,27px);
  line-height:1.15;display:block}
.routes .note{font-size:14.5px;color:var(--on-navy-soft);display:block;margin-top:3px}

/* The home page needs a true starting point, not a long list someone has to
   decode. These are destinations with different jobs, so the compact grid
   makes the choice deliberate without turning the opening into a dashboard. */
.start-here{border-top:1px solid var(--line-navy);padding-top:clamp(18px,2.4vw,28px)}
.start-here .designation{margin-bottom:8px}
.start-here .d3{color:var(--ivory);max-width:20ch}
.start-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
  margin-top:18px}
.start-grid a{display:flex;min-height:126px;flex-direction:column;justify-content:space-between;
  gap:14px;padding:17px 18px;border:1px solid var(--line-navy);border-radius:var(--radius);
  color:var(--ivory);text-decoration:none;background:rgba(255,255,255,.025);
  transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease)}
.start-grid a:hover{background:rgba(201,150,63,.10);border-color:var(--gold);transform:translateY(-2px)}
.start-grid .lead{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(22px,2.1vw,28px);
  font-weight:600;line-height:1.1}
.start-grid .note{font-size:14px;line-height:1.45;color:var(--on-navy-soft)}
@media(max-width:620px){.start-grid{grid-template-columns:minmax(0,1fr)}.start-grid a{min-height:0}}

/* --- The pairing diagram -------------------------------------------------- */
.pairing{display:block;width:100%;max-width:560px;height:auto}

/* --- Steps: four courses rising ------------------------------------------- */
.steps{display:flex;flex-direction:column;gap:var(--joint);counter-reset:step}
.step{display:grid;gap:clamp(14px,2vw,32px);align-items:start;
  border:1px solid var(--line-ivory);border-radius:var(--radius);
  padding:clamp(24px,2.8vw,38px);background:var(--card);box-shadow:var(--lift-1)}
.navy .step,.navy-deep .step{background:rgba(255,255,255,.045);border-color:var(--line-navy);
  box-shadow:var(--lift-navy)}
@media(min-width:820px){ .step{grid-template-columns:236px minmax(0,1fr)} }
.step .course-no{font-size:15px;font-weight:700;color:var(--gold-ink)}
.navy .step .course-no,.navy-deep .step .course-no{color:var(--gold)}
.step h3{font-family:'Cormorant Garamond',serif;font-size:clamp(24px,2.4vw,32px);
  font-weight:600;margin-top:6px}


/* --- Facts list ----------------------------------------------------------- */
.facts{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line-ivory)}
.facts>div{display:grid;gap:4px;padding:16px 0;border-bottom:1px solid var(--line-ivory)}
@media(min-width:680px){.facts>div{grid-template-columns:minmax(160px,220px) minmax(0,1fr);gap:24px;align-items:baseline}}
.facts dt,.facts .k{font-size:15px;font-weight:700;color:var(--gold-ink)}
/* The booking notes are a plain list rather than label-and-value rows, so they
   are marked up as a <ul>. .facts>div cannot match an <li>, so the rows are
   given the same rhythm here. */
.booking-facts{list-style:none;padding:0}
.booking-facts>li{padding:16px 0;border-bottom:1px solid var(--line-ivory)}
.navy .facts,.navy-deep .facts{border-top-color:var(--line-navy)}
.navy .facts>div,.navy-deep .facts>div{border-bottom-color:var(--line-navy)}
.navy .facts dt,.navy .facts .k,.navy-deep .facts dt,.navy-deep .facts .k{color:var(--gold)}

/* --- Q&A ------------------------------------------------------------------ */
.qa{border-top:1px solid var(--line-ivory)}
.qa details{border-bottom:1px solid var(--line-ivory)}
.qa summary{cursor:pointer;list-style:none;padding:19px 40px 19px 0;position:relative;
  font-family:'Cormorant Garamond',serif;font-size:clamp(21px,2vw,26px);font-weight:600;
  line-height:1.25}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";position:absolute;right:8px;top:50%;width:13px;height:13px;
  margin-top:-7px;border-right:1.5px solid var(--gold-ink);border-bottom:1.5px solid var(--gold-ink);
  transform:rotate(45deg);transition:transform .2s var(--ease)}
.qa details[open] summary::after{transform:rotate(225deg)}
.qa summary:hover{color:var(--gold-ink)}
.qa .a{padding:0 0 22px;max-width:70ch;color:var(--on-ivory-soft)}

/* --- Notices (honest state, never fake) ----------------------------------- */
.notice{border:1px solid var(--line-ivory);border-left:3px solid var(--gold);
  border-radius:var(--radius);padding:22px 26px;background:var(--card);
  box-shadow:var(--lift-1);font-size:16.5px;line-height:1.6}
.navy .notice,.navy-deep .notice{background:rgba(201,150,63,.07);border-color:var(--line-navy);
  border-left-color:var(--gold);color:var(--ivory)}
.notice strong{display:block;margin-bottom:4px;font-weight:700}

/* --- Program readiness ---------------------------------------------------
   Two adjacent facts make the distinction visible at a glance: a form being
   open is not the same promise as every volunteer service being staffed. */
/* UNUSED since 2026-08-27: Nivneh asked for the readiness boxes to come off
   /singles and /committees. The rules are kept intact so the block can be put
   back by restoring the markup alone. Delete both together or neither. */
.program-readiness{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  margin:0 0 clamp(30px,4vw,52px);border:1px solid var(--line-ivory);
  border-radius:var(--radius);overflow:hidden;background:var(--card);box-shadow:var(--lift-1)}
.program-readiness>div{padding:clamp(20px,2.5vw,30px);border-top:3px solid var(--gold)}
.program-readiness>div+div{border-left:1px solid var(--line-ivory)}
.program-readiness .program-state{margin-bottom:8px;color:var(--gold-ink);
  font-size:14px;font-weight:750;line-height:1.35}
.program-readiness h2,.program-readiness h3{color:var(--navy);
  font-size:clamp(23px,2.2vw,30px);font-weight:600;line-height:1.15}
.program-readiness h2+p,.program-readiness h3+p{margin-top:10px;color:var(--on-ivory-soft);
  font-size:16px;line-height:1.58}
@media(max-width:699px){
  .program-readiness{grid-template-columns:minmax(0,1fr)}
  .program-readiness>div+div{border-left:0;border-top:1px solid var(--line-ivory)}
}

/* --- Forms ---------------------------------------------------------------- */
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:20px}
.field label{font-size:15px;font-weight:700;color:var(--gold-ink)}
.field input,.field textarea,.field select{font:inherit;font-size:16.5px;padding:15px 17px;
  border:1px solid var(--line-ivory);border-radius:var(--radius);background:var(--card);
  color:var(--navy);width:100%;box-shadow:inset 0 1px 2px rgba(58,42,16,.04)}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--gold-ink)}
.contact-form{max-width:620px;padding:clamp(20px,2.6vw,30px);background:var(--card);
  border:1px solid var(--line-ivory);border-radius:var(--radius);box-shadow:var(--lift-1)}
.contact-paths{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
.contact-path{display:flex;min-height:156px;flex-direction:column;justify-content:space-between;gap:16px;
  padding:clamp(18px,2.1vw,25px);border:1px solid var(--line-ivory);border-radius:var(--radius);
  background:var(--card);box-shadow:var(--lift-1);text-decoration:none;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
.contact-path h3{font-size:clamp(22px,2vw,28px);font-weight:600;color:var(--navy)}
.contact-path p{font-size:15.5px;line-height:1.55;color:var(--on-ivory-soft)}
.contact-path:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:var(--lift-2)}
@media(max-width:620px){.contact-paths{grid-template-columns:minmax(0,1fr)}.contact-path{min-height:0}}
.req{color:var(--gold-ink)}

/* --- Footer --------------------------------------------------------------- */
.foot{background:var(--navy-900);color:var(--ivory);padding-block:clamp(48px,6vw,80px) 34px}
/* Nothing is fixed over the foot of the page, so this only keeps the last
   line clear of a phone's home indicator. */
@media(max-width:1059px){.foot{padding-bottom:calc(34px + env(safe-area-inset-bottom))}}
.foot-grid{display:grid;gap:clamp(30px,4vw,56px)}
@media(min-width:800px){.foot-grid{grid-template-columns:1.2fr 1fr 1fr}}
.foot h2{font-size:16px;font-weight:700;color:var(--gold-lit);
  font-family:'Figtree',sans-serif;margin-bottom:14px}
.foot ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:9px}
.foot a{color:var(--on-navy-soft);text-decoration:none;font-size:16px}
.foot a:hover{color:var(--ivory);text-decoration:underline;text-underline-offset:3px}
.foot img{height:74px;width:auto;margin-bottom:16px}
.foot-base{margin-top:clamp(34px,4vw,52px);padding-top:22px;border-top:1px solid var(--line-navy);
  display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;
  font-size:14px;color:var(--on-navy-soft)}

/* --- Laying in: courses settle into place, staggered along the row -------- */
/* Scoped to .js, which is set by an inline script in the head and dropped
   again at load if site.js never confirmed it finished. With JavaScript off
   the inline script never runs, so nothing is hidden; with site.js blocked or
   broken the class is removed, so nothing stays hidden. Both matter: before
   the failsafe existed, blocking site.js left /book showing 43% of its copy
   and none of the roster. */
@media(prefers-reduced-motion:no-preference){
  .js .lay{opacity:0;transform:translateY(16px)}
  .js .lay.laid{opacity:1;transform:none;
    transition:opacity .5s var(--ease),transform .58s var(--ease);
    transition-delay:calc(var(--i,0) * 72ms)}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .lay{opacity:1;transform:none}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* --- Print ----------------------------------------------------------------
   This gets printed. A committee list goes to a meeting, the questions go to
   someone who does not use a computer, and the policies go to whoever is
   asked to check them. So paper is treated as a real output: no navy floods,
   no reversed type, nothing cut in half across a page break, and a phone
   number on every sheet. */
@media print{
  @page{margin:18mm 16mm}

  html,body{background:#fff !important;color:#000;font-size:10.75pt;line-height:1.5}
  /* The fixed paper grain would otherwise reprint on every single sheet. */
  body::before,.navy::before,.navy::after,.navy-deep::before,.navy-deep::after{
    display:none !important}

  .skip,.mast nav,.menu-btn,.drawer,.routes .note,.start-grid .note,
  .foot-grid>div:nth-child(2),.form-workspace,.pairing,
  /* Written as button.act, not .acts button: it has to outrank the
     .acts .act rule below that sets every action to inline. A button does
     nothing on paper, so it goes. */
  .acts button.act,.act [aria-hidden]{display:none !important}

  /* Every dark ground becomes paper, the masthead included: it carries its
     own background rather than the .navy class, so it would otherwise print
     as a solid navy band with black type sitting on it. */
  .navy,.navy-deep,.ivory-2,.mast,.foot,.brick,.step,.notice,.program-readiness,.standin,.gate{
    background:#fff !important;box-shadow:none !important}
  /* One ink. A warm grey that reads as refined on a screen prints as mud, and
     on a mono printer the whole palette collapses anyway. Hierarchy is
     carried by size and weight instead, which survive. */
  body,p,li,dt,dd,span,div,a,strong,em,summary,h1,h2,h3,h4,
  .muted,.small,.lede,.designation,.brick .n,.facts dt,.facts .k,
  .figures .fig,.figures .figlabel,.routes .lead,.start-grid .lead,.gate-lead,.gate-note{
    color:#000 !important}
  .designation,.brick .n,.facts dt,.facts .k,.figures .figlabel{font-weight:700}
  .brick,.step,.notice,.program-readiness,.standin,.gate{border:1px solid #999 !important}

  /* A printed page with the buttons stripped out tells you nothing about how
     to act on it. They are set as plain bold text carrying their address. */
  .acts{display:block !important;margin-top:8pt !important}
  .acts .act{display:inline !important;border:0 !important;padding:0 !important;
    background:none !important;box-shadow:none !important;font-weight:700;
    font-size:10.5pt !important;margin-right:14pt}

  /* The mark is gold foil, which prints as a pale smudge. The name is set
     as type instead, so a printed sheet still says what it is. */
  .mast a.brand img,.foot img{display:none !important}
  .mast a.brand::after{content:"Project Nivneh · Partners in Shidduchim";
    font-family:'Cormorant Garamond',Georgia,serif;font-size:15pt;font-weight:600;color:#000}
  .mast{box-shadow:none;border-bottom:1px solid #000}

  section{padding-block:14pt !important}
  .hero{padding-block:10pt 14pt !important}
  .hero-tall{min-height:0 !important;display:block !important}

  /* Nothing splits across a page break mid-thought. */
  .brick,.step,.standin,.notice,.program-readiness>div,.qa details,.facts>div,
  .booking-facts>li,.figures .fig{
    break-inside:avoid;page-break-inside:avoid}
  h1,h2,h3{break-after:avoid;page-break-after:avoid}

  /* Display type is set for a screen two feet away, not a sheet of paper. */
  .d1{font-size:26pt !important;line-height:1.05 !important}
  .d2{font-size:19pt !important}
  .d3{font-size:15pt !important}
  .d4{font-size:13pt !important}
  .lede{font-size:11.5pt !important}
  .figures .fig{font-size:30pt !important}
  .qa summary{font-size:12.5pt !important;padding:8pt 0 4pt !important}
  .qa .a{padding-bottom:10pt !important;font-size:10.75pt !important}
  .policy p,.policy li{font-size:10.5pt !important}

  /* Only real destinations are worth the ink; site-internal ones are not,
     because the reader is holding paper and cannot click either way. */
  a{text-decoration:none;color:#000}
  .prose a[href^="http"]::after,.policy a[href^="http"]::after,
  .acts .act[href^="http"]::after,.gate a[href^="http"]::after{
    content:" (" attr(href) ")";font-size:8.5pt;color:#444 !important;
    font-weight:400;word-break:break-all}

  /* A printed page with no way to reach a person is useless. */
  .foot{background:#fff !important;color:#000 !important;padding-block:12pt 0 !important;
    border-top:1px solid #000}
  .foot a,.foot-base,.foot-base a{color:#000 !important}
  .foot h2{color:#000 !important}
  .foot-base{border-top:0;padding-top:6pt;font-size:9pt}
}

/* --- Forced colours -------------------------------------------------------- */
@media(forced-colors:active){
  .brick,.step,.closer,.notice,.program-readiness,.act{border:1px solid CanvasText}
  .bedjoint{border-top:1px solid CanvasText;background:none}
}

/* --- Utilities ------------------------------------------------------------ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.stack{display:flex;flex-direction:column;gap:var(--gap-s)}
.split{display:grid;gap:clamp(30px,4.5vw,72px);align-items:start}
@media(min-width:920px){
  .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .split.lead-left{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
  .split.aside-left{grid-template-columns:minmax(240px,.62fr) minmax(0,1fr)}
}

/* --- Hero: the two columns fill the same height, so neither leaves a hole -- */
.hero{padding-block:clamp(44px,5.5vw,88px) clamp(48px,6vw,96px)}
/* Only column wrappers get the fill treatment. Applying it to every child
   would turn a bare paragraph into a flex container and break its inline
   links onto separate lines. */
.hero-split{align-items:center}
.hero-split>div{display:flex;flex-direction:column;justify-content:center}
.hero-split>div.routes,.hero-split>div.start-here{justify-content:flex-start;display:block}

/* --- Step label column: wide enough for the longest real label ------------ */
@media(min-width:820px){ .step{grid-template-columns:236px minmax(0,1fr)} }

/* --- Centred closers keep a readable measure ------------------------------ */
.measure{max-width:22ch;margin-inline:auto}
.measure-wide{max-width:30ch;margin-inline:auto}

/* --- Embedded application forms ------------------------------------------ */
.form-section>.shell{display:block}
.form-intro,.form-section>.shell>.gate,.form-submit-note,.form-help{max-width:840px}
.form-submit-note{margin-top:16px;font-weight:650;color:var(--navy)}
.form-help{margin-top:14px}
.form-workspace{max-width:1120px;margin-top:clamp(24px,3vw,36px);overflow:clip;
  border:1px solid var(--line-ivory);border-radius:var(--radius);background:var(--card);
  box-shadow:var(--lift-2);scroll-margin-top:18px;display:flex;flex-direction:column;
  height:clamp(520px,calc(100vh - 28px),940px);
  height:clamp(520px,calc(100dvh - 28px),940px)}
.form-workspace:focus{outline:none}
.form-workspace:focus-visible{outline:3px solid var(--gold-lit);outline-offset:4px}
.form-workspace-bar{flex:none;display:flex;align-items:center;
  justify-content:space-between;gap:18px;padding:16px clamp(16px,2.4vw,26px);
  background:var(--navy);color:var(--ivory);border-bottom:1px solid var(--line-navy)}
.form-workspace-title{font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(23px,2.4vw,31px);font-weight:600;line-height:1.1}
.form-workspace-tools{display:flex;align-items:center;gap:10px;flex:none}
.form-workspace-open,.form-workspace-close{display:inline-flex;min-height:44px;align-items:center;
  justify-content:center;padding:9px 13px;border:1px solid rgba(247,242,232,.42);
  border-radius:var(--radius);background:transparent;color:var(--ivory);
  font:600 14px/1.2 'Figtree',sans-serif;text-decoration:none;cursor:pointer}
.form-workspace-open:hover,.form-workspace-close:hover{border-color:var(--gold);color:var(--gold-lit)}
.form-workspace-frame{position:relative;background:#fff;flex:1 1 auto;min-height:0;
  overflow:auto;-webkit-overflow-scrolling:touch}
.form-workspace-loading{position:absolute;inset:0;z-index:1;display:grid;place-items:center;
  padding:24px;background:var(--card);color:var(--on-ivory-soft);
  font-size:16px;text-align:center}
.form-workspace-loading[hidden]{display:none}
.form-workspace iframe{display:block;width:100%;height:100%;min-height:100%;
  border:0;background:#fff}
@media(max-width:640px){
  .form-workspace-bar{align-items:flex-start;flex-direction:column;padding-block:14px}
  .form-workspace-tools{width:100%;justify-content:space-between}
  .form-workspace-open,.form-workspace-close{padding-inline:11px}
}

/* --- Form receipt --------------------------------------------------------
   SmartSuite can return a successful submission here. Kept out of the
   navigation and search index: it is a completion state, not a destination. */
.submitted-section{display:grid;min-height:clamp(520px,72dvh,760px);align-items:center}
.submitted-card{max-width:760px}
.submitted-card .lede{max-width:52ch;margin-top:18px}
.submitted-card .acts{margin-top:clamp(24px,3vw,34px)}
.submitted-page.is-framed{background:var(--navy)}
.submitted-page.is-framed .mast,
.submitted-page.is-framed .drawer,
.submitted-page.is-framed .foot{display:none}
.submitted-page.is-framed .submitted-section{
  min-height:100dvh;padding-block:clamp(36px,7vw,72px)}

/* --- A photograph is set like a plate in a book ---------------------------
   Ready for pictures that have not arrived. The frame only exists when a file
   is named in the content file, so an empty slot shows nothing at all rather
   than a grey box waiting to be filled. */
/* Laid in courses like everything else here. Three across is not a
   compromise for this material, it is the right size for it: the source is
   an SD DVD at 854px, and at roughly 400px on screen that is still over two
   device pixels per image pixel, so it stays sharp on a phone and on a
   retina display. Run the same frames full-bleed and they would go soft. */
.plates{display:grid;gap:var(--joint);margin-top:clamp(30px,4vw,52px);
  grid-template-columns:repeat(var(--n,1),minmax(0,1fr))}
@media(max-width:699px){.plates{grid-template-columns:minmax(0,1fr)}}
.plates-credit{margin-top:14px}
.plate{margin:0}
.plate img{width:100%;height:auto;display:block;border-radius:var(--radius);
  border:1px solid var(--line-ivory);box-shadow:var(--lift-2);
  background:var(--ivory-2);aspect-ratio:854/480;object-fit:cover}
.navy .plate img,.navy-deep .plate img{border-color:var(--line-navy);
  box-shadow:var(--lift-navy)}
.plate figcaption{margin-top:12px;font-size:15px;line-height:1.5;
  color:var(--on-ivory-soft);max-width:56ch}
.navy .plate figcaption,.navy-deep .plate figcaption{color:var(--on-navy-soft)}

/* --- Real figures from the Sandy relief effort ---------------------------- */
.figures{display:flex;flex-wrap:wrap;gap:clamp(30px,5vw,80px);
  margin-top:clamp(34px,4.4vw,58px);padding-top:clamp(24px,3vw,36px);
  border-top:1px solid var(--line-ivory)}
.figures .fig{display:block;font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:500;font-size:clamp(64px,8vw,116px);line-height:.86;color:var(--navy)}
.figures .figlabel{display:block;margin-top:8px;font-size:16px;font-weight:600;
  color:var(--gold-ink)}
.navy .figures,.navy-deep .figures{border-top-color:var(--line-navy)}
.navy .figures .fig{color:var(--ivory)}
.navy .figures .figlabel{color:var(--gold-lit)}

/* --- A line that is said, not stated --------------------------------------
   Cormorant's italic is a different letterform, not a slanted roman, so it
   carries a voice the upright cannot. Reserved for a sentence someone would
   actually say aloud. One to a page at most, or it stops meaning anything. */
.said{font-style:italic;font-weight:400;letter-spacing:-.002em;
  line-height:1.14;text-wrap:balance}
/* The two sentences under a quote, each its own inline-block so the line
   falls between them where there is room and inside them where there is not. */
.said-under span{display:inline-block;text-wrap:balance}

/* --- The accent phrase ---------------------------------------------------- */
/* Solid brand gold. No gradient and no sheen: the sweep read as a flicker. */
.d1 .accent,.d2 .accent,.foil{color:var(--gold-lit)}

/* --- Section rhythm: a little more air above a heading than below it ------ */
.split.aside-left>div:first-child .d3,
.split.aside-left>div:first-child .d2{margin-top:2px}

/* ==========================================================================
   ARRIVAL
   --------------------------------------------------------------------------
   The name means "we will build". The proposition is set in three lines and
   they lay in like three courses, lowest first, each settling under its own
   weight. The last line is gold foil, because the logo is gold foil on a lit
   navy wall, and a sheen crosses it once as it lands. It happens once, it
   takes under a second and a half, and it is gone.
   ========================================================================== */

/* The wall in the supplied logo photograph is a fine grain under a soft
   light, not a flat fill. Navy sections carry the same grain. */
.navy::after,.navy-deep::after{content:"";position:absolute;inset:0;z-index:-1;
  pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='4'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='.09'/%3E%3C/svg%3E")}

/* Full height only where the content earns it. */
@media(min-width:1000px){
  .hero-tall{min-height:82vh;display:flex;align-items:center}
  .hero-tall>.shell{width:100%}
}

/* --- The proposition, laid in courses ------------------------------------- */
/* The mask that hides a line before it rises must extend below the baseline,
   or it shears the descenders off g, p, y and the comma. The padding gives it
   that room and the negative margin gives the space straight back, so the
   line spacing is unchanged. */
.d1 .line{display:block;overflow:hidden;padding-bottom:.18em;margin-bottom:-.18em}
.d1 .line>span{display:block;padding-bottom:.02em}


@media(prefers-reduced-motion:no-preference){
  .js .hero .d1 .line>span,
  .js .d1 .line>span{
    transform:translateY(125%);
    animation:course-set .82s cubic-bezier(.16,.84,.28,1) forwards}
  .js .d1 .line:nth-child(1)>span{animation-delay:.06s}
  .js .d1 .line:nth-child(2)>span{animation-delay:.17s}
  .js .d1 .line:nth-child(3)>span{animation-delay:.28s}


  .js .hero .lede,.js .hero .routes,.js .hero .start-here,.js .hero>.shell>.lede{opacity:0;
    animation:settle .7s cubic-bezier(.22,.7,.3,1) .5s forwards}
  .js .hero .routes a{opacity:0;
    animation:settle .6s cubic-bezier(.22,.7,.3,1) forwards}
  .js .hero .routes a:nth-child(1){animation-delay:.60s}
  .js .hero .routes a:nth-child(2){animation-delay:.68s}
  .js .hero .routes a:nth-child(3){animation-delay:.76s}
  .js .hero .routes a:nth-child(4){animation-delay:.84s}
  .js .hero .routes a:nth-child(5){animation-delay:.92s}
}

@keyframes course-set{
  0%{transform:translateY(125%)}
  100%{transform:translateY(0)}
}
@keyframes settle{
  0%{opacity:0;transform:translateY(10px)}
  100%{opacity:1;transform:none}
}

/* --- The routing rows earn a gold edge on approach ------------------------ */
.routes a{position:relative}
.routes a::before{content:"";position:absolute;left:0;top:12%;bottom:12%;width:2px;
  background:var(--gold);border-radius:2px;transform:scaleY(0);transform-origin:50% 50%;
  transition:transform .28s var(--ease)}
.routes a:hover::before,.routes a:focus-visible::before{transform:scaleY(1)}

/* --- A quiet offer of a person, at the foot of the opening ---------------- */
.hero-call{margin-top:clamp(22px,2.6vw,32px);font-size:16.5px;color:var(--on-navy-soft)}
.hero-call a{color:var(--gold-lit);text-decoration:none;font-weight:600;
  border-bottom:1px solid rgba(216,169,78,.4);padding-bottom:2px;
  transition:border-color .2s var(--ease)}
.hero-call a:hover{border-bottom-color:var(--gold-lit)}
@media(prefers-reduced-motion:no-preference){
  .js .hero .hero-call{opacity:0;animation:settle .7s cubic-bezier(.22,.7,.3,1) .78s forwards}
}
/* The masthead mark carries more confidence */
/* The size lives here, not in a style attribute on the tag. An inline height
   outranks every rule in this file, so while it was there the mark stayed
   60px at all widths and the small-screen rule below never once ran. */
.mast a.brand img{height:60px;width:auto}
@media(max-width:600px){.mast a.brand img{height:58px}}

/* --- Premium detail ------------------------------------------------------- */
::selection{background:rgba(201,150,63,.28);color:var(--navy)}
.navy ::selection,.navy-deep ::selection{background:rgba(216,169,78,.34);color:var(--ivory)}

/* Cormorant carries proper oldstyle figures. Use them wherever a numeral is
   set as display type, so numbers sit in the line instead of shouting. */
.d1,.d2,.d3,.d4,.figures .fig,.brick h2,.brick h3{
  font-variant-numeric:oldstyle-nums proportional-nums;
  font-feature-settings:"onum" 1,"pnum" 1}

/* Reading links: a fine underline that sits clear of the descenders. */
.prose a{text-decoration-thickness:1px;text-underline-offset:4px;
  text-decoration-color:rgba(122,90,34,.42);transition:text-decoration-color .2s var(--ease)}
.prose a:hover{text-decoration-color:var(--gold-ink)}
.navy .prose a{text-decoration-color:rgba(216,169,78,.5)}
.navy .prose a:hover{text-decoration-color:var(--gold-lit)}

/* --- The opening paragraph of a long read carries a drop cap -------------- */
.prose.opening>p:first-of-type::first-letter{
  float:left;font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;
  font-size:4.1em;line-height:.82;padding:.06em .09em 0 0;color:var(--navy)}
@media(max-width:600px){
  .prose.opening>p:first-of-type::first-letter{font-size:3.2em}
}

/* --- The figures are the strongest proof on the site --------------------- */
.figures{gap:clamp(36px,6vw,96px);margin-top:clamp(44px,5.5vw,74px);
  padding-top:clamp(30px,3.6vw,44px)}
.figures .fig{font-size:clamp(76px,9vw,142px);letter-spacing:-.02em}
.figures .figlabel{font-size:17px;margin-top:12px}

/* --- The question list, set to be read ----------------------------------- */
.qa summary{padding:26px 48px 26px 0;font-size:clamp(22px,2.1vw,28px)}
.qa .a{padding:0 0 28px;font-size:17.5px;line-height:1.7}
.qa details{transition:background .2s var(--ease)}
.qa details[open]{background:linear-gradient(180deg,rgba(122,90,34,.035),transparent 60%)}
.qa summary::after{right:12px;width:12px;height:12px;border-width:1.5px}

/* --- The application form sits behind a door ------------------------------
   Measured on a throttled phone, opening it pulls 3.4 MB and contacts Google,
   Sentry and Adobe alongside SmartSuite. Nobody reading the page should be
   handed to four other companies before she has decided to apply, so it is
   opened on purpose rather than on arrival. */
.gate{margin-top:clamp(24px,3vw,36px)}
.gate>.acts{margin-top:0}
/* Without JavaScript the button cannot open anything, so it is never shown
   and the new-tab link carries the whole job. */
.gate [data-embed-open]{display:none}
.js .gate [data-embed-open]{display:inline-flex}
/* And once the button can work, the new-tab link comes off. Offering both
   reads as two ways of leaving, when only one of them leaves at all. If the
   form ever fails to appear, the line underneath gives an address that does
   not depend on it. */
.js .gate-out{display:none}

/* --- A section whose real content has not arrived yet ---------------------
   It is not a warning strip. It states the position plainly and offers the
   action that does work right now, so the page reads as finished. */
.standin{background:var(--card);border:1px solid var(--line-ivory);
  border-radius:var(--radius);box-shadow:var(--lift-1);
  padding:clamp(28px,3.4vw,48px);max-width:64ch}
.standin h3{margin-bottom:14px;max-width:20ch}
.standin p{font-size:17.5px;line-height:1.65;max-width:52ch}
.standin p+p{margin-top:.85em}
.standin .acts{margin-top:clamp(22px,2.6vw,30px)}
.navy .standin,.navy-deep .standin{background:rgba(255,255,255,.045);
  border-color:var(--line-navy);box-shadow:var(--lift-navy)}

/* --- Footer base row ------------------------------------------------------ */
.foot-legal{display:flex;gap:22px}
.foot-base a{color:var(--on-navy-soft);text-decoration:none;
  border-bottom:1px solid rgba(196,210,228,.32);padding-bottom:1px}
.foot-base a:hover{color:var(--ivory);border-bottom-color:var(--ivory)}
.foot-base a[aria-current="page"]{color:var(--gold-lit);border-bottom-color:var(--gold-lit)}

/* --- Policy pages --------------------------------------------------------- */
.policy{max-width:70ch}
.policy h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;
  font-size:clamp(26px,2.6vw,34px);margin:clamp(38px,4.4vw,58px) 0 14px}
.policy h3{font-family:'Figtree',sans-serif;font-weight:700;font-size:17.5px;
  margin:26px 0 8px;color:var(--navy)}
.policy p,.policy li{font-size:17.5px;line-height:1.7;color:var(--on-ivory-soft)}
.policy p+p{margin-top:1em}
.policy ul{margin:12px 0 0;padding-left:1.15em}
.policy li{margin-bottom:.5em}
.policy li::marker{color:var(--gold-ink)}
.policy .lede{color:var(--navy);max-width:56ch}
.policy .stamp{font-size:15px;color:var(--on-ivory-soft);margin-top:8px}
.policy .flag{background:var(--card);border:1px solid var(--line-ivory);
  border-left:3px solid var(--gold);border-radius:var(--radius);
  box-shadow:var(--lift-1);padding:20px 24px;margin-top:20px;font-size:16.5px}


/* --- The shadchanim: one grid, one card ------------------------------------
   Every card is the same width and the same height, whatever the person has
   supplied. That is the whole point: laid out as separate rows the heights
   only matched within a pair, so the wall came out as three of one size and
   three of another. One grid with grid-auto-rows:1fr settles every row to the
   same height, and the actions are pinned to the bottom so they line up
   across the whole set. */
.roster{display:grid;gap:var(--joint);grid-auto-rows:1fr;
  grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:959px){.roster{grid-template-columns:repeat(2,minmax(0,1fr))}}

.person{display:flex;flex-direction:column;background:var(--card);
  border:1px solid var(--line-ivory);border-radius:var(--radius);
  box-shadow:var(--lift-1);padding:clamp(20px,2.2vw,28px)}
.ivory-2 .person{background:var(--ivory)}

/* Always present, always the same shape. Where there is no photograph the
   initial is set in the display face on navy, so the card keeps its anatomy
   instead of collapsing into a different one. */
.person-portrait{width:100%;aspect-ratio:4/5;border-radius:var(--radius);
  overflow:hidden;background:var(--navy);border:1px solid var(--line-ivory);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.person-portrait img{width:100%;height:100%;object-fit:cover;display:block}
.monogram{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;
  font-size:clamp(46px,5vw,68px);line-height:1;color:var(--gold);
  font-variant-numeric:normal}

.person .n{font-size:14px;font-weight:600;color:var(--gold-ink)}
.person h3{font-family:'Cormorant Garamond',serif;font-size:clamp(22px,2vw,27px);
  font-weight:600;line-height:1.12;color:var(--navy);margin-top:4px;
  overflow-wrap:break-word}
.person-bio{margin-top:10px;font-size:15px;line-height:1.55;
  color:var(--on-ivory-soft)}
/* Each profile opens with complete sentences. The remainder is hidden only
   after its working toggle has attached, so the entire write-up still reads
   normally if JavaScript is unavailable. */
.profile-disclosure-ready .person-bio-rest{display:none}
.profile-disclosure-ready .person.open .person-bio-rest{display:inline}
.person-bio-none{font-style:italic}
/* Pinned to the foot of the card, so the buttons align across the row. */
.person-acts{margin-top:auto;padding-top:16px;display:flex;flex-wrap:wrap;
  gap:10px;align-items:center}
.person-acts .act{padding:11px 18px;font-size:15px}
.person-more{display:none;align-items:center;min-height:44px;padding:6px 0;
  border:0;background:transparent;font:inherit;font-size:14px;font-weight:650;
  line-height:1.2;color:var(--gold-ink);cursor:pointer;text-align:left;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.profile-disclosure-ready .person-more{display:inline-flex}
.person-more:hover{color:var(--navy)}
.person[hidden]{display:none}

/* The roster is long enough that location is useful, but its biographies do
   not contain consistent structured specialties. Filter only by the one
   comparable fact supplied for every person: the community on her card. */
.roster-filters{margin:0 0 clamp(22px,3vw,34px);padding:18px 0 20px;
  border-block:1px solid var(--line-ivory)}
.roster-filters[hidden]{display:none}
.roster-filter-field{min-width:0;margin:0;padding:0;border:0}
.roster-filter-legend{padding:0;font-size:15px;font-weight:700;color:var(--navy)}
.roster-filter-options{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.roster-filter{position:relative;display:block;min-width:0;cursor:pointer}
.roster-filter input{position:absolute;inline-size:1px;block-size:1px;opacity:0;pointer-events:none}
.roster-filter-in{display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:44px;padding:9px 13px;border:1px solid var(--line-ivory);
  border-radius:var(--radius);background:var(--card);color:var(--navy);
  font-size:14.5px;font-weight:650;line-height:1.3;box-shadow:var(--lift-1);
  transition:border-color .18s var(--ease),background .18s var(--ease),color .18s var(--ease)}
.roster-filter:hover .roster-filter-in{border-color:var(--gold)}
.roster-filter input:focus-visible+.roster-filter-in{outline:3px solid var(--gold-lit);outline-offset:3px}
.roster-filter input:checked+.roster-filter-in{border-color:var(--navy);background:var(--navy);color:var(--ivory)}
.roster-filter-count{display:inline-grid;min-width:24px;min-height:24px;place-items:center;
  padding-inline:6px;border-radius:var(--radius);background:var(--ivory-2);
  color:var(--gold-ink);font-size:12px;font-variant-numeric:tabular-nums}
.roster-filter input:checked+.roster-filter-in .roster-filter-count{
  background:rgba(255,255,255,.1);color:var(--gold-lit)}
.roster-filter-status{margin-top:12px}

/* On one column the card turns on its side. Standing tall, a portrait at 4:5
   across a 390px screen is some seven hundred pixels of navy per person, and
   eighteen of those is a page nobody will scroll. Laid
   as a row it is a list you can actually run your eye down. */
@media(max-width:639px){
  .roster-filter-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .roster-filter-in{height:100%}
  .roster{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto}
  .person{display:grid;grid-template-columns:96px minmax(0,1fr);
    column-gap:16px;padding:16px;
    grid-template-areas:"portrait area" "portrait name" "bio bio" "acts acts"}
  .person-portrait{grid-area:portrait;margin-bottom:0;align-self:start}
  .monogram{font-size:38px}
  .person .n{grid-area:area;align-self:end}
  .person h3{grid-area:name;align-self:start;margin-top:2px}
  .person-bio{grid-area:bio;margin-top:12px}
  .person-acts{grid-area:acts;margin-top:0;padding-top:12px}
  .person-acts .act{width:100%;justify-content:center}
  .person-more{align-self:flex-start}
}
@media(max-width:359px){
  .roster-filter-options{grid-template-columns:minmax(0,1fr)}
  /* The name column here is narrower than a long family name set solid, and
     the roster now carries several. The portrait gives up the width. */
  .person{grid-template-columns:72px minmax(0,1fr);column-gap:12px}
  .monogram{font-size:30px}
  .person h3{font-size:20px}
}

/* What a form will not let you finish without. Sits above the button, so it
   is read before the form is opened rather than discovered halfway down it. */
.needs{margin-top:clamp(20px,2.4vw,28px);padding:clamp(16px,2vw,22px) clamp(18px,2.2vw,26px);
  background:var(--card);border:1px solid var(--line-ivory);
  border-left:3px solid var(--gold);border-radius:var(--radius);
  box-shadow:var(--lift-1);max-width:62ch}
.needs-h{font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gold-ink)}
.needs ul{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:9px}
.needs li{position:relative;padding-left:20px;font-size:16px;line-height:1.55;
  color:var(--on-ivory-soft)}
.needs-note{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-ivory);
  font-size:14px;line-height:1.5;color:var(--on-ivory-soft)}
.needs li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;
  border-radius:2px;background:var(--gold)}

/* The permission prompt is immediately before the one action that opens a
   form requesting another person's private details. It is an instruction,
   not a legal-looking wall of text. */
.consent{max-width:62ch;margin-top:clamp(20px,2.4vw,28px);padding:18px 20px;
  background:var(--card);border:1px solid var(--line-ivory);border-left:3px solid var(--gold);
  border-radius:var(--radius);box-shadow:var(--lift-1)}
.consent-label{display:flex;align-items:flex-start;gap:12px;font-size:16px;line-height:1.55;
  font-weight:600;color:var(--navy);cursor:pointer}
.consent-label input{flex:0 0 auto;width:19px;height:19px;margin-top:3px;accent-color:var(--navy)}
.consent .small{margin:10px 0 0;padding-left:31px}
.consent-status{min-height:1.45em;margin:8px 0 0;padding-left:31px;font-size:15px;
  color:#8C2A2A}

/* --- Booking: one deliberate path, not a pile of pop-ups ----------------- */
.booking-intro,.booking-section-head{display:grid;gap:22px;align-items:end}
@media(min-width:800px){.booking-intro,.booking-section-head{grid-template-columns:minmax(0,1fr) minmax(280px,.8fr)}}
.booking-intro .lede,.booking-section-head .lede{max-width:46ch}
.booking-flow{margin-top:clamp(30px,4vw,52px)}
.booking-step{margin:0;padding:0;border:0;min-width:0}
.booking-step legend{padding:0;max-width:42ch}
.booking-step-no{display:block;margin:0 0 8px;font-size:14px;font-weight:700;
  letter-spacing:.04em;color:var(--gold-ink)}
.booking-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;
  margin-top:20px}
.booking-option{position:relative;display:block;min-width:0;cursor:pointer}
.booking-option input{position:absolute;inline-size:1px;block-size:1px;opacity:0;pointer-events:none}
/* Stacked from the top. With space-between the price was pushed to the foot of
   the card, which read fine while every card was two lines and left a hole in
   the middle once two of the four gained the client's explanation. */
.booking-option-in{display:flex;min-height:102px;height:100%;flex-direction:column;
  justify-content:flex-start;gap:10px;padding:18px 20px;background:var(--card);
  border:1px solid var(--line-ivory);border-radius:var(--radius);box-shadow:var(--lift-1);
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease),transform .18s var(--ease)}
.booking-option:hover .booking-option-in{border-color:var(--gold);transform:translateY(-2px);box-shadow:var(--lift-2)}
.booking-option input:checked+.booking-option-in{border-color:var(--navy);
  box-shadow:0 0 0 2px var(--navy) inset,var(--lift-1)}
.booking-option input:focus-visible+.booking-option-in{outline:3px solid var(--gold-lit);outline-offset:3px}
.kind-label{font-weight:650;color:var(--navy);line-height:1.35}
.kind-note{font-size:14px;line-height:1.5;color:var(--on-ivory-soft)}
.kind-meta{font-size:14px;font-weight:650;color:var(--gold-ink);white-space:nowrap}
/* A SERVICE THAT IS NOT ONE OF THE SIBLINGS AROUND IT. The four coaching
   sessions are booked by the single; the Parent Guidance Session is booked
   by a parent, so Nivneh asked on 2026-09-02 for it to stand out without
   being moved into a section of its own. It takes the whole row rather than
   sitting orphaned in one column of a two-column grid, it is filled and
   edged instead of outlined, and it says who it is for. */
.booking-option-apart{grid-column:1/-1;margin-top:8px}
.booking-option-apart .booking-option-in{min-height:0;background:var(--ivory-2);
  border-color:var(--line-ivory);border-left:3px solid var(--gold)}
.booking-option-apart:hover .booking-option-in{border-color:var(--gold);border-left-color:var(--gold)}
.booking-option-apart input:checked+.booking-option-in{border-color:var(--navy);
  border-left-color:var(--navy)}
.kind-apart{margin-bottom:-4px;font:600 14px/1.4 'Figtree',sans-serif;color:var(--gold-ink)}
.booking-status{min-height:1.5em;margin:14px 0 0;font-size:15px;color:var(--on-ivory-soft)}
.booking-roster-section{padding-top:var(--gap)}
.booking-helper{margin:clamp(18px,2.4vw,26px) 0;padding:13px 16px;background:var(--ivory-2);
  border-left:3px solid var(--gold);font-size:15.5px;color:var(--on-ivory-soft)}
.person[data-book-selected]{border-color:var(--navy);box-shadow:0 0 0 2px var(--navy) inset,var(--lift-2)}
.person-acts .person-soon{font:600 15px/1.45 'Figtree',sans-serif;color:var(--gold-ink)}
.person-select:disabled{cursor:not-allowed;opacity:.48;transform:none;box-shadow:none}
.person-select:disabled:hover{transform:none;background:var(--navy);box-shadow:none}
/* A card listed for a different appointment than the one chosen: the Choose
   button steps aside for one button per appointment this person does take.
   Spelled out for [hidden] because .act sets its own display and would
   otherwise stay on the page with the attribute on it. */
.person-acts .act[hidden]{display:none}
.person-other{flex-basis:100%;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.person-other[hidden]{display:none}
.person-other .act{text-align:left}
/* Pick a day and time, see who is free. Two of the contact form's fields, a
   date and a list, under the community filter's own legend and status line,
   so nothing here is new to the eye. Hidden until /api/availability has
   said it is set up. */
.roster-when{margin:0 0 clamp(22px,3vw,34px);padding:18px 0 20px;border-block:1px solid var(--line-ivory)}
.roster-when[hidden]{display:none}
.roster-when:not([hidden])+.roster-filters{border-top:0;padding-top:0}
.roster-when-lede{margin-top:8px;max-width:62ch}
.roster-when-row{display:flex;flex-wrap:wrap;align-items:stretch;gap:12px;margin-top:14px}
.roster-when-row .field{flex:0 1 250px;margin-bottom:0}
/* The date field is the taller of the two; the list grows to meet it so the
   two labels sit on one line and the two boxes on another. */
.roster-when-row select{flex:1 1 auto;font-variant-numeric:tabular-nums}
.roster-when-row select:disabled{color:var(--on-ivory-soft);cursor:not-allowed}
@media(max-width:639px){
  .roster-when-row .field{flex-basis:100%}
}
.booking-checkout-section{padding-block:clamp(42px,6vw,82px)}
.booking-checkout-grid{display:grid;grid-template-columns:minmax(260px,330px) minmax(0,1fr);
  gap:clamp(24px,3.5vw,50px);align-items:start}
.booking-summary-shell{position:sticky;top:24px;align-self:start;min-width:0}
.booking-summary{padding:clamp(22px,2.6vw,32px);border:1px solid var(--line-navy);
  border-radius:var(--radius);background:var(--navy);color:var(--ivory);box-shadow:var(--lift-navy)}
.booking-summary .booking-step-no{color:var(--gold-lit)}
.booking-summary-top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.booking-summary-toggle{display:none;min-width:44px;min-height:44px;align-items:center;
  justify-content:center;gap:8px;padding:8px 0 8px 12px;border:0;background:none;
  color:var(--gold-lit);font:650 14px/1.2 'Figtree',sans-serif;cursor:pointer}
.booking-summary-toggle::after{content:"";width:9px;height:9px;flex:none;
  margin-top:-4px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);transition:transform .18s var(--ease)}
.booking-summary-toggle[aria-expanded="true"]::after{margin-top:2px;transform:rotate(225deg)}
.booking-summary-compact{display:none;margin:8px 0 0;color:var(--ivory);
  font-size:15px;font-weight:650;line-height:1.4}
.booking-summary-body>.muted{margin-top:14px}
.booking-summary-list{margin-top:22px;border-top:1px solid var(--line-navy)}
.booking-summary-list>div{display:block;padding:15px 0;border-bottom:1px solid var(--line-navy)}
.booking-summary-list dt{font-size:14px;font-weight:700;color:var(--gold-lit)}
.booking-summary-list dd{margin:5px 0 0;color:var(--ivory);font-weight:600;line-height:1.45}
.summary-change{min-height:44px;margin-top:8px;padding:8px 0;background:none;border:0;
  color:var(--gold-lit);font:600 14px/1 'Figtree',sans-serif;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
.booking-summary .muted{color:var(--on-navy-soft)}
.booking-summary .act-primary{background:var(--gold);color:var(--navy-900);border-color:var(--gold)}
.booking-summary .act-primary:hover{background:var(--gold-lit)}
.booking-summary .booking-consent{max-width:none;margin-top:20px;background:rgba(255,255,255,.05);
  border-color:var(--line-navy);border-left-color:var(--gold);box-shadow:none;padding:18px 20px}
.booking-summary .consent-label{color:var(--ivory)}
.booking-summary .consent-label input{accent-color:var(--gold-lit)}
.booking-summary .booking-consent .small{margin:10px 0 0;padding-left:31px;color:var(--on-navy-soft)}
.booking-summary-actions{display:flex;align-items:stretch;flex-direction:column;gap:12px;margin-top:22px}
.booking-summary-actions .act{justify-content:center;width:100%}
.booking-summary-actions .booking-status{margin:0;color:var(--on-navy-soft)}
.booking-calendar-column{min-width:0;padding:clamp(22px,3vw,38px);background:var(--card);
  border:1px solid var(--line-ivory);border-radius:var(--radius);box-shadow:var(--lift-1)}
.booking-calendar-column .d2{max-width:18ch}
/* NOT overflow:hidden. The height of this frame is measured from the vendor
   widget inside it, and a measurement that comes in late or wrong used to be
   clipped here with no way to reach the rest: Nivneh sent a screenshot of the
   booking form cut off mid-field. Nothing about the calendar clips now, the
   frame carries a floor rather than a fixed height, and the page inside it
   scrolls if it is ever taller than the frame it was given. */
.booking-calendar{max-width:none;margin-top:clamp(24px,3vw,34px);
  border:1px solid var(--line-ivory);border-radius:var(--radius);background:#fff;box-shadow:var(--lift-2)}
.booking-calendar iframe{display:block;width:100%;min-height:900px;border:0;
  border-radius:var(--radius);background:#fff}
.book-fallback{margin-top:18px}
.js .book-fallback{display:none}
.js .book-fallback.show{display:block}
@media(max-width:999px){
  .booking-checkout-grid{grid-template-columns:minmax(0,1fr);gap:24px}
  .booking-summary-shell{position:relative;top:auto;z-index:20}
  .js .booking-summary-shell[data-calendar-active]{position:sticky;top:0}
  .js .booking-summary-shell[data-calendar-active] .booking-summary{
    max-height:100dvh;overflow-y:auto;overscroll-behavior:contain}
  .js .booking-summary-shell[data-calendar-active]:not([data-summary-collapsed]){
    position:sticky;top:0;min-height:92px;z-index:55}
  .js .booking-summary-shell[data-calendar-active]:not([data-summary-collapsed]) .booking-summary{
    position:fixed;top:12px;left:var(--pad);right:var(--pad);width:auto;max-width:620px;
    max-height:calc(100dvh - 24px);margin-inline:auto}
  .js .booking-summary-toggle{display:inline-flex}
  .booking-summary-compact{display:block}
  .js .booking-summary-shell[data-summary-collapsed] .booking-summary-body{display:none}
  .booking-summary-shell[data-summary-collapsed] .booking-summary{padding-block:12px}
  .booking-summary-shell[data-summary-collapsed] .booking-step-no{display:none}
  .booking-summary-shell[data-summary-collapsed] .booking-summary-top{align-items:center}
  .booking-summary-shell[data-summary-collapsed] .d3{font-family:'Figtree',sans-serif;
    font-size:18px;line-height:1.2;font-weight:700}
  .booking-summary-shell[data-summary-collapsed] .booking-summary-compact{
    margin-top:4px;font-size:14px;line-height:1.3}
  .booking-calendar-column{padding:clamp(20px,4vw,32px);scroll-margin-top:104px}
}
@media(max-width:699px){
  .booking-options{grid-template-columns:minmax(0,1fr)}
  .booking-option-in{min-height:0}
  .booking-summary{padding:20px}
  .booking-summary .d3{font-size:clamp(27px,8vw,34px)}
  .booking-calendar-column{padding-inline:clamp(16px,4vw,22px)}
  .booking-calendar iframe{min-height:960px}
}