/* Shared styles for the secondary pages (journal, articles, privacy, 404).
   The homepage keeps its own inline CSS; this is the subset those pages need, plus article typography. */

@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 400; font-display: swap; src: url('/assets/fonts/fraunces.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/instrument-serif.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('/assets/fonts/instrument-serif-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/assets/fonts/inter.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('/assets/fonts/jetbrains-mono.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; background: #F7F3EC; color: #111111; }

.display { font-family: 'Fraunces', ui-serif, Georgia, serif; letter-spacing: -0.03em; font-weight: 400; }
.display-italic { font-family: 'Instrument Serif', 'Fraunces', serif; font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
.eyebrow { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: #4A4239; }
.eyebrow-invert { color: rgba(255,255,255,0.78); }
.hairline { border-color: #E5DFD1; }
.hairline-dark { border-color: rgba(255,255,255,0.08); }
.btn-solid { display: inline-flex; align-items: center; gap: 10px; padding: 18px 28px; background: #0B0B0B; color: #F7F3EC; font-size: 13px; font-weight: 500; letter-spacing: 0.02em; transition: transform 200ms ease, background 200ms ease; }
.btn-solid:hover { background: #1C1B17; transform: translateY(-1px); }
.btn-ghost { display: inline-flex; align-items: center; gap: 10px; padding: 18px 0; color: #0B0B0B; font-size: 13px; font-weight: 500; letter-spacing: 0.02em; border-bottom: 1px solid #0B0B0B; transition: gap 200ms ease, border-color 200ms ease; }
.btn-ghost:hover { gap: 14px; border-color: #14B8A6; }
:focus-visible { outline: 2px solid #14B8A6; outline-offset: 2px; border-radius: 6px; }

/* Mobile menu (same as the homepage) */
.mobile-menu { position: fixed; inset: 72px 0 0 0; z-index: 39; background: #F7F3EC; overflow-y: auto; }
.mobile-menu[hidden] { display: none; }
.mobile-menu-inner { display: flex; flex-direction: column; min-height: 100%; padding: 24px 24px 40px; }
.mobile-menu-inner > a { display: flex; align-items: baseline; gap: 18px; padding: 18px 0; border-bottom: 1px solid #E5DFD1; font-family: 'Fraunces', ui-serif, Georgia, serif; font-size: 40px; letter-spacing: -0.03em; line-height: 1; color: #0B0B0B; }
.mobile-menu-num { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; font-weight: 500; letter-spacing: 0.16em; color: #4A4239; }
.mobile-menu-foot { margin-top: auto; padding-top: 32px; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
body.menu-open { overflow: hidden; }
#menu-toggle .menu-icon-close { display: none; }
#menu-toggle[aria-expanded="true"] .menu-icon-open { display: none; }
#menu-toggle[aria-expanded="true"] .menu-icon-close { display: block; }

/* Journal list */
.journal-list li { border-bottom: 1px solid #E5DFD1; }
.journal-list a { display: grid; grid-template-columns: 7rem 1fr auto; align-items: baseline; gap: 16px 24px; padding: 22px 0; color: #0B0B0B; transition: padding-left 240ms cubic-bezier(.16,.84,.3,1); }
.journal-list a:hover { padding-left: 8px; }
.journal-date { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: #4A4239; }
.journal-title { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; font-weight: 500; font-size: clamp(17px, 1.35vw, 20px); letter-spacing: -0.015em; line-height: 1.3; transition: color 200ms ease; }
.journal-list a:hover .journal-title { color: #0D9488; }
.journal-meta { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: #4A4239; white-space: nowrap; }
.journal-list .journal-summary { grid-column: 2; margin-top: -8px; font-size: 15px; line-height: 1.6; color: #6B6258; max-width: 62ch; }
@media (max-width: 640px) {
  .journal-list a { grid-template-columns: 1fr; gap: 8px; }
  .journal-meta { display: none; }
  .journal-list .journal-summary { grid-column: 1; }
}

/* Article typography */
.prose { font-size: 17px; line-height: 1.7; color: #3B342D; }
.prose > * + * { margin-top: 1.25em; }
.prose p { max-width: 64ch; }
.prose h2 { font-family: 'Fraunces', ui-serif, Georgia, serif; font-weight: 400; letter-spacing: -0.03em; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.1; color: #0B0B0B; margin-top: 2.2em; max-width: 24ch; }
.prose h2 em { font-family: 'Instrument Serif', serif; font-style: italic; color: #6B6258; }
.prose h3 { font-family: 'Fraunces', ui-serif, Georgia, serif; font-weight: 400; letter-spacing: -0.02em; font-size: 22px; line-height: 1.2; color: #0B0B0B; margin-top: 1.8em; }
.prose strong { font-weight: 600; color: #0B0B0B; }
.prose a { color: #0B0B0B; border-bottom: 1px solid #0B0B0B; transition: border-color 200ms ease; }
.prose a:hover { border-color: #14B8A6; }
.prose ul, .prose ol { padding-left: 1.25em; max-width: 62ch; }
.prose li + li { margin-top: 0.5em; }
.prose blockquote { border-left: 2px solid #14B8A6; padding-left: 1.25em; font-family: 'Fraunces', ui-serif, Georgia, serif; font-size: 1.25em; line-height: 1.4; letter-spacing: -0.02em; color: #0B0B0B; max-width: 40ch; }
.prose .aside { background: #EDE7DC; padding: 22px 26px; border-radius: 4px; font-size: 15px; line-height: 1.6; max-width: 64ch; }
.prose .aside .eyebrow { display: block; margin-bottom: 8px; }
.prose table { border-collapse: collapse; width: 100%; max-width: 64ch; font-size: 15px; }
.prose th, .prose td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid #E5DFD1; vertical-align: top; }
.prose th { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #6B6258; font-weight: 500; }
.prose hr { border: 0; border-top: 1px solid #E5DFD1; margin: 3em 0; }

/* Services table + service pages */
.svc-table { width: 100%; border-collapse: collapse; }
.svc-table th { text-align: left; padding: 0 24px 14px 0; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: #4A4239; border-bottom: 1px solid #0B0B0B; }
.svc-table td { vertical-align: top; padding: 20px 28px 20px 0; border-bottom: 1px solid #E5DFD1; font-size: 15px; line-height: 1.55; color: #3B342D; }
.svc-table td:last-child, .svc-table th:last-child { padding-right: 0; }
.svc-table td:first-child { width: 24%; }
.svc-table td:first-child a { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; font-weight: 500; font-size: 16px; color: #0B0B0B; border-bottom: 1px solid #0B0B0B; transition: color 200ms ease, border-color 200ms ease; }
.svc-table td:first-child a:hover { color: #0D9488; border-color: #0D9488; }
@media (max-width: 767px) {
  .svc-table thead { display: none; }
  .svc-table, .svc-table tbody, .svc-table tr, .svc-table td, .svc-table td:first-child { display: block; width: auto; }
  .svc-table tr { padding: 18px 0; border-bottom: 1px solid #E5DFD1; }
  .svc-table td { padding: 6px 0; border: 0; }
  .svc-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: #4A4239; }
}
.svc-tagline em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; color: #0B0B0B; }
.svc-ledger li { display: grid; grid-template-columns: 2.5rem 1fr; gap: 16px; padding: 22px 0; border-bottom: 1px solid #E5DFD1; }
.svc-ledger li:first-child { border-top: 1px solid #E5DFD1; }
.svc-ledger .eyebrow { padding-top: 4px; }
/* FAQ accordion (same as homepage) */
.faq { border-bottom: 1px solid #E5DFD1; }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 2.5rem 1fr 2rem; align-items: start; gap: 12px; padding: 22px 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq-num { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; font-weight: 500; letter-spacing: 0.16em; color: #4A4239; padding-top: 5px; }
.faq-q { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; font-weight: 500; font-size: clamp(16px, 1.25vw, 18px); letter-spacing: -0.015em; line-height: 1.35; color: #0B0B0B; }
.faq-icon { position: relative; width: 2rem; height: 2rem; justify-self: end; }
.faq-icon::before, .faq-icon::after { content: ''; position: absolute; top: 50%; left: 50%; background: #0B0B0B; transition: transform 240ms cubic-bezier(.16,.84,.3,1); }
.faq-icon::before { width: 14px; height: 1px; transform: translate(-50%, -50%); }
.faq-icon::after { width: 1px; height: 14px; transform: translate(-50%, -50%); }
.faq[open] .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq summary:hover .faq-q { color: #0D9488; }
.faq-a { margin: 0 2rem 26px 3.25rem; max-width: 60ch; font-size: 15px; line-height: 1.65; color: #6B6258; }
@media (max-width: 640px) { .faq-a { margin-left: 0; } }