/* ————————————————————————————————————————————————————————
   Parakletos · parakletos.vc
   LIQUID GLASS THEME
   Every surface is layered glass: translucent gradient fills
   over a tinted atmosphere, backdrop blur + saturation for
   refraction, inset speculars for edge light, soft diffuse
   shadows for depth, and a light sweep that glides across
   interactive panes on hover. Fonts self-hosted + preloaded.
———————————————————————————————————————————————————————— */

/* ---------- Fonts (pinned, self-hosted) ---------- */

@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("assets/fonts/space-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url("assets/fonts/space-mono-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: 'Space Mono';
  font-style: italic;
  font-weight: 400;
  font-display: block;
  src: url("assets/fonts/space-mono-latin-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("assets/fonts/lora-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 500;
  font-display: block;
  src: url("assets/fonts/lora-latin-500-italic.woff2") format("woff2");
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: block;
  src: url("assets/fonts/eb-garamond-greek-400-italic.woff2") format("woff2");
  unicode-range: U+0370-03FF, U+1F00-1FFF;
}

/* ---------- Liquid glass tokens ----------
   Palette twist for Parakletos: sky (the dove's air), candle
   gold (warmth), sage (olive), and a faint violet (spirit).
   Text stays solid ink for contrast on translucent panes. */

:root {
  color-scheme: light;

  /* base + text */
  --bg: #F8F8F5;
  --ink: #16140F;
  --muted: #55534B;
  --soft: #6F6B64;
  --line: rgba(22, 20, 15, .08);
  --accent: #3B5C9E;

  /* atmosphere tints (what the glass refracts) */
  --tint-sky:    #D9E6F4;
  --tint-gold:   #F4E7CF;
  --tint-sage:   #DFEDE2;
  --tint-violet: #E9E2F6;

  /* glass surfaces */
  --lg-fill:        linear-gradient(135deg, rgba(255,255,255,.62), rgba(255,255,255,.30));
  --lg-fill-quiet:  linear-gradient(135deg, rgba(255,255,255,.46), rgba(255,255,255,.22));
  --lg-fill-strong: rgba(255, 255, 255, .82);
  --lg-blur: 24px;
  --lg-sat: 1.7;
  --lg-edge: rgba(22, 20, 15, .07);                  /* outer hairline */
  --lg-specular: inset 0 1px 0 rgba(255,255,255,.85), inset 0 0 0 1px rgba(255,255,255,.28);
  --lg-shadow: 0 2px 6px rgba(22,20,15,.05), 0 18px 44px rgba(22,20,15,.09);
  --lg-shadow-lift: 0 3px 8px rgba(22,20,15,.06), 0 26px 56px rgba(22,20,15,.12);
  --radius: 16px;

  --mono: 'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --brand: 'Lora', Georgia, 'Times New Roman', serif;
  --greek: 'EB Garamond', 'Lora', Georgia, serif;
  --rail: 300px;
}

/* ---------- Base ---------- */

/* cross-document view transitions: page switches crossfade
   instead of flashing (progressive enhancement; ignored by
   browsers that don't support it) */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

* { box-sizing: border-box; }

html {
  background: var(--bg);
  overflow-y: scroll;                /* scrollbar always reserved: zero shift between pages */
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* atmosphere: tinted pools of light with one glassy shaft across */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  transform: translateZ(0);          /* pinned compositor layer: no scroll repaints */
  background:
    linear-gradient(115deg, rgba(255,255,255,0) 42%, rgba(255,255,255,.32) 50%, rgba(255,255,255,0) 58%),
    radial-gradient(900px 620px at 86% -8%,  var(--tint-sky)    0%, rgba(217,230,244,0) 62%),
    radial-gradient(760px 560px at -8% 24%,  var(--tint-gold)   0%, rgba(244,231,207,0) 58%),
    radial-gradient(700px 520px at 96% 68%,  var(--tint-violet) 0%, rgba(233,226,246,0) 55%),
    radial-gradient(820px 600px at 58% 114%, var(--tint-sage)   0%, rgba(223,237,226,0) 60%),
    var(--bg);
}

::selection { background: #D6E2F3; color: var(--ink); }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

:focus-visible { outline: 2px solid rgba(59, 92, 158, .55); outline-offset: 2px; }

h1, h2, h3, p, figure { margin: 0; }

/* ---------- Sidebar: full-height glass pane ---------- */

.sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--rail);
  padding: 64px 36px 48px 48px;
  background: linear-gradient(180deg, rgba(255,255,255,.52), rgba(255,255,255,.28));
  -webkit-backdrop-filter: blur(26px) saturate(1.5);
  backdrop-filter: blur(26px) saturate(1.5);
  border-right: 1px solid rgba(255, 255, 255, .55);
  box-shadow: 1px 0 0 var(--lg-edge), 14px 0 44px rgba(22, 20, 15, .04);
  transform: translateZ(0);          /* own compositor layer: steady while scrolling */
}

.brand { display: inline-flex; align-items: center; gap: 8px; }

.brand-home, .brand-star { color: var(--ink); display: block; }
.brand-home:hover, .brand-star:hover { text-decoration: none; color: var(--ink); }

.brand .word {
  display: block;
  font-family: var(--brand);
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0;
  text-transform: lowercase;
}

.brand .mark {
  width: 27px;
  height: auto;
  display: block;
  flex: none;
  position: relative;
  top: 2px;
  color: var(--ink);
  transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}

.brand-star:hover .mark { transform: rotate(30deg); }

/* nav: floating glass pills, three rows */
.nav { margin-top: 56px; display: flex; flex-direction: column; gap: 6px; }

.nav a {
  display: block;
  padding: 12px 14px;
  margin-left: -14px;
  border-radius: 12px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .16em;
  line-height: 1.1;
  color: var(--soft);
  transition: color .18s ease, background .22s ease, box-shadow .22s ease;
}

.nav a:hover {
  color: var(--ink);
  text-decoration: none;
  background: rgba(255, 255, 255, .5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 4px 12px rgba(22,20,15,.05);
}

.nav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 700;
  background: var(--lg-fill);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), inset 0 1px 0 rgba(255,255,255,.85), 0 6px 16px rgba(22,20,15,.06);
}

/* ---------- Page column ---------- */

main { margin-left: var(--rail); }

.page { max-width: 1080px; padding: 32px 64px 40px 48px; }
.page--low { padding-top: 52px; padding-bottom: 52px; }

h1 {
  font-family: var(--brand);
  font-style: italic;
  font-size: 34px;
  font-weight: 500;
  letter-spacing: .005em;
  line-height: 1.25;
}

.lede { margin-top: 12px; font-size: 15px; line-height: 1.55; color: var(--ink); }
.sub  { margin-top: 8px;  font-size: 14px; line-height: 1.55; color: var(--muted); }

.sub em, section p em { font-style: italic; color: var(--ink); }
.gk { font-family: var(--greek); font-style: italic; font-size: 1.12em; }

/* ---------- Sections ---------- */

section { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); }
.page > section:first-child { margin-top: 0; padding-top: 0; border-top: none; }

section h2 {
  font-family: var(--brand);
  font-style: italic;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--ink);
}

section p { margin-top: 11px; font-size: 14px; line-height: 1.55; color: var(--muted); }
section p:first-of-type { margin-top: 12px; }
section p strong { font-weight: 700; color: var(--ink); }

/* ---------- About me ---------- */

.gp { margin-top: 18px; display: flex; gap: 32px; align-items: center; }

/* no backdrop-filter here: blurring the backdrop behind a scrolling
   photo forces per-frame re-rasterization (the headshot shake).
   A solid translucent fill looks the same and is rock steady. */
.portrait {
  position: relative;
  width: 212px;
  flex: none;
  padding: 9px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--lg-edge);
  border-radius: var(--radius);
  box-shadow: var(--lg-specular), var(--lg-shadow);
  overflow: hidden;
  transform: translateZ(0);
}

.portrait img,
.portrait-img,
.portrait-ph {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 9px;
  display: block;
  background: #fff;
}

.portrait img { object-fit: cover; }

.portrait-ph { display: flex; align-items: center; justify-content: center; }
.portrait-ph svg { width: 38%; height: auto; color: var(--ink); opacity: .07; }

.gp-bio { padding-top: 2px; }
.gp-bio h3 {
  font-family: var(--brand);
  font-style: italic;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: .005em;
}
.gp-bio .role {
  margin-top: 4px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--soft);
}
.gp-bio p { margin-top: 11px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.gp-bio p:first-of-type { margin-top: 14px; }

/* ---------- Epigraph: a sliver of glass ---------- */

.quote {
  position: relative;
  margin: 40px 0 0;
  display: inline-block;
  padding: 18px 24px 16px;
  background: var(--lg-fill-quiet);
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat));
  border: 1px solid var(--lg-edge);
  border-radius: 14px;
  box-shadow: var(--lg-specular), var(--lg-shadow);
  overflow: hidden;
  transform: translateZ(0);
}

.quote::after {
  content: "";
  position: absolute;
  top: -60%; left: -20%;
  width: 55%; height: 140%;
  transform: rotate(16deg);
  background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.38) 45%, rgba(255,255,255,0) 70%);
  opacity: .3;
  pointer-events: none;
}

.quote p {
  position: relative;
  padding: 1px 0 1px 20px;
  font-style: italic;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
}

.quote p::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: #A9A496;
  clip-path: polygon(50% 0, 100% 7px, 100% calc(100% - 7px), 50% 100%, 0 calc(100% - 7px), 0 7px);
}

.quote cite {
  display: block;
  margin-top: 8px;
  padding-left: 20px;
  font-style: normal;
  font-size: 11.5px;
  color: var(--soft);
}

/* ---------- Portfolio: simple linked list ---------- */

.plist {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.plist li {
  position: relative;
  padding: 9px 0 9px 24px;
  font-size: 15px;
  line-height: 1.5;
}

.plist li::before {
  content: "-";
  position: absolute;
  left: 2px;
  color: var(--soft);
}

.plist a {
  color: var(--ink);
  font-weight: 700;
}

.plist a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.plist .stage {
  margin-left: 12px;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--soft);
}

/* glass fallback for browsers without backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sidebar { background: rgba(255, 255, 255, .92); }
  .quote { background: rgba(255, 255, 255, .92); }
  .nav a:hover, .nav a[aria-current="page"] { background: rgba(255, 255, 255, .95); }
}

/* ---------- Reach out ---------- */

.email {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(59, 92, 158, .4);
}

.email:hover { text-decoration-color: var(--accent); }

/* ---------- 404 ---------- */

.lost { padding-top: 14vh; }
.lost .mark-sm { width: 34px; height: auto; color: var(--soft); display: block; margin-bottom: 24px; }
.lost p { margin-top: 12px; font-size: 14px; color: var(--muted); }

/* ---------- Mobile ---------- */

@media (max-width: 880px) {
  .sidebar {
    position: static;
    width: auto;
    padding: 44px 24px 20px;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, .55);
    box-shadow: 0 1px 0 var(--lg-edge), 0 14px 44px rgba(22, 20, 15, .04);
  }
  .brand .mark { width: 23px; }
  .brand .word { font-size: 26px; }
  .nav { margin-top: 24px; flex-direction: row; gap: 6px; }
  .nav a { margin-left: 0; padding: 11px 14px; }
  main { margin-left: 0; }
  .page { padding: 26px 24px 26px; }
  h1 { font-size: 27px; }
  .gp { flex-direction: column; align-items: flex-start; gap: 24px; }
  .portrait { width: 200px; }
}

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

/* ————————————————————————————————————————————————————————
   Translations (auto-generated /ch /gr /lt /hb /tr /es /de /ar)
   The self-hosted woff2 fonts are Latin-only; for non-Latin
   scripts we hand the body and headings a system stack that has
   the glyphs, so nothing falls back to an ugly default. The
   "parakletos" wordmark stays Lora/Latin everywhere — it is the
   logo, not translated copy.
———————————————————————————————————————————————————————— */

/* CJK */
html[lang^="zh"] body {
  font-family: 'Space Mono', "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", ui-monospace, monospace;
}
html[lang^="zh"] h1,
html[lang^="zh"] section h2,
html[lang^="zh"] .gp-bio h3 {
  font-family: "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", var(--brand);
}

/* Hebrew */
html[lang="he"] body {
  font-family: 'Space Mono', "SF Hebrew", "Arial Hebrew", "Noto Sans Hebrew", ui-monospace, monospace;
}
html[lang="he"] h1,
html[lang="he"] section h2,
html[lang="he"] .gp-bio h3 {
  font-family: "Frank Ruehl CLM", "Noto Serif Hebrew", Georgia, serif;
}

/* Arabic */
html[lang="ar"] body {
  font-family: 'Space Mono', "SF Arabic", "Geeza Pro", "Noto Sans Arabic", ui-monospace, monospace;
}
html[lang="ar"] h1,
html[lang="ar"] section h2,
html[lang="ar"] .gp-bio h3 {
  font-family: "Noto Naskh Arabic", "Amiri", "Times New Roman", serif;
}

/* ---------- Right-to-left (Arabic, Hebrew): mirror the chrome ---------- */

[dir="rtl"] .sidebar {
  left: auto;
  right: 0;
  padding: 64px 48px 48px 36px;
  border-right: none;
  border-left: 1px solid rgba(255, 255, 255, .55);
  box-shadow: -1px 0 0 var(--lg-edge), -14px 0 44px rgba(22, 20, 15, .04);
}

[dir="rtl"] main { margin-left: 0; margin-right: var(--rail); }
[dir="rtl"] .page { padding: 32px 48px 40px 64px; }
[dir="rtl"] .page--low { padding-top: 52px; padding-bottom: 52px; }

[dir="rtl"] .nav a { margin-left: 0; margin-right: -14px; }

[dir="rtl"] .plist li { padding: 9px 24px 9px 0; }
[dir="rtl"] .plist li::before { left: auto; right: 2px; }
[dir="rtl"] .plist .stage { margin-left: 0; margin-right: 12px; }

[dir="rtl"] .quote p { padding: 1px 20px 1px 0; }
[dir="rtl"] .quote p::before { left: auto; right: 0; }
[dir="rtl"] .quote::after { left: auto; right: -20%; transform: rotate(-16deg); }

@media (max-width: 880px) {
  [dir="rtl"] .sidebar {
    padding: 44px 24px 20px;
    border-left: none;
    border-bottom: 1px solid rgba(255, 255, 255, .55);
    box-shadow: 0 1px 0 var(--lg-edge), 0 14px 44px rgba(22, 20, 15, .04);
  }
  [dir="rtl"] main { margin-right: 0; }
  [dir="rtl"] .page { padding: 26px 24px 26px; }
  [dir="rtl"] .nav a { margin-right: 0; }
}