/* Kingdom of Immanuel — kingdomofimmanuel.com
   ----------------------------------------------------------------------------
   White ground, black type. Two faces doing two jobs: Garamond speaks, Raleway
   works. Ornament is carried by the arms rather than by rules: the Coat of
   Dominion is posted as a watermark at both borders, the Royal Seal sits behind
   every hero, and the seal appears in full colour where a page is being sealed
   rather than decorated. */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Raleway:wght@400;500;600;700&display=swap');

:root{
  /* IMMANUEL BLUE — the light blue band of the flag on the Royal Arms.
     It carries the invitation: the prayer call, gathering buttons, focus
     states, and the seal watermark. Black on it is 7.6:1. */
  --blue:#00A1E4;
  --blue-deep:#125E84;          /* the frame colour — every border on the site */
  --frame:#125E84;
  --frame-soft:rgba(18,94,132,.42);
  --frame-line:rgba(18,94,132,.62);
  --blue-mark:#125E84;          /* the name of the Kingdom — matches the frames */
  --rule-blue:rgba(0,161,228,.42);

  --gold:#C09A2E;                       /* lion gold — emphasis marks only */
  --gold-soft:rgba(192,154,46,.40);
  --gold-line:rgba(192,154,46,.58);

  --white:#FFFFFF;
  --tint:#F7FAFC;                       /* barely-there band */
  --ink:#000000;
  --rule:rgba(0,0,0,.13);
  --rule-soft:rgba(0,0,0,.07);

  --serif:'EB Garamond','Garamond','Adobe Garamond Pro','Palatino Linotype',Palatino,Georgia,serif;
  --sans:'Raleway','Helvetica Neue',Helvetica,Arial,sans-serif;

  --shadow:0 1px 2px rgba(0,0,0,.04),0 10px 30px -16px rgba(0,0,0,.18);
  --maxw:1140px;
  --pad:clamp(1.25rem,5vw,2.5rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

body{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(1.0625rem,.45vw + 1rem,1.1875rem);
  line-height:1.65;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}

a{color:var(--ink);text-decoration:underline;text-underline-offset:.18em;
  text-decoration-thickness:1px;text-decoration-color:var(--rule-blue)}
a:hover{text-decoration-color:var(--ink);text-decoration-thickness:2px}

:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;
  font-family:var(--sans);padding:.7rem 1.1rem;z-index:300;text-decoration:none}
.skip:focus{left:.5rem;top:.5rem}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.narrow{max-width:44rem}
.mid{max-width:62rem}

/* ---------- Type ---------- */
h1,h2,h3,h4{line-height:1.14;font-weight:600;margin:0 0 .5em;letter-spacing:-.008em;color:var(--ink)}
h1{font-size:clamp(2.35rem,5.2vw,3.9rem)}
h2{font-size:clamp(1.75rem,3vw,2.5rem)}
h3{font-size:clamp(1.2rem,1.4vw,1.45rem)}
p{margin:0 0 1.15em}
.lede{font-size:clamp(1.16rem,1vw + 1rem,1.4rem);line-height:1.55}

/* Raleway carries every label, control and piece of chrome. */
.eyebrow{
  font-family:var(--sans);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;color:var(--ink);margin:0 0 1.1rem;display:block;
}
.eyebrow::before{content:"";display:inline-block;width:1.4rem;height:2px;
  background:var(--gold);vertical-align:.3em;margin-right:.7rem}

.rule{border:0;height:4px;margin:3rem 0;background:none;
  border-top:2px solid var(--gold-line);border-bottom:1px solid var(--gold-soft)}
.rule--short{width:4.5rem;height:5px;background:none;border:0;margin:0 0 1.75rem;
  border-top:3px solid var(--gold);border-bottom:1px solid var(--gold)}
.center .rule--short{margin-inline:auto}
.center{text-align:center}

blockquote{
  margin:2.25rem 0;padding:0 0 0 1.5rem;font-style:italic;font-size:1.1em;
  border-left:3px solid var(--gold);box-shadow:inset 4px 0 0 -2px var(--gold);
}
blockquote cite{display:block;font-family:var(--sans);font-style:normal;font-size:.7em;
  letter-spacing:.16em;text-transform:uppercase;margin-top:1rem;opacity:.65}

.creed{
  font-style:italic;font-size:clamp(1.1rem,.6vw + 1rem,1.3rem);
  margin:1.5rem auto 0;max-width:34rem;position:relative;padding:1.15rem 0 0;
}
.creed::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:4.5rem;height:5px;border-top:3px solid var(--gold);border-bottom:1px solid var(--gold)}

.hebrew{font-size:1.3em;line-height:1.5;direction:rtl;unicode-bidi:isolate}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--sans);font-size:.78rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink);
  padding:.95rem 1.75rem;border-radius:2px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:background .18s,border-color .18s,color .18s;
}
.btn:hover{text-decoration:none}
.btn--blue{background:var(--blue);border-color:var(--blue)}
.btn--blue:hover{background:#0B8FCC}
.btn--gold{background:var(--gold);border-color:var(--gold)}
.btn--gold:hover{background:#AB881F}
.btn--outline{background:transparent;border-color:rgba(0,0,0,.35)}
.btn--outline:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.center .btn-row{justify-content:center}

/* ---------- Utility bar ----------
   A slim standing line above the masthead. It carries the prayer call, so the
   number is on every page of the site without repeating a whole block. */
.utility{
  background:var(--blue-deep);color:#fff;font-family:var(--sans);
  font-size:.76rem;letter-spacing:.04em;
}
.utility-in{
  max-width:var(--maxw);margin-inline:auto;padding:.5rem var(--pad);
  display:flex;align-items:center;justify-content:center;gap:.4rem .9rem;flex-wrap:wrap;
  text-align:center;
}
.utility b{font-weight:600}
.utility a{color:#fff;text-decoration-color:rgba(255,255,255,.5)}
.utility a:hover{text-decoration-color:#fff}
.utility .sep{opacity:.45}
@media (max-width:560px){.utility{font-size:.72rem}.utility .sep{display:none}}

/* ---------- Edge watermark ----------
   The Coat of Dominion posted faintly at both margins, as a watermark sits at
   the edges of a document. The pair is mirrored so the arms face inward and
   flank the page. Fixed, so it stays as the page scrolls; behind the masthead,
   above the page grounds, and far too faint to touch legibility.
   Hidden on narrow screens, where there is no margin to post it in. */
.edge-marks{position:fixed;inset:0;pointer-events:none;user-select:none;z-index:40;overflow:hidden}
.edge-mark{position:absolute;top:50%;width:24rem;opacity:.10}
.edge-mark--l{left:-8.5rem;transform:translateY(-50%)}
.edge-mark--r{right:-8.5rem;transform:translateY(-50%) scaleX(-1)}
/* Eased back where the arms start to sit under the text column rather than
   beside it — the same mark reads heavier once it is behind words. */
@media (max-width:1500px){.edge-mark{width:19rem;opacity:.07}
  .edge-mark--l{left:-7.5rem}.edge-mark--r{right:-7.5rem}}
@media (max-width:900px){.edge-marks{display:none}}
@media print{.edge-marks{display:none}}

/* ---------- Header ---------- */
.site-head{
  position:sticky;top:0;z-index:100;background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--rule-soft);backdrop-filter:saturate(1.2) blur(8px);
}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  max-width:var(--maxw);margin-inline:auto;padding:.8rem var(--pad);position:relative}
.brand{display:flex;align-items:center;gap:.85rem;text-decoration:none;color:var(--blue-mark)}
.brand:hover{text-decoration:none}
/* The Royal Seal in the frame blue. It is a denser shape than the arms, so it
   is set a touch larger to hold the same optical weight in the masthead. */
.brand img{width:58px;flex:none}
.brand b{font-family:var(--serif);font-weight:600;font-size:1.28rem;letter-spacing:.01em;
  line-height:1.08;display:block;color:var(--blue-mark);max-width:7.5em}
@media (max-width:560px){.brand img{width:46px}.brand b{font-size:1.08rem}}

/* Nav labels sit on one line each. A max-width here would be worse than
   useless — "GOVERNMENT" and "CONSTITUTION" are single words and cannot break,
   so they overflow their box and collide with the next item instead of
   wrapping. Let each label take the width it needs and space them properly. */
.nav{display:flex;align-items:center;gap:.15rem}
.nav a{
  font-family:var(--sans);color:var(--ink);text-decoration:none;white-space:nowrap;
  font-size:.74rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  padding:.55rem .65rem;border-radius:2px;line-height:1.25;
}
.nav a:hover{background:var(--tint);text-decoration:none}
.nav a[aria-current="page"]{color:var(--blue);box-shadow:inset 0 -3px 0 var(--blue)}
.nav a[aria-current="page"]:hover{color:var(--blue)}
.nav .btn{margin-left:.7rem;padding:.7rem 1.15rem;font-size:.7rem}
.nav .btn[aria-current="page"]{color:var(--ink);box-shadow:0 3px 0 var(--blue)}

.nav-toggle{display:none;background:none;border:1px solid var(--ink);color:var(--ink);
  font-family:var(--sans);padding:.55rem .85rem;border-radius:2px;font-size:.72rem;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}

@media (max-width:1040px){
  .nav-toggle{display:block}
  .nav{
    position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;
    background:var(--white);border-bottom:1px solid var(--rule);
    padding:.5rem var(--pad) 1.2rem;gap:0;box-shadow:var(--shadow);
  }
  .nav[hidden]{display:none}
  .nav a{padding:.85rem .2rem;border-bottom:1px solid var(--rule-soft);white-space:normal}
  .nav a[aria-current="page"]{color:var(--blue);box-shadow:inset 3px 0 0 var(--blue);padding-left:.8rem}
  .nav .btn{margin:1rem 0 0;justify-content:center}
  .nav .btn[aria-current="page"]{box-shadow:inset 4px 0 0 var(--blue)}
}

/* ---------- Hero ----------
   The Royal Seal sits behind it, huge and pale. This is what carries the
   ceremony — the frame stays a hairline. */
.hero{
  position:relative;text-align:center;background:var(--white);overflow:hidden;
  padding:clamp(3.5rem,7vw,6rem) 0 clamp(3.25rem,6vw,5rem);
  border-bottom:1px solid var(--rule-soft);
}
.hero-mark{
  position:absolute;pointer-events:none;user-select:none;
  width:min(46rem,90vw);top:50%;left:50%;transform:translate(-50%,-50%);
  opacity:.09;z-index:0;
}
.hero::after{content:"";position:absolute;inset:.8rem;pointer-events:none;
  border:2px solid var(--frame-line);z-index:1}
.hero::before{content:"";position:absolute;inset:1.15rem;pointer-events:none;
  border:1px solid var(--frame-soft);z-index:1}
.hero .wrap{position:relative;z-index:2}
.hero-crest{width:clamp(140px,19vw,186px);margin:0 auto 1.6rem}
.hero .lede{max-width:38rem;margin-inline:auto}
.motto{font-size:1.5rem;margin:0 0 1.3rem}
.hero h1{color:var(--blue-mark)}

.hero--page{padding:clamp(3rem,5.5vw,4.5rem) 0}
.hero--page h1{font-size:clamp(2.1rem,4.2vw,3.1rem)}
.hero--page::after{inset:.6rem}
.hero--page::before{inset:.95rem}
.hero--page .hero-mark{width:min(34rem,80vw);opacity:.05}

/* ---------- Sections ---------- */
.sec{padding:clamp(3.25rem,7vw,5.75rem) 0}
.sec--paper{background:var(--white)}
.sec--tint,.sec--dark{background:var(--tint);
  border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft)}

.sec-head{max-width:44rem;margin-bottom:2.75rem}
.center .sec-head{margin-inline:auto}

/* The seal used as a divider between movements of a page. */
.seal-rule{display:block;width:3.5rem;margin:0 auto;opacity:.5}
.seal-rule--lg{width:5.5rem;opacity:.85;margin-bottom:1.5rem}

/* ---------- Cards ----------
   One hairline and a gold top rule. Nothing else — repeated ornament is what
   makes a page feel busy. */
.grid{display:grid;gap:1.25rem}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(19rem,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(16.5rem,1fr))}

.card,.card--dark{
  background:var(--white);border:1px solid var(--rule);border-top:3px solid var(--frame);
  padding:1.8rem 1.7rem;border-radius:2px;color:var(--ink);
}
.card h3{margin-bottom:.55rem}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.card .num{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.1rem;height:2.1rem;border:1px solid var(--gold);border-radius:50%;
  font-family:var(--sans);font-size:.85rem;font-weight:600;margin-bottom:1rem
}

/* ---------- The gathering ---------- */
.invite{
  background:var(--white);border:1px solid var(--rule);border-left:3px solid var(--frame);
  border-radius:2px;padding:clamp(1.75rem,3.5vw,2.75rem);
  display:grid;gap:2rem;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:center;
}
@media (max-width:1000px){.invite{grid-template-columns:1fr}}
.invite h2{margin-top:0}
.invite p:last-of-type{margin-bottom:0}

.when{
  background:var(--white);border:2px solid var(--frame);border-radius:2px;
  padding:1.6rem 1.4rem;text-align:center;color:var(--ink)
}
.when .day{font-size:1.85rem;line-height:1.1;margin:0;font-weight:600}
.when .time{font-size:1.35rem;margin:.3rem 0 0;font-weight:600}
.when .tz{font-family:var(--sans);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  margin:.55rem 0 0;opacity:.7}
.when .next{font-family:var(--sans);font-size:.78rem;margin:1.1rem 0 0;padding-top:1rem;
  border-top:1px solid var(--rule-soft);line-height:1.5}
.when .next b{display:block;font-size:.95rem;font-weight:600;margin-top:.2rem}

/* ---------- The Shabbat Prayer Call ---------- */
.dial{
  border:5px solid var(--frame);border-radius:2px;background:var(--white);
  padding:1.75rem 1.5rem;text-align:center;margin:1.75rem 0 0;position:relative;
  box-shadow:inset 0 0 0 5px var(--white), inset 0 0 0 7px var(--frame);
}
.dial .k{font-family:var(--sans);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  margin:0 0 .65rem;font-weight:600}
.dial .number{
  font-size:clamp(1.75rem,4vw,2.5rem);font-weight:600;line-height:1.05;margin:0;
  font-variant-numeric:tabular-nums;
}
.dial .number a{text-decoration:none;color:var(--ink)}
.dial .number a:hover{text-decoration:underline;text-decoration-thickness:2px}
.dial .code{font-size:1.15rem;margin:.55rem 0 0;font-variant-numeric:tabular-nums}
.dial .code b{font-weight:600;letter-spacing:.05em}
.dial .times{font-family:var(--sans);font-size:.8rem;font-weight:500;margin:.8rem 0 0;
  padding-top:.8rem;border-top:1px solid var(--frame-soft);font-variant-numeric:tabular-nums}
.dial .times b{font-weight:700}
.dial .hint{font-family:var(--sans);font-size:.72rem;line-height:1.5;margin:.7rem 0 0;opacity:.6}
.dial .cry{font-size:1.08rem;font-style:italic;margin:.9rem 0 0;line-height:1.35;text-wrap:balance}
.dial .selah{font-size:1rem;margin:.3rem 0 0}
.dial .seal{width:5.5rem;height:auto;margin:1rem auto 0}
.dial--lg{padding:2rem 1.7rem}
.dial--lg .seal{width:7rem}

/* ---------- Lists ---------- */
.ticks{list-style:none;padding:0;margin:0}
.ticks li{position:relative;padding-left:1.7rem;margin-bottom:.8rem}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:.5rem;height:.5rem;
  background:var(--gold);transform:rotate(45deg)}

/* ---------- Order of service ---------- */
.flow{list-style:none;padding:0;margin:0}
.flow li{display:grid;grid-template-columns:6.5rem 1fr;gap:1.3rem;
  padding:1.15rem 0;border-bottom:1px solid var(--rule-soft)}
.flow li:last-child{border-bottom:0}
.flow .t{font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;padding-top:.35em;font-variant-numeric:tabular-nums}
.flow b{display:block;font-weight:600}
.flow .d{opacity:.78;font-size:.95em}
@media (max-width:560px){.flow li{grid-template-columns:1fr;gap:.2rem}.flow .t{padding-top:0}}

/* ---------- Q&A ---------- */
.qa{margin:0}
.qa details{border-bottom:1px solid var(--rule-soft);padding:.2rem 0}
.qa summary{cursor:pointer;padding:1.1rem 0;font-weight:600;font-size:1.1rem;list-style:none;
  display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";font-size:1.35rem;line-height:1;flex:none;color:var(--blue-deep)}
.qa details[open] summary::after{content:"\2212"}
.qa details > p{margin:0 0 1.2rem;max-width:52rem;opacity:.85}

/* ---------- Ministries ---------- */
.ministries{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.ministries section{background:var(--white);border:1px solid var(--rule);
  padding:1.5rem 1.4rem;border-radius:2px}
.ministries h3{font-size:1.05rem;margin-bottom:.7rem;padding-bottom:.6rem;
  border-bottom:1px solid var(--frame-soft)}
.ministries ul{list-style:none;padding:0;margin:0;font-size:.97rem}
.ministries li{padding:.3rem 0;opacity:.85}

/* ---------- Constitution index ---------- */
.chapters{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.chapters li{display:grid;grid-template-columns:9rem 1fr;gap:1.1rem;
  padding:1rem 1.15rem;background:var(--white);border:1px solid var(--rule);border-radius:2px}
.chapters .ch{font-family:var(--sans);font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;font-size:.68rem;align-self:center;padding-top:.2em}
@media (max-width:560px){.chapters li{grid-template-columns:1fr;gap:.25rem}}

/* ---------- Forms ---------- */
.form{display:grid;gap:1.1rem;max-width:34rem}
.form--wide{max-width:40rem}
.field{display:grid;gap:.45rem}
.field label{font-family:var(--sans);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600}
.field input,.field select,.field textarea{
  font-family:var(--serif);font-size:1.02rem;color:var(--ink);background:var(--white);
  border:1px solid var(--rule);border-radius:2px;padding:.8rem .95rem;width:100%;
}
.field textarea{min-height:6.5rem;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--blue);outline:2px solid rgba(0,161,228,.3);outline-offset:0}
.two-up{display:grid;gap:1.1rem;grid-template-columns:1fr 1fr}
@media (max-width:560px){.two-up{grid-template-columns:1fr}}
.checks{display:grid;gap:.6rem}
.check{display:flex;gap:.65rem;align-items:flex-start;font-size:1rem}
.check input{width:1.05rem;height:1.05rem;margin-top:.34rem;accent-color:var(--blue-deep);flex:none}
.hp{position:absolute;left:-9999px}
.form-note{font-family:var(--sans);font-size:.74rem;line-height:1.6;margin:0;opacity:.62}
.form-status{font-family:var(--sans);font-size:.85rem;margin:0;padding:.9rem 1rem;
  border-radius:2px;display:none}
.form-status[data-state="ok"]{display:block;background:var(--tint);border:1px solid var(--blue)}
.form-status[data-state="err"]{display:block;background:#fff;border:1px solid var(--ink)}

/* ---------- Footer ---------- */
.site-foot{position:relative;background:var(--white);color:var(--ink);overflow:hidden;
  padding:clamp(3rem,5vw,4.25rem) 0 2rem;border-top:3px solid var(--frame);
  box-shadow:inset 0 4px 0 -3px var(--white), inset 0 5px 0 -3px var(--frame-line)}
.foot-mark{position:absolute;pointer-events:none;user-select:none;
  width:26rem;right:-7rem;bottom:-9rem;opacity:.09;z-index:0}
.site-foot .wrap{position:relative;z-index:1}
.foot-grid{display:grid;gap:2.25rem;grid-template-columns:minmax(0,1.5fr) repeat(auto-fit,minmax(10rem,1fr))}
.site-foot h4{font-family:var(--sans);font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;margin:0 0 1rem;font-weight:700}
.site-foot a{color:var(--ink)}
.site-foot ul{list-style:none;padding:0;margin:0}
.site-foot li{padding:.28rem 0;font-size:.97rem}
.foot-brand img{width:64px;margin-bottom:1rem}
.foot-brand b{color:var(--blue-mark)}
.foot-brand p{font-size:.96rem;max-width:24rem;opacity:.85}
.foot-seal{width:4.5rem;margin-top:1.5rem;opacity:.9}
.foot-bottom{font-family:var(--sans);font-size:.72rem;line-height:1.7;
  margin-top:2.75rem;padding-top:1.5rem;border-top:1px solid var(--rule-soft);
  display:flex;flex-wrap:wrap;gap:.6rem 1.75rem;justify-content:space-between;opacity:.65}

/* ---------- Print ---------- */
@media print{
  .site-head,.site-foot,.utility,.btn-row,.form,.nav-toggle,.hero-mark,.foot-mark{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .hero::after,.hero::before{display:none}
  .sec--tint,.sec--dark{background:#fff!important}
  .dial{border:2px solid #000;box-shadow:none}
}