/* ---- David Libre, self-hosted. Ismar David's Hebrew face, which also
   carries the Latin, so the mark and the verse are one family. ---- */
@font-face{
  font-family:"David Libre"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/davidlibre-latin-400.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2212;
}
@font-face{
  font-family:"David Libre"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/davidlibre-hebrew-400.woff2") format("woff2");
  unicode-range:U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;
}
@font-face{
  font-family:"David Libre"; font-style:normal; font-weight:500; font-display:swap;
  src:url("fonts/davidlibre-latin-500.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2212;
}
@font-face{
  font-family:"David Libre"; font-style:normal; font-weight:500; font-display:swap;
  src:url("fonts/davidlibre-hebrew-500.woff2") format("woff2");
  unicode-range:U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;
}

:root{
  --ground:#F6F3EC;
  --ink:#1E1B16;
  --soft:#6E685C;
  --accent:#4F5A46;
  --accent-on:#F6F3EC;
  --rule:#DBD4C6;
}

/* Someone may well be opening this late at night. */
@media (prefers-color-scheme:dark){
  :root{
    --ground:#16140F;
    --ink:#EBE6DB;
    --soft:#918975;
    --accent:#9CAA8B;
    --accent-on:#16140F;
    --rule:#2C281F;
  }
}

*,*::before,*::after{box-sizing:border-box}

/* An author display rule outranks the browser's own [hidden] rule, so
   .give would stay on screen after being hidden. This settles it. */
[hidden]{display:none !important}

html{-webkit-text-size-adjust:100%}

body{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:clamp(2rem,7vh,4.5rem) 1.5rem clamp(1.75rem,5vh,2.75rem);
  background:var(--ground);
  color:var(--ink);
  font-family:"David Libre",Palatino,Georgia,serif;
  font-weight:400;
  font-size:1rem;
  line-height:1.75;
  text-align:center;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

main{
  flex:1 1 auto;
  width:100%;
  max-width:34rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

/* ---- the lockup ---- */

.mark{width:100%}

/* text-indent cancels the trailing letter-space, so wide tracking
   stays optically centred instead of sitting left of centre. */
.knf{
  font-weight:500;
  font-size:clamp(3rem,14vw,5.5rem);
  letter-spacing:.36em;
  text-indent:.36em;
  line-height:1;
  margin:0;
}

.verse{
  font-size:clamp(1.1rem,3.7vw,1.45rem);
  line-height:1.55;
  margin:clamp(1.3rem,4vh,2.2rem) 0 0;
}

/* The fund's own two words carry full ink; the rest of the clause
   is held back, so the name emerges out of the verse. */
.verse .held{color:var(--soft)}
.verse .name{color:var(--ink)}

.romanised{
  font-size:.72rem;
  letter-spacing:.4em;
  text-indent:.4em;
  text-transform:uppercase;
  color:var(--soft);
  margin:clamp(1.5rem,4vh,2.3rem) 0 0;
}

/* ---- the one thing you can do ---- */

.act{margin-top:clamp(3.25rem,13vh,6.5rem)}

.give{
  display:inline-block;
  appearance:none;
  -webkit-appearance:none;
  padding:.95rem 3.25rem;
  border:1px solid var(--accent);
  color:var(--accent);
  background:transparent;
  font:inherit;
  font-size:.78rem;
  letter-spacing:.3em;
  text-indent:.3em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .3s ease,color .3s ease;
}

.give:hover,.give:focus-visible{background:var(--accent);color:var(--accent-on)}

.give:disabled{cursor:default;opacity:.55}
.give:disabled:hover{background:transparent;color:var(--accent)}

.give-note{font-size:.78rem;color:var(--soft);margin:1.15rem 0 0}

/* Cardknox's own form, living in the page. Nobody is sent anywhere. */
.pay{width:100%;margin-top:.5rem}
.pay:focus{outline:none}

.pay iframe{
  display:block;
  width:100%;
  height:min(78vh,640px);
  border:1px solid var(--rule);
  background:#fff;
}

/* ---- the signature ---- */

footer{
  font-size:.72rem;
  line-height:1.9;
  color:var(--soft);
  padding-top:2rem;
}

footer p{margin:0}

footer a{color:inherit;text-decoration:none;border-bottom:1px solid var(--rule)}
footer a:hover,footer a:focus-visible{color:var(--ink)}

/* ---- one slow arrival, then nothing ---- */

@keyframes settle{
  from{opacity:0;transform:translateY(.5rem)}
  to{opacity:1;transform:none}
}

.mark,.act,footer{animation:settle .9s cubic-bezier(.2,.6,.2,1) both}
.mark{animation-delay:.05s}
.act{animation-delay:.4s}
footer{animation-delay:.7s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}