/* ============================================================
   base.css — shared across every page (home + all posts)
   ============================================================ */

:root {
  --paper: #F7F3EC;
  --paper-raised: #FBF8F2;
  --ink: #2B2621;
  --body-text: #4A433C;
  --muted: #837A6E;
  --line: #E2DACB;
  --accent: #A45A2A;
  --serif: 'Source Serif 4', Georgia, serif;
  --sans: 'Inter', -apple-system, sans-serif;
  --mono: 'JetBrains Mono', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  position: relative;
  background-color: var(--paper);
  color: var(--body-text);
  font-family: var(--sans);
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; }
a:hover { border-bottom-color: var(--accent); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.wrap {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 auto;
  padding: 0 28px;
}

hr.rule {
  border: none;
  border-top: 1px solid var(--line);
  margin: 48px 0;
}

.section-title {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 20px;
}

.back-link {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-family: var(--mono);
  font-size: 13.5px;
  color: var(--muted);
  border-bottom: none;
}
.back-link:hover {
  color: var(--accent);
  border-bottom: none;
}

@media (max-width: 480px) {
  hr.rule { margin: 40px 0; }
}

/* ============================================================
   Geometric margin contours
   ============================================================ */

html::before,
html::after,
body::before,
body::after {
  content: '';
  position: fixed;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.6;
}

/* Left margin — upper: open circle */
html::before {
  top: 9vh;
  left: -60px;
  width: 190px;
  height: 190px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='47' fill='none' stroke='%23E2DACB' stroke-width='1.1'/></svg>");
}

/* Left margin — lower: hollow triangle (the signature accent) */
body::before {
  bottom: 14vh;
  left: -22px;
  width: 120px;
  height: 120px;
  transform: rotate(-8deg);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><polygon points='50,6 96,90 4,90' fill='none' stroke='%23A45A2A' stroke-width='1.3'/></svg>");
}

/* Right margin — mid: rotated square */
html::after {
  top: 38vh;
  right: -50px;
  width: 150px;
  height: 150px;
  transform: rotate(12deg);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect x='10' y='10' width='80' height='80' fill='none' stroke='%23E2DACB' stroke-width='1.1'/></svg>");
}

/* Right margin — lower: hexagon */
body::after {
  bottom: 6vh;
  right: -40px;
  width: 160px;
  height: 160px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><polygon points='50,3 93,26 93,74 50,97 7,74 7,26' fill='none' stroke='%23E2DACB' stroke-width='1'/></svg>");
}

@media (max-width: 1000px) {
  html::before, html::after, body::before, body::after {
    display: none;
  }
}