/* ==========================================================================
   arttukaitila.com — design tokens
   Values from plan/02-design-system.md — see that doc before changing these.
   ========================================================================== */

:root {
  --bg: #FAF6EE;
  --bg-raised: #F5EFE2;
  --text: #2B2620;
  --text-muted: #6B6355;
  --accent: #8A5A3B;
  --border: #E7DFCC;

  --font-serif: "Lora", Georgia, serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --content-max: 680px;

  --space-page-y: 9rem;
  --space-title-y: 5rem;
  --space-entry-gap: 3rem;
  --space-paragraph: 1.5em;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

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

html {
  color-scheme: light;
  scroll-behavior: smooth;

  /* Always reserve the scrollbar gutter so centered content doesn't
     shift a few pixels between short pages (no scrollbar) and tall
     ones (scrollbar present). */
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1.125rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover,
a:focus-visible {
  text-decoration: underline;
}

img {
  max-width: 100%;
}

/* ==========================================================================
   Layout shell
   ========================================================================== */

.site-header {
  position: relative;
  z-index: 20;
  text-align: center;
  padding: 3rem 1.25rem 0;
}

.site-name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--text);
  margin: 0;
}

a.site-name {
  color: var(--text);
}

.content {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-page-y) 1.25rem;
}

/* Edge fade: a fixed fog bank at the top and bottom of the viewport that
   content scrolls underneath, so text softens into the background as it
   passes the edge of the screen rather than hard-cutting. Fixed to the
   viewport (not the content box) so the effect holds at every scroll
   position, not just the very start/end of the page. */
.fog {
  position: fixed;
  left: 0;
  right: 0;
  height: clamp(96px, 20vh, 260px);
  pointer-events: none;
  z-index: 10;
}

.fog-top {
  top: 0;
  background: radial-gradient(
    ellipse 140% 100% at 50% 0%,
    rgba(250, 246, 238, 1) 0%,
    rgba(250, 246, 238, 0.9) 45%,
    rgba(250, 246, 238, 0) 100%
  );
}

.fog-bottom {
  bottom: 0;
  background: radial-gradient(
    ellipse 140% 100% at 50% 100%,
    rgba(250, 246, 238, 1) 0%,
    rgba(250, 246, 238, 0.9) 45%,
    rgba(250, 246, 238, 0) 100%
  );
}

@media (prefers-reduced-motion: reduce) {
  .fog {
    display: none;
  }
}

.site-footer {
  text-align: center;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.site-footer .copyright {
  margin-top: 0.5rem;
}

.social-links {
  margin-bottom: 0.6rem;
}

.social-link {
  display: inline-block;
  color: var(--text-muted);
  opacity: 0.85;
  line-height: 0;
}

.social-link + .social-link {
  margin-left: 0.75rem;
}

.social-link:hover,
.social-link:focus-visible {
  color: var(--accent);
  opacity: 1;
}

.social-link svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* ==========================================================================
   Home page
   ========================================================================== */

.intro {
  max-width: 40ch;
  margin: 0.75rem auto 0;
  color: var(--text-muted);
  font-size: 0.8125rem;
  line-height: 1.6;
  letter-spacing: 0.01em;
}

.entry-list {
  list-style: none;
  margin: 0 0 10rem;
  padding: 0;
}

.entry-row {
  text-align: left;
  margin-bottom: var(--space-entry-gap);
}

.entry-row:last-child {
  margin-bottom: 0;
}

.entry-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--text);
}

.entry-title:hover,
.entry-title:focus-visible {
  color: var(--accent);
}

.entry-date {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* ==========================================================================
   Entry page
   ========================================================================== */

.back-link {
  display: inline-block;
  font-size: 0.8125rem;
  color: var(--text-muted);
  opacity: 0.85;
  isolation: isolate;
}

.back-link:hover,
.back-link:focus-visible {
  color: var(--accent);
  opacity: 1;
}

.entry-header {
  text-align: center;
  margin: 3rem 0 var(--space-title-y);
  isolation: isolate;
}

.entry-title-page {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 2.25rem;
  margin: 0;
  line-height: 1.25;
  transition: transform 0.12s linear;
  will-change: transform;
}

.entry-header .entry-date {
  margin-top: 1rem;
}

.entry-body {
  text-align: left;
  font-family: var(--font-serif);
  font-weight: 400;
  transition: filter 0.12s linear, transform 0.12s linear;
  will-change: filter, transform;
}

@media (prefers-reduced-motion: reduce) {
  .entry-body,
  .entry-title-page {
    transition: none;
  }
}

.entry-body p {
  margin: 0 0 var(--space-paragraph);
}

.entry-body p:last-child {
  margin-bottom: 0;
}

.entry-body strong {
  font-weight: 600;
}

.entry-body a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.entry-body h2,
.entry-body h3 {
  font-weight: 600;
  line-height: 1.3;
  margin: 2.5rem 0 1rem;
}

.entry-body h2 {
  font-size: 1.5rem;
}

.entry-body h3 {
  font-size: 1.2rem;
}

.entry-body ul,
.entry-body ol {
  margin: 0 0 var(--space-paragraph);
  padding-left: 1.4rem;
}

.entry-body li + li {
  margin-top: 0.4rem;
}

.entry-body li > ul,
.entry-body li > ol {
  margin-top: 0.4rem;
  margin-bottom: 0;
}

.entry-body blockquote {
  margin: 0 0 var(--space-paragraph);
  padding-left: 1.25rem;
  border-left: 2px solid var(--border);
  color: var(--text-muted);
  font-style: italic;
}

.entry-body blockquote p:last-child {
  margin-bottom: 0;
}

.entry-body code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--bg-raised);
  padding: 0.15em 0.4em;
  border-radius: 4px;
}

.entry-body pre {
  margin: 0 0 var(--space-paragraph);
  padding: 1.1rem 1.25rem;
  background: var(--bg-raised);
  border-radius: 6px;
  overflow-x: auto;
}

.entry-body pre code {
  background: none;
  padding: 0;
  font-size: 0.85rem;
  line-height: 1.6;
}

.entry-body hr {
  margin: 3rem auto;
  width: 3rem;
  border: none;
  border-top: 1px solid var(--border);
}

.back-to-top {
  display: inline-block;
  margin-top: 5rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  opacity: 0.85;
}

.back-to-top:hover,
.back-to-top:focus-visible {
  color: var(--accent);
  opacity: 1;
}

.back-to-top + .site-footer {
  margin-top: 6rem;
}

/* ==========================================================================
   404 page
   ========================================================================== */

.not-found {
  text-align: center;
}

.not-found + .site-footer {
  margin-top: 8rem;
}

.page-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 2.25rem;
  margin: 0 0 2rem;
}

/* ==========================================================================
   Scroll-reveal
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   Small screens
   ========================================================================== */

@media (max-width: 480px) {
  :root {
    --space-page-y: 5rem;
    --space-title-y: 3rem;
    --space-entry-gap: 2.25rem;
  }

  .entry-title-page {
    font-size: 1.8rem;
  }
}