/* html.surf theme: Tactile Paper */
/* Tactile Paper — matches .hs-page-content.surf editorial article style */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Lora:ital,wght@0,400;0,500;0,600;1,400&family=Fira+Code:wght@400;500&display=swap');

.hs-page-content {
  --paper: #f7f3ed;
  --paper-2: #ede8e0;
  --paper-3: #ddd7cc;
  --ink: #1a1714;
  --ink-2: #4a4540;
  --ink-3: #8a8278;
  --accent: #c84b2f;
  --link: #2e5fa3;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Lora', Georgia, serif;
  --font-mono: 'Fira Code', monospace;
}
.hs-page-content { font-family: var(--font-body); margin: 0; padding: 0; background: var(--paper); color: var(--ink); }
article { max-width: 900px; margin: 0 auto; padding: 2rem 1rem 4rem; line-height: 1.85; }
h1 { font-family: var(--font-display); font-size: 2.6rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 0.5rem; line-height: 1.15; }
h2 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; margin: 2.5rem 0 0.75rem; border-bottom: 2px solid var(--accent); display: inline-block; padding-bottom: 0.2rem; }
h3 { font-size: 1.05rem; font-weight: 600; margin: 1.75rem 0 0.5rem; color: var(--ink-2); }
p { margin: 0 0 1.25rem; }
.byline { color: var(--ink-3); font-size: 0.88rem; margin-bottom: 2.5rem; padding-bottom: 2rem; border-bottom: 1px solid var(--paper-3); font-family: var(--font-mono); }
.lead { font-size: 1.15rem; color: var(--ink-2); margin-bottom: 2rem; font-style: italic; }
.callout { background: var(--paper-2); border-left: 3px solid var(--accent); padding: 1rem 1.25rem; margin: 1.5rem 0; border-radius: 0 4px 4px 0; }
.callout p { margin: 0; font-size: 0.95rem; }
.callout.tip { border-left-color: var(--link); background: #edf2f7; }
.callout.warn { border-left-color: #b7791f; background: #fef3cd; }
.tag { display: inline-block; background: var(--paper-2); color: var(--ink-2); font-size: 0.72rem; padding: 0.2rem 0.6rem; border-radius: 20px; margin-right: 0.4rem; font-family: var(--font-mono); }
a { color: var(--link); }
pre { background: #1e1e2e; color: #cdd6f4; padding: 1.5rem; border-radius: 6px; overflow-x: auto; font-size: 0.82rem; line-height: 1.6; margin: 1.5rem 0; }
code { font-family: var(--font-mono); font-size: 0.85em; background: var(--paper-2); padding: 0.15em 0.4em; border-radius: 3px; }
pre code { background: none; padding: 0; color: inherit; }
table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.88rem; }
th { background: var(--ink); color: var(--paper); padding: 0.6rem 1rem; text-align: left; font-family: var(--font-mono); font-size: 0.8rem; }
td { padding: 0.6rem 1rem; border-bottom: 1px solid var(--paper-2); vertical-align: top; }
ul, ol { padding-left: 1.5rem; margin: 0 0 1.25rem; }
li { margin-bottom: 0.4rem; }
figcaption { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-3); margin-top: 0.5rem; text-align: center; }
footer { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--paper-3); font-size: 0.82rem; color: var(--ink-3); text-align: center; font-family: var(--font-mono); }
@media (max-width: 600px) { article { padding: 1.5rem 1rem 3rem; } h1 { font-size: 2rem; } }