/* Lev website: home page, Contact us and Privacy Policy. Light theme only, no scripts, nothing loaded from other sites.
   Sizes are written for a phone first; the (min-width: 700px) block at the end adjusts them for a computer. */

@font-face {
  font-family: "Instrument Serif";
  src: url("/fonts/InstrumentSerif-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --ink: #191316;
  --body: #2e2629;
  --nav: #4a4145;
  --subtle: #6e6367;
  --hair: #e8e1de;
  --action: #1b47c4;
  --action-hover: #163aa0;
  --tint: #e9eefb;
  --heart: #d8434f;
  --ring: #c9d3f3;
  --ring-soft: #dce2f5;
  --ring-outer: #dde3f4;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font: 17px/1.65 var(--sans);
}
a { color: var(--action); }
a:hover { color: var(--action-hover); }
a:focus-visible { outline: 2px solid var(--action); outline-offset: 3px; border-radius: 2px; }

.page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }

/* Top bar */
.site-header { border-bottom: 1px solid var(--hair); }
.bar {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 20px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.logo:hover { color: var(--ink); }
.logo img { display: block; height: 1em; width: auto; }
.site-nav { display: flex; gap: 20px; font-size: 15px; }
.site-nav a { color: var(--nav); text-decoration: none; padding: 6px 0; }
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom: 2px solid var(--action); }

/* Reading column */
.content {
  flex: 1 0 auto;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 20px 72px;
}
.title {
  margin: 0 0 12px;
  font: 400 clamp(40px, 11.3vw, 60px) / 1.05 var(--serif);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.content .meta { margin: 0 0 28px; font-size: 14px; color: var(--subtle); }
.content h2 {
  margin: 44px 0 12px;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.005em;
  scroll-margin-top: 24px;
  text-wrap: balance;
}
.content h3 { margin: 26px 0 8px; font-size: 17px; line-height: 1.4; font-weight: 600; }
.content p { margin: 0 0 16px; color: var(--body); }
.content ul { margin: 0 0 16px; padding-left: 20px; color: var(--body); }
.content li { margin: 0 0 10px; }
.content li::marker { color: var(--heart); }

/* "On this page" list */
.toc { padding: 20px 0 12px; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.content .toc-label {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--subtle);
}
.content .toc ul { margin: 0; padding: 0; list-style: none; font-size: 16px; line-height: 1.4; }
.content .toc li { margin: 0 0 4px; }
.toc a { display: block; padding: 7px 0; text-decoration: none; }
.toc a:hover { text-decoration: underline; }

/* Contact us */
.content .lede { margin: 0 0 32px; font-size: 19px; line-height: 1.55; }
.mail {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  padding: 16px 20px;
  background: var(--tint);
  border-radius: 12px;
  font-size: clamp(18px, 5.6vw, 22px);
  font-weight: 600;
  line-height: 1.3;
  color: var(--action);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.mail:hover { color: var(--action-hover); }
.mail svg { flex: none; width: 24px; height: 24px; display: block; }

/* Footer */
.site-footer { border-top: 1px solid var(--hair); }
.foot { max-width: 1040px; margin: 0 auto; padding: 24px 20px 36px; display: flex; gap: 24px; font-size: 15px; }
.foot a { color: var(--subtle); text-decoration: none; }
.foot a:hover { color: var(--ink); text-decoration: underline; }

/* Home page */
.stage {
  position: relative;
  overflow: hidden;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 20px 112px;
  text-align: center;
}
.ring {
  position: absolute;
  left: 50%;
  top: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.ring-1 { width: min(380px, 56vw); border: 1px solid var(--ring); }
.ring-2 { width: min(580px, 74.4vw); border: 1px dashed var(--ring-soft); }
.ring-3 { width: min(800px, 89.7vw); border: 1px dashed var(--ring-outer); }
.hero { position: relative; display: flex; flex-direction: column; align-items: center; gap: clamp(22px, 5vw, 28px); }
.wordmark {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.22em;
  font-size: clamp(46px, 13.3vw, 64px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.wordmark img { display: block; height: 0.875em; width: auto; }
.coming {
  margin: 0;
  font: 400 clamp(40px, 13.3vw, 76px) / 1.05 var(--serif);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.home-links {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 36px;
  display: flex;
  justify-content: center;
  gap: 24px;
  font-size: 15px;
}
.home-links a { color: var(--nav); text-decoration: none; }
.home-links a:hover { color: var(--ink); text-decoration: underline; }

/* Larger screens */
@media (min-width: 700px) {
  body { font-size: 18px; line-height: 1.7; }
  .bar { padding: 0 32px; height: 72px; }
  .logo { font-size: 24px; gap: 9px; }
  .site-nav { gap: 28px; font-size: 16px; }
  .content { padding: 72px 32px 96px; }
  .title { margin-bottom: 14px; }
  .content .meta { margin-bottom: 40px; font-size: 15px; }
  .content h2 { margin: 56px 0 14px; font-size: 25px; }
  .content h3 { margin: 30px 0 10px; font-size: 18px; }
  .content p { margin-bottom: 18px; }
  .content ul { margin-bottom: 18px; padding-left: 22px; }
  .toc { padding: 24px 0 18px; }
  .content .toc ul { column-count: 2; column-gap: 32px; }
  .content .toc li { margin: 0 0 9px; break-inside: avoid; }
  .toc a { padding: 0; }
  .content .lede { font-size: 21px; margin-bottom: 36px; }
  .mail { padding: 16px 22px; }
  .foot { padding: 28px 32px 40px; gap: 28px; }
  .home-links { gap: 28px; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}