/* Shared broadsheet shell. The reference layout is editorial first: every
   page is a paper sheet, and the sidebar is its margin/index. */
html,
body {
  background: var(--paper);
  color: var(--ink);
}

body {
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: calc(var(--fs-base) * var(--fs-scale));
  line-height: 1.55;
  background-image:
    var(--paper-edge-wear), var(--paper-stains), var(--paper-texture-image), var(--paper-grain);
  background-size:
    100% 100%,
    100% 100%,
    100% 100%,
    320px 320px;
  background-repeat: no-repeat, no-repeat, repeat, repeat;
  background-attachment: fixed, fixed, fixed, fixed;
}

main {
  flex: 1;
  width: min(100% - 2rem, var(--max-w));
  margin: 0 auto;
  padding: 2.5rem 0 4rem;
}

@media (min-width: 1024px) {
  main {
    width: min(calc(100% - var(--sidebar-w) - 4rem), var(--max-w));
    /* Fluid centering: when viewport is wide, main centers in the
       remaining space rather than hugging left. The max() ensures the
       left edge never slides under the fixed sidebar. */
    margin-left: max(calc(var(--sidebar-w) + 2rem), calc((100vw - var(--max-w)) / 2 + var(--sidebar-w) / 2));
    margin-right: max(2rem, calc((100vw - var(--max-w)) / 2 - var(--sidebar-w) / 2));
  }
  body.sidebar-collapsed main {
    width: min(calc(100% - var(--sidebar-collapsed-w) - 4rem), var(--max-w));
    margin-left: max(calc(var(--sidebar-collapsed-w) + 2rem), calc((100vw - var(--max-w)) / 2 + var(--sidebar-collapsed-w) / 2));
    margin-right: max(2rem, calc((100vw - var(--max-w)) / 2 - var(--sidebar-collapsed-w) / 2));
  }
}

/* Ultra-wide: ensure text scales gracefully and remains centered.
   Uses relative units so browser zoom (Ctrl +/-) reflows naturally. */
@media (min-width: 1600px) {
  main {
    /* Allow the paper to breathe on large displays while keeping
       the newspaper measure (max ~72ch) readable. */
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.98;
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-4xl);
}
h2 {
  font-size: var(--fs-2xl);
}
h3 {
  font-size: var(--fs-xl);
}
h4 {
  font-size: var(--fs-lg);
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

a:hover,
a:focus-visible {
  color: var(--accent-deep);
}

p,
li {
  max-width: 72ch;
}

p {
  margin-bottom: var(--space-3);
}

ul,
ol {
  padding-left: 1.25rem;
  margin-bottom: var(--space-4);
}

li {
  margin-bottom: 0.35rem;
}

blockquote {
  border-block: 2px solid var(--rule);
  font-size: var(--fs-md);
  font-style: italic;
  margin: 1.5rem 0;
  padding: 0.9rem 1rem;
}

code {
  background: var(--paper-deep);
  font-family: var(--font-mono);
  padding: 0.1em 0.25em;
}

.muted,
.page-sub,
.section-sub {
  color: var(--ink-muted);
}

.page-title,
.section-title {
  border-block: var(--rule-heavy);
  font-family: var(--font-body);
  letter-spacing: -0.025em;
  margin-bottom: 0.6rem;
  padding: 0.65rem 0;
  text-transform: none;
}

.page-title {
  font-size: clamp(2.5rem, 7vw, 5rem);
}
.page-sub {
  font-size: var(--fs-md);
  margin-bottom: 2rem;
}
.section-title {
  font-size: var(--fs-2xl);
}
.back-link {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.skip-link {
  background: var(--ink);
  color: var(--paper);
  left: 0.75rem;
  padding: 0.5rem 0.8rem;
  position: fixed;
  top: 0.75rem;
  transform: translateY(-180%);
  z-index: 1500;
}

.skip-link:focus {
  transform: translateY(0);
}

.noscript-warning,
.error-state {
  border: 1px solid var(--ink-rule);
  margin: 1rem 0;
  padding: 1rem;
}

.error-state__title {
  margin-bottom: 0.5rem;
}
.error-state__detail {
  color: var(--ink-muted);
}
.error-state__btn {
  background: var(--ink);
  color: var(--paper);
  padding: 0.55rem 0.9rem;
}

body:not([data-page="home"]) main > * {
  animation: paper-in 420ms ease both;
}

@keyframes paper-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (hover: none) and (pointer: coarse) {
  body,
  body[data-page="home"] {
    background-attachment: scroll;
  }
  body[data-page="home"] {
    background-image: var(--paper-texture-image), var(--paper-grain);
    background-size:
      cover,
      320px auto;
    background-repeat: no-repeat, repeat;
  }
}

/* Optional DPI-safe hooks for older deployments that still ship a raster
   paper file. The active surface above remains gradient-only. */
/* image-set(url("../assets/natural-paper.png") 1x); background-size: 400px auto; */

@media (max-width: 640px) {
  main {
    padding-top: 4.5rem;
  }
  h1 {
    font-size: var(--fs-3xl);
  }
}