/*
 * analog.press — warm, editorial, letterpress aesthetic.
 * Palette: parchment ground, dark ink type, terracotta accent, photographic grain.
 */

@layer theme {
  :root {
    --bg:        oklch(95% 0.018 78);
    --bg2:       oklch(91% 0.022 76);
    --ink:       oklch(22% 0.028 52);
    --ink-muted: oklch(50% 0.020 60);
    --ink-faint: oklch(70% 0.018 70);
    --accent:    oklch(55% 0.15  38);
    --rule:      oklch(82% 0.022 74);
    --code-bg:   oklch(19% 0.025 52);
    --code-fg:   oklch(87% 0.018 72);
    --nav-bg:    oklch(22% 0.028 52);
    --nav-fg:    oklch(95% 0.018 78);
    --serif:     'Lora', Georgia, serif;
    --mono:      'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --bg:        oklch(14% 0.022 55);
      --bg2:       oklch(19% 0.026 54);
      --ink:       oklch(88% 0.015 72);
      --ink-muted: oklch(60% 0.018 65);
      --ink-faint: oklch(42% 0.016 60);
      --accent:    oklch(68% 0.15  38);
      --rule:      oklch(26% 0.024 54);
      --nav-bg:    oklch(18% 0.024 54);
      --nav-fg:    oklch(88% 0.015 72);
    }
  }
}

@layer base {
  html {
    background-color: var(--bg);
    background-image: radial-gradient(ellipse at 50% 50%, transparent 60%, oklch(15% 0.03 55 / 0.16) 100%);
    background-repeat: no-repeat;
    background-position: center center;
    min-height: 100%;
  }

  body {
    font-family: var(--serif);
    background: transparent;
    color: var(--ink);
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    position: relative;
    font-size: 20px;
    line-height: 1.6;

    * { box-sizing: border-box; }
  }

  hr {
    border: none;
    margin: 3rem 0;
    position: relative;
    height: 1px;
    background: linear-gradient(
      to right,
      oklch(from var(--rule) l c h / 0),
      var(--rule) 50%,
      oklch(from var(--rule) l c h / 0)
    );

    &::before {
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%) rotate(45deg);
      width: 7px;
      height: 7px;
      background: var(--accent);
      box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--accent);
    }
  }
}

@layer components {
  .grain {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    pointer-events: none;
    z-index: 9998;
    opacity: 0.1;

    @media (prefers-color-scheme: dark) { opacity: 0.045; }
  }

  .shell { position: relative; z-index: 1; }

  .site-container {
    max-width: 680px;
    margin: 0 auto;
    padding: 0 2rem;

    @media (max-width: 640px) { padding: 0 1.25rem; }
  }
}