/* global.css — base layout, body, skip link */

body {
  background: var(--paper);
  position: relative;
  isolation: isolate;
}

body::before {
  /* subtle paper grain (purely decorative, no impact) */
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(1px 1px at 25% 30%, rgba(26,24,20,0.04) 50%, transparent 51%),
    radial-gradient(1px 1px at 70% 80%, rgba(26,24,20,0.03) 50%, transparent 51%),
    radial-gradient(1px 1px at 50% 60%, rgba(26,24,20,0.02) 50%, transparent 51%);
  background-size: 220px 220px, 300px 300px, 180px 180px;
  z-index: 0;
  mix-blend-mode: multiply;
  opacity: 0.5;
}

main, header, footer { position: relative; z-index: 1; }

.skip-link {
  position: absolute;
  top: -64px;
  left: 12px;
  background: var(--ink);
  color: var(--paper);
  padding: 8px 14px;
  border-radius: var(--r-2);
  z-index: 999;
  font-size: var(--f-small);
  transition: top var(--t-fast) var(--ease-out);
}
.skip-link:focus { top: 12px; }

.container {
  width: 100%;
  max-width: var(--w-page);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.container-narrow {
  width: 100%;
  max-width: var(--w-narrow);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.container-prose {
  width: 100%;
  max-width: var(--w-prose);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--s-10);
  position: relative;
}

@media (max-width: 768px) {
  .section { padding-block: var(--s-8); }
}

.divider {
  height: 1px;
  background: var(--line);
  margin-block: var(--s-7);
}

/* Scrollbar (webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--ink-faint);
  border-radius: 999px;
  border: 2px solid var(--paper);
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-mute); }

/* Osmanthus corner mark (decorative, page-level) */
.osmanthus-mark {
  width: 14px;
  height: 14px;
  display: inline-block;
  vertical-align: -2px;
  color: var(--gold);
}