/* ============================================================
   SITE.CSS — jannikschilling.com
   EB Garamond + Inter. Warm literary minimalism.
   ============================================================ */

:root {
  --bg: #FAFAF8;
  --text: #1A1A18;
  --text-sec: #6B6B63;
  --accent: #8B7355;
  --border: #E8E6E1;
  --serif: 'EB Garamond', 'Georgia', serif;
  --sans: 'Inter', -apple-system, sans-serif;
  --content-width: 600px;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 18px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { background: var(--bg); color: var(--text); font-family: var(--serif); line-height: 1.78; margin: 0; padding: 0; min-height: 100vh; }
::selection { background: var(--accent); color: #fff; }

/* --- TYPOGRAPHY --- */
h1, h2, h3, h4, h5, h6 { font-family: var(--serif); color: var(--text); font-weight: 400; line-height: 1.25; margin: 0; }
h1 { font-size: 1.7rem; margin-bottom: 0.2rem; }
h2 { font-size: 1.3rem; font-weight: 500; margin: 2.2rem 0 0.6rem 0; }
h3 { font-size: 1.08rem; font-weight: 500; margin: 1.8rem 0 0.5rem 0; }
p { font-family: var(--serif); font-size: 1.05rem; line-height: 1.82; color: var(--text); margin: 0 0 1.55rem 0; }

/* --- LINKS --- */
a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border); transition: border-color 0.2s ease, color 0.2s ease; }
a:hover { color: var(--accent); border-color: var(--accent); }

/* --- LISTS --- */
ul, ol { margin: 0 0 1.2em 0; padding: 0 0 0 1.4em; }
ol { list-style-type: decimal; }
li { font-family: var(--serif); font-size: 1rem; line-height: 1.72; color: var(--text); margin-bottom: 0.3em; }

/* --- BLOCKQUOTES --- */
blockquote { font-style: italic; color: var(--text-sec); border-left: 2px solid var(--border); margin: 1.8rem 0; padding: 0.8rem 1.3rem; background: none; font-size: 1.02rem; }

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

/* --- LAYOUT --- */
.content-box { max-width: var(--content-width); margin: 0 auto; padding: 0 24px; }

/* --- FOOTER --- */
footer { padding-bottom: 40px; }
footer p { font-family: var(--serif); font-size: 0.8rem; font-style: italic; font-weight: 400; color: #a09a90; margin-bottom: 0; }

/* --- SITE NAV (small, serif, italic, subtle) --- */
.site-nav {
  font-family: var(--serif);
  font-size: 0.85rem;
  font-weight: 400;
  font-style: italic;
  color: #a09a90;
  letter-spacing: 0.01em;
  margin-bottom: 3rem;
  line-height: 1.8;
}
.site-nav a { color: #a09a90; border-bottom-color: transparent; }
.site-nav a:hover { color: var(--text-sec); border-bottom-color: var(--text-sec); }
.site-nav .nav-dot { margin: 0 6px; color: #ccc8c0; }

/* --- SMALL LINKS ROW (bottom of homepage) --- */
.links {
  font-family: var(--serif);
  font-size: 0.85rem;
  font-weight: 400;
  font-style: italic;
  color: #a09a90;
  letter-spacing: 0.01em;
}
.links a { color: #a09a90; border-bottom-color: transparent; }
.links a:hover { color: var(--text-sec); border-bottom-color: var(--text-sec); }
.links .link-dot { margin: 0 6px; color: #ccc8c0; }

/* --- HR SEPARATOR (thin line) --- */
.divider {
  width: 28px;
  height: 1px;
  background: var(--border);
  margin: 40px 0;
  border: none;
}


/* ============================================================
   HOMEPAGE (layout: default4)
   Name centered on first screen, content below on scroll.
   ============================================================ */

.homepage-hero {
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.homepage-name {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 400;
  color: var(--text);
  letter-spacing: 0.01em;
}

.homepage-content {
  padding-top: 0;
  padding-bottom: 120px;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}


/* ============================================================
   PAGES (layout: page — bookshelf, writing)
   ============================================================ */

.page-layout main { padding-top: 60px; padding-bottom: 80px; }
.page-layout h1 { font-size: 1.7rem; font-weight: 400; margin-bottom: 0.3rem; }
.page-layout .page-description { font-style: italic; color: var(--text-sec); font-size: 0.98rem; margin-bottom: 2rem; }
.page-layout h2 { font-size: 1.15rem; font-weight: 500; margin-top: 2.5rem; margin-bottom: 0.5rem; }
.page-layout h3 { font-size: 1.02rem; font-weight: 500; margin-top: 1.8rem; margin-bottom: 0.4rem; }
.page-layout p { font-size: 1rem; line-height: 1.75; margin-bottom: 1rem; }
.page-layout li { font-size: 0.97rem; line-height: 1.65; }

/* Writing index */
.post-container { display: flex; align-items: baseline; gap: 1em; margin-bottom: 0.55em; padding-bottom: 0.55em; border-bottom: 1px solid var(--border); }
.post-date { font-family: var(--serif); font-size: 0.85rem; font-weight: 400; font-style: italic; color: #a09a90; white-space: nowrap; min-width: 72px; letter-spacing: 0.01em; text-transform: none; }
.post-title { margin: 0; font-size: 1rem; font-weight: 400; display: inline; line-height: 1.3; color: var(--text); }
.post-title a { color: var(--text); border-bottom: 1px solid var(--border); }
.post-title a:hover { color: var(--accent); border-bottom-color: var(--accent); }


/* ============================================================
   POSTS (layout: post)
   ============================================================ */

.post-layout main { padding-top: 20px; padding-bottom: 80px; }
.post-layout .site-header { padding-top: 60px; margin-bottom: 0; }
.post-layout .site-title { font-family: var(--serif); font-size: 1rem; font-weight: 400; color: var(--text-sec); margin: 0; }
.post-layout .site-title a { color: var(--text-sec); border-bottom: none; }
.post-layout .site-title a:hover { color: var(--text); }
.post-layout .post-title-block { margin-top: 3rem; margin-bottom: 0.5rem; }
.post-layout .post-title { font-family: var(--serif); font-size: 1.65rem; font-weight: 400; color: var(--text); line-height: 1.3; margin: 0 0 0.15em 0; display: block; border-bottom: none; }
.post-layout .date-tag { font-family: var(--serif); font-size: 0.85rem; font-weight: 400; font-style: italic; color: #a09a90; letter-spacing: 0.01em; text-transform: none; display: block; margin-top: 0.3rem; }
.post-layout .post-content { font-size: 1.05rem; line-height: 1.82; color: var(--text); text-align: justify; max-width: var(--content-width); margin: 2rem 0 2.5rem 0; }
.post-layout .post-content p { font-size: 1.05rem; margin-bottom: 1.55rem; text-align: justify; }
.post-layout .post-content blockquote { font-style: italic; color: var(--text-sec); border-left: 2px solid var(--border); margin: 2rem 0; padding: 0.8rem 1.3rem; background: none; font-size: 1rem; }
.post-layout .post-note { border-left: 2px solid var(--border); padding: 0.7rem 1.1rem; margin: 1.3rem 0 1.8rem 0; color: var(--text-sec); font-size: 0.95rem; }
.post-layout .back-link { display: inline-block; margin-top: 2.5rem; font-size: 0.88rem; color: var(--text-sec); border-bottom: 1px solid transparent; }
.post-layout .back-link:hover { color: var(--text); border-bottom-color: var(--text); }


/* ============================================================
   PAGE-TEMPLATE (layout: page-template — research, physics)
   ============================================================ */

.page-template-layout main { padding-top: 20px; padding-bottom: 80px; }
.page-template-layout .site-header { padding-top: 60px; margin-bottom: 0; }
.page-template-layout .site-title { font-family: var(--serif); font-size: 1rem; font-weight: 400; color: var(--text-sec); margin: 0; }
.page-template-layout .site-title a { color: var(--text-sec); border-bottom: none; }
.page-template-layout .site-title a:hover { color: var(--text); }
.page-template-layout .page-title { font-family: var(--serif); font-size: 1.65rem; font-weight: 400; color: var(--text); margin: 2.5rem 0 0.3rem 0; }
.page-template-layout .page-content { font-size: 1.05rem; line-height: 1.82; color: var(--text); max-width: var(--content-width); margin: 1.5rem 0 0 0; }
.page-template-layout .page-content p { font-size: 1.05rem; margin-bottom: 1.55rem; }
.page-template-layout .page-content li { font-size: 1rem; }


/* ============================================================
   PORTFOLIO TABLE
   ============================================================ */

.portfolio-table { width: 100%; border-collapse: collapse; margin: 2rem 0 1.5rem 0; font-size: 1rem; }
.portfolio-table th, .portfolio-table td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--border); font-weight: 400; }
.portfolio-table th { text-align: left; font-size: 0.95rem; font-weight: 500; border-bottom: 2px solid var(--border); }
.portfolio-table td:last-child { text-align: right; }


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 600px) {
  html { font-size: 16px; }
  .homepage-hero { min-height: 85vh; }
  .homepage-name { font-size: 1.6rem; }
  .homepage-content { padding-bottom: 80px; }
  .page-layout main { padding-top: 40px; }
  .post-layout .site-header, .page-template-layout .site-header { padding-top: 40px; }
  .post-layout .post-title, .page-template-layout .page-title { font-size: 1.4rem; }
  .post-container { flex-direction: column; align-items: flex-start; gap: 0.15em; }
  .post-date { min-width: auto; }
  .site-nav { margin-bottom: 2rem; }
}