/* ==========================================================================
   Paper Tiger — Design System
   Calm, publication-grade typography and layout.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Palette */
  --color-bg:            #f9f9f7;
  --color-surface:       #ffffff;
  --color-border:        #e0e0d8;
  --color-border-light:  #ebebе5;

  --color-text:          #1a1a17;
  --color-text-muted:    #68685f;
  --color-text-faint:    #9a9a90;

  --color-accent:        #2b4875;
  --color-accent-hover:  #1c3258;
  --color-accent-light:  #eef2f8;

  --color-preview-bg:    #f3f3ef;
  --color-preview-text:  #8f8f84;
  --color-preview-badge: #b8b8ae;

  --color-link:          #2b4875;
  --color-link-hover:    #1c3258;

  /* Typography */
  --font-serif:   Georgia, 'Times New Roman', Times, serif;
  --font-sans:    system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  /* Type scale */
  --text-xs:   0.6875rem;   /* 11px */
  --text-sm:   0.8125rem;   /* 13px */
  --text-base: 1rem;        /* 16px */
  --text-md:   1.0625rem;   /* 17px */
  --text-lg:   1.1875rem;   /* 19px */
  --text-xl:   1.375rem;    /* 22px */
  --text-2xl:  1.625rem;    /* 26px */
  --text-3xl:  2rem;        /* 32px */
  --text-4xl:  2.5rem;      /* 40px */
  --text-5xl:  3.25rem;     /* 52px */

  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.55;
  --leading-relaxed:1.7;

  /* Spacing scale */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* Layout */
  --max-width:      72rem;
  --content-width:  44rem;
  --nav-height:     3.5rem;

  /* Borders & radii */
  --radius-sm: 2px;
  --radius:    4px;
  --radius-md: 6px;
  --radius-lg: 10px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.07);
  --shadow:    0 2px 8px rgba(0,0,0,0.08);

  /* Transitions */
  --transition: 150ms ease;
}


/* --------------------------------------------------------------------------
   Reset & Base
   -------------------------------------------------------------------------- */

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img, svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition);
}

a:hover {
  color: var(--color-link-hover);
}

ul, ol {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  line-height: var(--leading-snug);
  color: var(--color-text);
}

p {
  margin-bottom: var(--sp-4);
}

p:last-child {
  margin-bottom: 0;
}

strong, b {
  font-weight: 600;
}

code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--color-preview-bg);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
}

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--sp-8) 0;
}


/* --------------------------------------------------------------------------
   Layout Utilities
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--sp-5);
  padding-right: var(--sp-5);
}

.container--narrow {
  max-width: var(--content-width);
}

.site-main {
  flex: 1;
  padding-top: var(--sp-12);
  padding-bottom: var(--sp-16);
}

.page-header {
  padding-bottom: var(--sp-8);
  margin-bottom: var(--sp-8);
  border-bottom: 1px solid var(--color-border);
}

.page-header h1 {
  font-size: var(--text-3xl);
  font-weight: 400;
  letter-spacing: -0.01em;
}

.page-header .page-subtitle {
  margin-top: var(--sp-3);
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  font-family: var(--font-serif);
  font-style: italic;
}

.page-desc {
  font-size: var(--text-md);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  max-width: var(--content-width);
}


/* --------------------------------------------------------------------------
   Top Navigation
   -------------------------------------------------------------------------- */

.site-nav {
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  height: var(--nav-height);
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-nav .nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--sp-5);
  gap: var(--sp-8);
}

.nav-brand {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: 0.01em;
  white-space: nowrap;
  flex-shrink: 0;
}

.nav-brand:hover {
  color: var(--color-accent);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  list-style: none;
  flex-wrap: nowrap;
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-decoration: none;
  border-radius: var(--radius);
  transition: color var(--transition), background-color var(--transition);
  white-space: nowrap;
}

.nav-links a:hover {
  color: var(--color-text);
  background-color: var(--color-preview-bg);
}

.nav-links a.is-active {
  color: var(--color-accent);
  background-color: var(--color-accent-light);
}

/* Preview nav item */
.nav-links .nav-item-preview > a {
  color: var(--color-preview-text);
}

.nav-links .nav-item-preview > a:hover {
  color: var(--color-text-muted);
  background-color: var(--color-preview-bg);
}

.nav-preview-badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-preview-badge);
  background: none;
  padding: 0;
}

/* Hamburger menu (mobile) */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--sp-2);
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.nav-toggle:hover {
  color: var(--color-text);
}

.nav-toggle-icon {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 22px;
}

.nav-toggle-icon span {
  display: block;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  transition: transform var(--transition), opacity var(--transition);
}


/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: var(--sp-8) 0;
  margin-top: auto;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}

.footer-brand {
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: 400;
}

.footer-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
}

.footer-nav a {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition);
}

.footer-nav a:hover {
  color: var(--color-text);
}

.footer-legal {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  width: 100%;
  margin-top: var(--sp-3);
  margin-bottom: 0;
}


/* --------------------------------------------------------------------------
   Landing Page
   -------------------------------------------------------------------------- */

.landing-hero {
  padding: var(--sp-20) 0 var(--sp-16);
  border-bottom: 1px solid var(--color-border);
}

.landing-hero .wordmark {
  font-family: var(--font-serif);
  font-size: var(--text-5xl);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: var(--leading-tight);
  color: var(--color-text);
  margin-bottom: var(--sp-6);
}

.landing-hero .tagline {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--color-text-muted);
  font-style: italic;
  max-width: 32rem;
  line-height: var(--leading-relaxed);
  margin-bottom: var(--sp-6);
}

.landing-hero .hero-desc {
  font-size: var(--text-md);
  color: var(--color-text-muted);
  max-width: 38rem;
  line-height: var(--leading-relaxed);
  margin-bottom: 0;
}

/* Layers grid */
.landing-layers {
  padding: var(--sp-16) 0;
}

.layers-heading {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--sp-8);
}

.layers-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}

.layer-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--sp-6) var(--sp-6) var(--sp-5);
  transition: border-color var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
}

.layer-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-sm);
}

.layer-card.layer-card--preview {
  background: var(--color-preview-bg);
  border-color: var(--color-border);
}

.layer-card.layer-card--preview:hover {
  border-color: var(--color-preview-badge);
  box-shadow: none;
}

.layer-card-eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--sp-3);
}

.layer-card--preview .layer-card-eyebrow {
  color: var(--color-preview-badge);
}

.layer-card-title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--color-text);
  margin-bottom: var(--sp-3);
  line-height: var(--leading-snug);
}

.layer-card--preview .layer-card-title {
  color: var(--color-text-muted);
}

.layer-card-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  flex: 1;
  margin-bottom: var(--sp-5);
}

.layer-card--preview .layer-card-desc {
  color: var(--color-preview-text);
}

.layer-card-link {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  align-self: flex-start;
}

.layer-card-link:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.layer-card--preview .layer-card-link {
  color: var(--color-preview-text);
}

.layer-card--preview .layer-card-link:hover {
  color: var(--color-text-muted);
}

/* Landing reader note */
.landing-reader-note {
  padding: var(--sp-8) 0 var(--sp-16);
  border-top: 1px solid var(--color-border);
}

.landing-reader-note p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-md);
  color: var(--color-text-muted);
  max-width: 36rem;
  line-height: var(--leading-relaxed);
}

.landing-reader-note .get-updates-link {
  color: var(--color-accent);
  font-style: normal;
}


/* --------------------------------------------------------------------------
   Preview State (reusable)
   -------------------------------------------------------------------------- */

.preview-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-preview-badge);
  background: var(--color-preview-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--sp-1) var(--sp-3);
  margin-bottom: var(--sp-4);
}

.preview-section {
  background: var(--color-preview-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--sp-8);
  color: var(--color-text-muted);
}

.preview-section h2,
.preview-section h3 {
  color: var(--color-text-muted);
}


/* --------------------------------------------------------------------------
   Prose / Article Content
   -------------------------------------------------------------------------- */

.prose {
  font-family: var(--font-serif);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  max-width: var(--content-width);
}

.prose h1 { font-size: var(--text-3xl); font-weight: 400; margin: var(--sp-10) 0 var(--sp-4); letter-spacing: -0.01em; }
.prose h2 { font-size: var(--text-2xl); font-weight: 400; margin: var(--sp-8) 0 var(--sp-3); }
.prose h3 { font-size: var(--text-xl); font-weight: 400; margin: var(--sp-6) 0 var(--sp-3); }
.prose h4 { font-size: var(--text-lg); font-weight: 600; font-family: var(--font-sans); margin: var(--sp-5) 0 var(--sp-2); }

.prose p { margin-bottom: var(--sp-5); }
.prose ul, .prose ol { padding-left: var(--sp-6); margin-bottom: var(--sp-5); }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: var(--sp-2); }
.prose li:last-child { margin-bottom: 0; }
.prose blockquote {
  border-left: 3px solid var(--color-border);
  padding-left: var(--sp-5);
  margin: var(--sp-6) 0;
  color: var(--color-text-muted);
  font-style: italic;
}
.prose a { color: var(--color-link); }
.prose a:hover { color: var(--color-link-hover); }
.prose strong { font-weight: 700; }
.prose hr { margin: var(--sp-10) 0; }


/* --------------------------------------------------------------------------
   Article Layout
   -------------------------------------------------------------------------- */

.article-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-12);
  max-width: var(--content-width);
}

/* Article header */
.article-header {
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid var(--color-border);
}

.article-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

.article-section-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  text-decoration: none;
}

.article-section-label:hover {
  color: var(--color-text-muted);
}

.article-eyebrow-sep {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

.article-title {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: var(--leading-tight);
  color: var(--color-text);
  margin-bottom: var(--sp-4);
}

.article-subtitle {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 400;
  font-style: italic;
  color: var(--color-text-muted);
  line-height: var(--leading-snug);
  margin-bottom: var(--sp-6);
}

.article-summary {
  font-size: var(--text-md);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  font-style: italic;
  border-left: 3px solid var(--color-border);
  padding-left: var(--sp-5);
  margin-bottom: var(--sp-6);
}

/* Article meta (author, date, PDF) */
.article-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

.article-byline {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.article-author {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
}

.article-date {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Tag chips */
.article-tags {
  margin-bottom: var(--sp-6);
}

.tag-groups {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.tag-group {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.tag-group-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  min-width: 4rem;
  flex-shrink: 0;
}

.tag-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  list-style: none;
}

.tag-chip {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  background: var(--color-preview-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--sp-1) var(--sp-3);
  line-height: 1.4;
}

/* Article body prose — override table defaults */
.article-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  margin: var(--sp-6) 0;
}

.article-body th,
.article-body td {
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--color-border);
}

.article-body th {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  border-bottom-color: var(--color-text-faint);
}

.article-body td:last-child {
  text-align: right;
}

/* Related content */
.article-related {
  border-top: 1px solid var(--color-border);
  padding-top: var(--sp-8);
}

.article-related h2 {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--sp-5);
}

.related-section {
  margin-bottom: var(--sp-6);
}

.related-section h3 {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: var(--sp-3);
}

.related-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.related-list li {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.related-list a {
  color: var(--color-link);
  text-decoration: none;
}

.related-list a:hover {
  text-decoration: underline;
}

.related-list .related-item-note {
  color: var(--color-text-faint);
  font-style: italic;
}

/* Disclosure block */
.disclosure-block {
  background: var(--color-preview-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--sp-5) var(--sp-6);
  margin-top: var(--sp-8);
}

.disclosure-block-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--sp-3);
}

.disclosure-block p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--sp-2);
}

.disclosure-block p:last-child {
  margin-bottom: 0;
}

/* Article permalink */
.article-permalink {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--color-border);
}

.article-permalink a {
  color: var(--color-text-faint);
  text-decoration: none;
  font-family: var(--font-mono);
}

.article-permalink a:hover {
  color: var(--color-text-muted);
}

@media (max-width: 48rem) {
  .article-title {
    font-size: var(--text-2xl);
  }

  .article-meta {
    flex-direction: column;
  }

  .tag-group {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-1);
  }

  .tag-group-label {
    min-width: unset;
  }
}


/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
  border: 1px solid transparent;
  white-space: nowrap;
}

.btn-primary {
  background-color: var(--color-accent);
  color: #ffffff;
  border-color: var(--color-accent);
}

.btn-primary:hover {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: #ffffff;
}

.btn-outline {
  background-color: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.btn-outline:hover {
  background-color: var(--color-accent-light);
}

.btn-muted {
  background-color: var(--color-preview-bg);
  color: var(--color-text-muted);
  border-color: var(--color-border);
}

.btn-muted:hover {
  background-color: var(--color-border);
}


/* --------------------------------------------------------------------------
   Responsive — Mobile-first breakpoints
   -------------------------------------------------------------------------- */

/* Small screens: collapse nav */
@media (max-width: 48rem) {
  .nav-links {
    display: none;
    position: absolute;
    top: var(--nav-height);
    left: 0;
    right: 0;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    flex-direction: column;
    padding: var(--sp-3) var(--sp-4);
    gap: 0;
    box-shadow: var(--shadow);
  }

  .nav-links.is-open {
    display: flex;
  }

  .nav-links a {
    padding: var(--sp-3) var(--sp-2);
    font-size: var(--text-base);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    width: 100%;
  }

  .nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .site-nav {
    position: sticky;
    overflow: visible;
  }

  .landing-hero .wordmark {
    font-size: var(--text-4xl);
  }

  .layers-grid {
    grid-template-columns: 1fr;
  }

  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .page-header h1 {
    font-size: var(--text-2xl);
  }
}

/* Medium and up: two-column layers grid */
@media (min-width: 48rem) {
  .layers-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Large screens: breathing room */
@media (min-width: 64rem) {
  .landing-hero {
    padding: var(--sp-24) 0 var(--sp-20);
  }

  .landing-hero .wordmark {
    font-size: var(--text-5xl);
  }
}