@layer reset, base, layout, components, pages;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; padding: 0; }
  html { -webkit-text-size-adjust: none; text-size-adjust: none; hanging-punctuation: first last; }
  body { min-height: 100dvh; line-height: 1.5; }
  img, picture, video, canvas, svg { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; }
  p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
  :target { scroll-margin-block: 5ex; }
}

@layer base {
  :root {
    --color-bg: #fafaf8;
    --color-bg-subtle: #f0ede8;
    --color-text: #111110;
    --color-text-muted: #6b6860;
    --color-accent: #5c4b3b;
    --color-accent-light: #e8ddd5;
    --color-border: #e2ddd8;

    --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
    --font-sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "SF Mono", "Fira Code", "Cascadia Code", monospace;

    --text-xs:   clamp(0.75rem,  0.7rem + 0.2vw,   0.875rem);
    --text-sm:   clamp(0.875rem, 0.84rem + 0.2vw,  1rem);
    --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
    --text-lg:   clamp(1.125rem, 1.05rem + 0.4vw,  1.375rem);
    --text-xl:   clamp(1.25rem,  1.1rem + 0.75vw,  1.75rem);
    --text-2xl:  clamp(1.5rem,   1.2rem + 1.5vw,   2.5rem);
    --text-3xl:  clamp(2rem,     1.5rem + 2.5vw,   3.5rem);
    --text-4xl:  clamp(2.5rem,   1.8rem + 3.5vw,   5rem);

    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    --max-width-content: 72rem;
    --max-width-prose: 68ch;

    --duration-fast: 120ms;
    --duration-base: 220ms;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  }

  [data-theme="dark"] {
    --color-bg: #141412;
    --color-bg-subtle: #1e1d1b;
    --color-text: #f0ede8;
    --color-text-muted: #9c9790;
    --color-accent: #c8956a;
    --color-accent-light: #2a2118;
    --color-border: #2e2c29;
  }

  html { font-size: 100%; scroll-behavior: smooth; }

  body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    font-weight: normal;
    line-height: 1.15;
    letter-spacing: -0.01em;
  }

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

  p { max-width: var(--max-width-prose); }

  a {
    color: inherit;
    text-decoration-color: var(--color-border);
    text-underline-offset: 3px;
    transition: text-decoration-color var(--duration-fast) ease;
  }
  a:hover { text-decoration-color: var(--color-text); }

  .prose h2 { margin-block: var(--space-12) var(--space-4); }
  .prose h3 { margin-block: var(--space-8) var(--space-3); }
  .prose p + p { margin-block-start: var(--space-4); }
  .prose ul, .prose ol {
    padding-inline-start: var(--space-6);
    max-width: var(--max-width-prose);
  }
  :is(.prose ul, .prose ol) li + li { margin-block-start: var(--space-2); }
  .prose blockquote {
    border-inline-start: 2px solid var(--color-accent);
    padding-inline-start: var(--space-6);
    color: var(--color-text-muted);
    font-style: italic;
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    margin-block: var(--space-8);
  }
  .prose code {
    font-family: var(--font-mono);
    font-size: 0.875em;
    background: var(--color-bg-subtle);
    padding: 0.1em 0.35em;
    border-radius: 3px;
  }

  :focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: 2px;
  }

  .sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

@layer layout {
  .l-wrapper {
    width: 100%;
    max-width: var(--max-width-content);
    margin-inline: auto;
    padding-inline: var(--space-6);
  }
  @media (width >= 64rem) {
    .l-wrapper { padding-inline: var(--space-10); }
  }

  .l-site {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100dvh;
  }

  .l-stack { display: flex; flex-direction: column; gap: var(--space-6); }

  .l-section { padding-block: var(--space-12); }

  .l-grid {
    display: grid;
    gap: var(--space-8);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  }

  .l-prose { max-width: var(--max-width-prose); margin-inline: auto; }
  .l-prose--flush { margin-inline: 0; }
}

@layer components {
  /* ── Site Header ── */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: color-mix(in srgb, var(--color-bg) 85%, transparent);
    backdrop-filter: blur(8px);
    border-block-end: 1px solid var(--color-border);
  }
  .site-header .l-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--space-4);
  }

  .site-logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    text-decoration: none;
    color: var(--color-text);
    letter-spacing: -0.02em;
  }

  .site-logo__img {
    height: 1.5em;
    width: auto;
  }

  .site-header__controls {
    display: flex;
    align-items: center;
    gap: var(--space-4);
  }

  .nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2rem; height: 2rem;
    padding: 0;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: 2px;
    color: var(--color-text);
    cursor: pointer;
    transition: border-color var(--duration-fast) ease;
  }
  .nav-toggle:hover { border-color: var(--color-text-muted); }
  .nav-toggle__close { display: none; }
  .nav-toggle__open  { display: block; }
  .site-header[data-menu-open] .nav-toggle__open  { display: none; }
  .site-header[data-menu-open] .nav-toggle__close { display: block; }

  .site-nav {
    display: flex;
    gap: var(--space-6);
    list-style: none;
  }
  .site-nav a {
    font-size: var(--text-sm);
    text-decoration: none;
    color: var(--color-text-muted);
    letter-spacing: 0.02em;
    transition: color var(--duration-fast) ease;
  }
  .site-nav a:hover, [aria-current="page"].site-nav a { color: var(--color-text); }

  @media (width < 64rem) {
    .nav-toggle { display: flex; }
    #primary-nav {
      display: none;
      position: absolute;
      top: 100%;
      left: 0; right: 0;
      background-color: var(--color-bg);
      border-block-end: 1px solid var(--color-border);
      padding: var(--space-6);
      z-index: 1;
    }
    .site-header[data-menu-open] #primary-nav { display: block; }
    .site-nav { flex-direction: column; gap: 0; }
    .site-nav li { border-block-start: 1px solid var(--color-border); }
    .site-nav li:last-child { border-block-end: 1px solid var(--color-border); }
    .site-nav a { display: block; padding-block: var(--space-4); font-size: var(--text-base); }
  }

  /* ── Theme Toggle ── */
  .theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem; height: 2rem;
    padding: 0;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color var(--duration-fast) ease, border-color var(--duration-fast) ease;
    flex-shrink: 0;
  }
  .theme-toggle:hover { color: var(--color-text); border-color: var(--color-text-muted); }
  .theme-toggle__sun  { display: none; }
  .theme-toggle__moon { display: block; }
  [data-theme="dark"] .theme-toggle__sun  { display: block; }
  [data-theme="dark"] .theme-toggle__moon { display: none; }

  /* ── Site Footer ── */
  .site-footer {
    border-block-start: 1px solid var(--color-border);
    padding-block: var(--space-10);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }
  .site-footer .l-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
  }
  .site-footer__info { display: flex; flex-direction: column; gap: var(--space-1); }
  .site-footer a { color: var(--color-text-muted); transition: color var(--duration-fast) ease; }
  .site-footer a:hover { color: var(--color-text); }

  /* ── Buttons ── */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    font-family: inherit;
    font-size: var(--text-sm);
    text-decoration: none;
    border: 1px solid currentColor;
    border-radius: 2px;
    cursor: pointer;
    transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease;
    letter-spacing: 0.02em;
    appearance: none;
    background: none;
  }
  .btn--primary {
    background-color: var(--color-text);
    color: var(--color-bg);
    border-color: var(--color-text);
  }
  .btn--primary:hover { background-color: var(--color-accent); border-color: var(--color-accent); }
  .btn--secondary { background-color: transparent; color: var(--color-text); }
  .btn--secondary:hover { background-color: var(--color-bg-subtle); }

  /* ── Section label ── */
  .section-label {
    font-size: var(--text-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-block-end: var(--space-8);
  }
  .section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-block-end: var(--space-10);
  }

  /* ── Tag pill ── */
  .tag {
    display: inline-block;
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    padding: var(--space-1) var(--space-3);
    background-color: var(--color-bg-subtle);
    border-radius: 2px;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease;
  }
  .tag:hover { background-color: var(--color-accent-light); color: var(--color-text); }

  /* ── Tag Filter ── */
  .tag-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-block-end: var(--space-10);
  }

  .tag-filter__btn {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: 2px;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease, border-color var(--duration-fast) ease;
    white-space: nowrap;
  }

  .tag-filter__btn:hover {
    border-color: var(--color-text-muted);
    color: var(--color-text);
  }

  .tag-filter__btn.is-active {
    background-color: var(--color-text);
    color: var(--color-bg);
    border-color: var(--color-text);
  }

  /* ── Book Card (grid listing) ── */
  .book-card {
    display: grid;
    grid-template-rows: auto 1fr;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    overflow: hidden;
    transition: border-color var(--duration-fast) ease;
  }
  .book-card:hover { border-color: var(--color-text-muted); }
  .book-card:hover .book-card__title { color: var(--color-accent); }

  .book-card__cover {
    aspect-ratio: 2 / 3;
    overflow: hidden;
    background-color: var(--color-bg-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .book-card__cover img,
  .book-card__cover picture { width: 100%; height: 100%; }
  .book-card__cover img { object-fit: cover; width: 100%; height: 100%; }

  .book-card__meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4) var(--space-5);
    border-block-start: 1px solid var(--color-border);
  }
  .book-card__title {
    font-family: var(--font-serif);
    font-size: var(--text-base);
    font-weight: normal;
    line-height: 1.25;
    transition: color var(--duration-fast) ease;
  }
  .book-card__author {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    letter-spacing: 0.02em;
  }

  /* ── Book cover missing state ── */
  .book-cover--missing {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-bg-subtle) 0%, var(--color-accent-light) 100%);
  }

  /* ── Pagination ── */
  .pagination {
    display: flex;
    justify-content: center;
    padding-block: var(--space-12);
  }
  .pagination__list {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    list-style: none;
  }
  .pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding-inline: var(--space-3);
    font-size: var(--text-sm);
    text-decoration: none;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    border-radius: 2px;
    transition: color var(--duration-fast) ease, border-color var(--duration-fast) ease, background-color var(--duration-fast) ease;
  }
  .pagination__link:hover { color: var(--color-text); border-color: var(--color-text-muted); }
  .pagination__link--current {
    background-color: var(--color-text);
    color: var(--color-bg);
    border-color: var(--color-text);
  }
  .pagination__link--prev,
  .pagination__link--next { letter-spacing: 0.02em; }
}

@layer pages {
  /* ── Book archive (index + tag pages) ── */
  .book-archive {
    padding-block: var(--space-12);
  }
  .book-archive__header {
    margin-block-end: var(--space-10);
  }
  .book-archive__eyebrow {
    font-size: var(--text-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-block-end: var(--space-3);
  }
  .book-archive__heading {
    font-family: var(--font-serif);
    font-size: var(--text-3xl);
    font-weight: normal;
    line-height: 1.1;
  }
  .book-archive__intro {
    margin-block-start: var(--space-4);
    color: var(--color-text-muted);
    max-width: 100%;
  }

  /* Tag archive heading */
  .tag-archive__heading {
    font-family: var(--font-serif);
    font-size: var(--text-3xl);
    font-weight: normal;
    line-height: 1.1;
    margin-block-end: var(--space-10);
  }

  /* Book grid — tighter columns than default l-grid */
  .book-grid {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
    list-style: none;
    padding: 0;
  }
  @media (width >= 48rem) {
    .book-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
  }

  /* ── Book detail page ── */
  .book {
    padding-block: var(--space-12);
    display: grid;
    gap: var(--space-10);
  }
  @media (width >= 48rem) {
    .book {
      grid-template-columns: 14rem 1fr;
      grid-template-rows: auto 1fr;
      gap: var(--space-12) var(--space-12);
      align-items: start;
    }
    .book__cover { grid-row: 1 / 3; }
  }

  .book__cover {
    width: 100%;
    max-width: 14rem;
    border-radius: 4px;
    overflow: hidden;
    background-color: var(--color-bg-subtle);
    box-shadow: 0 4px 24px color-mix(in srgb, var(--color-text) 12%, transparent);
  }
  .book__cover img { width: 100%; height: auto; display: block; }
  .book__cover picture { display: block; }

  .book__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .book__title {
    font-family: var(--font-serif);
    font-size: var(--text-3xl);
    font-weight: normal;
    line-height: 1.1;
  }
  .book__author {
    font-size: var(--text-lg);
    color: var(--color-text-muted);
  }
  .book__date {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    letter-spacing: 0.02em;
  }
  .book__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
    padding: 0;
    margin-block-start: var(--space-2);
  }

  .book__body {
    font-size: var(--text-base);
    line-height: 1.8;
  }
  .book__body p { max-width: 68ch; }
  .book__body p + p { margin-block-start: var(--space-4); }
}