/* Arcophos — shared styles (Space Mono) */

/* Lora wordmark — pinned to one file + preloaded in the HTML, so it renders
   instantly on every page and never falls back to a different serif. */
@font-face{
  font-family:'Lora';
  font-style:normal;
  font-weight:400;
  font-display:block;
  src:url(https://fonts.gstatic.com/s/lora/v37/0QI6MX1D_JOuGQbT0gvTJPa787weuyJG.ttf) format('truetype');
}

/* Space Mono — pinned + preloaded too, so the nav row and body never reflow
   to a fallback monospace between pages. */
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:block;src:url(https://fonts.gstatic.com/s/spacemono/v17/i7dPIFZifjKcF5UAWdDRUEY.ttf) format('truetype');}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:block;src:url(https://fonts.gstatic.com/s/spacemono/v17/i7dMIFZifjKcF5UAWdDRaPpZYFI.ttf) format('truetype');}
@font-face{font-family:'Space Mono';font-style:italic;font-weight:400;font-display:block;src:url(https://fonts.gstatic.com/s/spacemono/v17/i7dNIFZifjKcF5UAWdDRYER8QA.ttf) format('truetype');}

:root{
  color-scheme: light;          /* never invert in dark mode */
  --bg:#FBFAF7;                 /* warm off-white page */
  --box-bg:#FFFFFF;            /* pure-white form boxes (contrast against page) */
  --ink:#141310;               /* near-black */
  --muted:#56544C;             /* secondary text */
  --nav-off:#6E6C61;           /* inactive nav (gray) — WCAG AA */
  --line:#E6E6E6;              /* neutral hairline */
  --box:#CBCBCB;               /* neutral input border */
  --accent:#3B5C9E;            /* focus / links */
  --mono:'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --brand:'Lora', Georgia, 'Times New Roman', serif;   /* wordmark only */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg);scrollbar-gutter:stable;overflow-y:scroll}
body{
  margin:0;min-height:100vh;background:var(--bg);color:var(--ink);
  font-family:var(--mono);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  text-align:left;
}

::selection{background:#D7E2F4;color:var(--ink)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}

/* left-indented column, sitting higher and wider — never centered */
.page{
  max-width:1020px;
  margin:0;
  padding:78px 24px 80px 144px;   /* shifted right + down for balance; fixed units so nothing shifts between pages */
  min-height:100vh;               /* fill the viewport so the footer can sit at the bottom */
  display:flex;
  flex-direction:column;
}

/* ---------- Logo (top) ---------- */
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink)}
.brand-home, .brand-star{display:inline-flex;align-items:center;color:var(--ink)}
.brand-home:hover, .brand-star:hover{text-decoration:none;color:var(--ink)}
.brand .mark{width:34px;height:34px;display:block;flex:none;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.brand-star:hover .mark{transform:rotate(30deg)}   /* slight spin on hover (matches parakletos.vc) */
.brand .word{font-family:var(--brand);font-weight:400;font-size:35px;letter-spacing:0;text-transform:lowercase}

/* ---------- Nav (stacked, below logo) ---------- */
nav.top{margin-top:30px;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px}
nav.top a, nav.top .current{
  font-size:12px;font-weight:400;text-transform:uppercase;letter-spacing:.16em;line-height:1.1;
}
nav.top a{color:var(--nav-off)}
nav.top a:hover{color:var(--ink);text-decoration:none}
nav.top .current{color:var(--ink);font-weight:700}   /* active page */
nav.top .sep{color:#BDBBB1;font-weight:400;line-height:1.1;user-select:none}   /* gray divider */

/* ---------- Content ---------- */
main{display:block;margin-top:20px;flex:1 0 auto}   /* grow to push the footer switcher to the bottom */
.vision{font-weight:700;font-size:18px;line-height:1.5;letter-spacing:-.01em;margin:0;color:var(--ink);max-width:60ch}
.sub{font-weight:400;font-size:14px;line-height:1.62;color:var(--muted);margin:14px 0 0;max-width:100ch}
.sub em{font-style:italic;color:var(--ink)}
.sub + .sub{margin-top:13px}

/* ---------- Inner pages ---------- */
.ptitle{font-weight:700;font-size:18px;letter-spacing:-.01em;margin:0 0 10px;color:var(--ink)}
.soon{color:var(--muted);font-size:15px;font-style:italic;margin:0}

/* (kept for future research articles) */
.papers{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid var(--line);max-width:60ch}
.papers li{border-bottom:1px solid var(--line);padding:13px 0}
.papers .title{font-weight:700;font-size:14px}
.papers .meta{font-size:12px;color:var(--nav-off)}

/* ---------- Contact form (white boxes) ---------- */
form{margin-top:10px;max-width:540px}
.field{margin-bottom:10px}
.field label{
  display:block;font-size:13px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--muted);margin-bottom:5px;
}
.field input,.field textarea{
  display:block;width:100%;
  font-family:var(--mono);font-size:15px;color:var(--ink);
  background:var(--box-bg);          /* pure-white box, contrasts the off-white page */
  border:1px solid var(--box);border-radius:3px;line-height:1.4;
}
.field input{height:38px;padding:0 13px}                     /* name + email: short, identical */
.field textarea{height:92px;padding:10px 13px;resize:none}   /* message: a touch taller */
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

button[type=submit]{
  font-family:var(--mono);font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;
  color:#FFFFFF;background:var(--ink);border:1px solid var(--ink);border-radius:3px;
  padding:7px 15px;margin-top:4px;cursor:pointer;
  transition:background .18s ease,border-color .18s ease;
}
button[type=submit]:hover{background:var(--accent);border-color:var(--accent)}
button[type=submit]:disabled{opacity:.55;cursor:default}
.form-status{font-size:13px;margin:14px 0 0;min-height:1.1em}
.form-status.ok{color:#2F6D4F}
.form-status.err{color:#9A3B32}

@media (max-width:600px){
  .page{padding-top:40px;padding-left:22px}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}

/* ---------- Language switcher (page footer) ---------- */
nav.langs{
  margin-top:56px;padding-top:20px;border-top:1px solid var(--line);max-width:60ch;
  display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:8px;
}
nav.langs a, nav.langs .cur{
  font-size:11px;font-weight:400;text-transform:uppercase;letter-spacing:.14em;line-height:1.1;
}
/* Hebrew has no glyphs in Space Mono and falls back to a thinner system font;
   nudge its size up and drop the tracking so it sits level with the others. */
nav.langs [lang="he"]{font-size:15px;letter-spacing:0;line-height:1.1}
nav.langs a{color:var(--nav-off)}
nav.langs a:hover{color:var(--ink);text-decoration:none}
nav.langs .cur{color:var(--ink);font-weight:700}                 /* current language */
nav.langs .lsep{color:#BDBBB1;font-weight:400;user-select:none}  /* gray divider */

/* ---------- Right-to-left (Hebrew /hb) ---------- */
[dir="rtl"] body{text-align:right}
[dir="rtl"] .page{padding:78px 144px 80px 24px}
[dir="rtl"] .quote{margin:22px 24px 0 0}
[dir="rtl"] .quote p{padding:2px 22px 2px 0}
[dir="rtl"] .quote p::before{left:auto;right:0}
[dir="rtl"] .quote cite{padding-left:0;padding-right:22px}
@media (max-width:600px){
  [dir="rtl"] .page{padding-top:40px;padding-left:22px;padding-right:22px}
}

/* Belloc edition — embedded epigraph */
.quote{margin:22px 0 0 24px;max-width:88ch}
.quote p{position:relative;margin:0;max-width:78ch;padding:2px 0 2px 22px;font-style:italic;font-size:14px;line-height:1.78;color:var(--ink)}
.quote p::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:#A29F94;clip-path:polygon(50% 0,100% 8px,100% calc(100% - 8px),50% 100%,0 calc(100% - 8px),0 8px)}
.quote cite{display:block;margin-top:14px;padding-left:22px;font-style:normal;font-size:13px;color:var(--muted)}
.quote cite em{font-style:italic}
.quote cite a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.quote cite a:hover{color:var(--ink)}