/* blog.css - the journal, in the design it had on Ryze.

   A page of its own: white, Lora headings, Inter text, light only. The
   header and footer rules are the ones Ryze served for lynxresort, kept as
   they were; the rest reproduces its measured layout: a 1320px index with
   the newest post featured and a card grid, and a 760px article column
   with a 250px sticky contents column on wide screens. */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/inter-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/lora-latin-wght-normal.woff2") format("woff2"); }

:root {
  --hosted-bg: #ffffff;
  --hosted-text: #17252a;
  --hosted-link: #134f3e;
  --hosted-text-62: rgba(23, 37, 42, 0.62);
  --hosted-text-45: rgba(23, 37, 42, 0.45);
  --hosted-text-14: rgba(23, 37, 42, 0.14);
  --hosted-text-10: rgba(23, 37, 42, 0.10);
  --hosted-text-8: rgba(23, 37, 42, 0.08);
  --hosted-text-6: rgba(23, 37, 42, 0.06);
  --hosted-box: rgba(23, 37, 42, 0.048);
  --hosted-font-heading: "Lora", Georgia, serif;
  --hosted-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 16px; -webkit-text-size-adjust: 100%; }
html, body { background: var(--hosted-bg); }
body { margin: 0; color: var(--hosted-text); font: 16px/1.5 var(--hosted-font-body); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--hosted-font-heading); margin: 0; }
.hosted-root { display: flex; min-height: 100vh; flex-direction: column; }
.hosted-body { flex: 1 0 auto; }

/* ------------------------------------------------------------------ header and footer (as served by Ryze) */
.lynx-hdr{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;background:#ffffff;border-bottom:1px solid #e1e5de;width:100%;box-sizing:border-box;}.lynx-hdr *{box-sizing:border-box;}.lynx-hdr__inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 24px;flex-wrap:wrap;}.lynx-hdr__brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto;}.lynx-hdr__logo{height:36px;width:auto;display:block;}.lynx-hdr__name{font-family:'Lora',Georgia,serif;font-size:22px;color:#17252a;letter-spacing:-0.5px;}.lynx-hdr__nav{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-left:auto;}.lynx-hdr__nav a{color:#17252a;text-decoration:none;font-size:14px;white-space:nowrap;}.lynx-hdr__nav a:hover{color:#134f3e;text-decoration:underline;text-underline-offset:5px;}.lynx-hdr__cta{background:#134f3e;color:#ffffff;font-size:14px;font-weight:500;padding:10px 20px;border-radius:2px;text-decoration:none;white-space:nowrap;flex:0 0 auto;}.lynx-hdr__cta:hover{background:#0e3d30;}@media (max-width:1024px){.lynx-hdr__inner{padding:12px 18px;}.lynx-hdr__nav{gap:14px;}}@media (max-width:640px){.lynx-hdr__inner{padding:10px 14px;gap:10px;}.lynx-hdr__nav{width:100%;order:3;justify-content:flex-start;gap:12px 16px;}.lynx-hdr__name{font-size:19px;}.lynx-hdr__logo{height:30px;}.lynx-hdr__cta{padding:9px 16px;font-size:13px;}}
.lynx-ftr{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;background:#ffffff;border-top:1px solid #e1e5de;width:100%;box-sizing:border-box;}.lynx-ftr *{box-sizing:border-box;}.lynx-ftr__inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;flex-wrap:wrap;}.lynx-ftr__brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto;}.lynx-ftr__logo{height:32px;width:auto;display:block;}.lynx-ftr__name{font-family:'Lora',Georgia,serif;font-size:18px;color:#17252a;letter-spacing:-0.3px;}.lynx-ftr__nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}.lynx-ftr__nav a{color:#17252a;text-decoration:none;font-size:13px;white-space:nowrap;}.lynx-ftr__nav a:hover{color:#134f3e;text-decoration:underline;text-underline-offset:4px;}.lynx-ftr__copy{font-size:12px;color:#53684c;white-space:nowrap;}@media (max-width:1024px){.lynx-ftr__inner{padding:18px 18px;}.lynx-ftr__nav{gap:14px;}}@media (max-width:640px){.lynx-ftr__inner{flex-direction:column;align-items:flex-start;padding:16px 14px;gap:12px;}.lynx-ftr__nav{gap:10px 16px;}.lynx-ftr__copy{order:4;}}

/* ------------------------------------------------------------------ shared pieces */
.post-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--hosted-text); }
.post-author { display: inline-flex; align-items: center; gap: 8px; }
.post-avatar { display: grid; place-items: center; width: 22px; height: 22px; flex: 0 0 auto; border-radius: 9999px; background: var(--hosted-link); color: #fff; font-family: var(--hosted-font-body); font-size: 9px; font-weight: 700; letter-spacing: .02em; line-height: 1; }
.post-meta { font-weight: 500; color: var(--hosted-text-45); }
.card-photo { aspect-ratio: 16 / 10; overflow: hidden; background: var(--hosted-text-6); }
.card-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.card { display: flex; flex-direction: column; gap: 12px; }
.card .card-photo { margin-bottom: 4px; }
.card:hover .card-photo img { transform: scale(1.04); }
.card h3 { font-size: 18px; font-weight: 600; line-height: 1.375; letter-spacing: -0.025em; color: var(--hosted-text); text-wrap: balance; transition: opacity 0.2s; }
.card:hover h3 { opacity: 0.6; }
.card p { margin: 0; font-size: 14px; line-height: 1.625; color: var(--hosted-text-62); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 56px 24px; margin-top: 36px; }

/* ------------------------------------------------------------------ index */
.journal { width: 100%; max-width: 1320px; margin: 0 auto; padding: 40px 24px 96px; }
.featured { display: grid; align-items: center; gap: 32px; }
.featured-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; order: 2; }
.featured-date { font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: 0.025em; text-transform: uppercase; color: var(--hosted-text-45); }
.featured h1 { font-size: 26px; font-weight: 600; line-height: 1.14; letter-spacing: -0.025em; text-wrap: balance; }
.featured h1 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.featured-copy p { margin: 0; max-width: 46ch; font-size: 14px; line-height: 1.625; color: var(--hosted-text-62); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.featured-more { margin-top: 4px; display: inline-block; background: var(--hosted-link); color: var(--hosted-bg); font-size: 14px; font-weight: 600; line-height: 20px; padding: 10px 20px; transition: opacity 0.2s; }
.featured-more:hover { opacity: 0.9; }
.featured-photo { display: block; overflow: hidden; order: 1; }
.featured-photo:hover .card-photo img { transform: scale(1.02); }
.all-articles { padding-top: 96px; }
.all-articles h2 { font-size: 28px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.5; }

/* ------------------------------------------------------------------ article */
.read-progress { position: fixed; top: 0; left: 0; z-index: 50; width: 100%; height: 3px; pointer-events: none; }
.read-progress span { display: block; height: 100%; width: 0; background: var(--hosted-link); }
.post-back-link { margin: 0 auto; display: flex; width: 100%; max-width: 808px; align-items: center; gap: 6px; padding: 24px 24px 0; font-size: 14px; font-weight: 500; color: var(--hosted-text-62); transition: color 0.2s; }
.post-back-link:hover { color: var(--hosted-text); }
.post-back-link svg { width: 16px; height: 16px; }
.post-grid { display: grid; grid-template-columns: 1fr; padding: 40px 24px 96px; }
.post-side-col { display: none; }
.post-main { margin: 0 auto; width: 100%; min-width: 0; max-width: 760px; }
.post-main h1 { font-size: 26px; font-weight: 800; line-height: 1.15; letter-spacing: -0.025em; text-wrap: balance; }
.post-summary { margin: 16px 0 0; font-size: 15px; line-height: 1.625; color: var(--hosted-text-62); }
.post-main .post-byline { margin-top: 20px; }
.post-hero { margin-top: 32px; }
.post-hero-photo { aspect-ratio: 16 / 9; overflow: hidden; background: var(--hosted-text-6); }
.post-hero img { width: 100%; height: 100%; object-fit: cover; }
.post-hero figcaption { margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--hosted-text-62); }
.prose { margin-top: 44px; font-size: 16px; line-height: 1.75; color: var(--hosted-text); }
.prose p { margin: 1.5em 0; }
.prose > :first-child, .post-lead > :first-child { margin-top: 0; }
.prose h2 { font-size: 20px; font-weight: 700; line-height: 1.33; letter-spacing: -0.025em; margin: 1.87em 0 1.07em; scroll-margin-top: 96px; }
.prose h3 { font-family: var(--hosted-font-heading); font-size: 17px; font-weight: 700; line-height: 1.5; letter-spacing: -0.025em; margin: 1.6em 0 0.6em; }
.prose h2 + h3 { margin-top: 0; }
.prose ul, .prose ol { margin: 1.25em 0; padding-left: 1.6em; }
.prose li { margin: 0.5em 0; padding-left: 0.375em; }
.prose li p { margin: 0.75em 0; }
.prose a { color: var(--hosted-link); text-decoration: underline; text-underline-offset: 2px; }
.prose strong { font-weight: 600; }
.prose blockquote { margin: 1.6em 0; padding-left: 1em; border-left: 3px solid var(--hosted-text-14); font-style: italic; color: var(--hosted-text); }
.prose table { display: block; overflow-x: auto; max-width: 100%; width: 100%; margin: 2em 0; border-collapse: collapse; font-size: 12px; line-height: 1.5; text-align: left; }
.prose thead { border-bottom: 1px solid var(--hosted-text-14); }
.prose th { font-weight: 700; vertical-align: bottom; padding: 0 0.75em 0.75em 0; letter-spacing: -0.025em; }
.prose td { vertical-align: top; padding: 0.75em 0.75em 0.75em 0; }
.prose tbody tr { border-bottom: 1px solid var(--hosted-text-8); }
.prose tbody tr:last-child { border-bottom: 0; }
.post-tldr { margin: 32px 0; border: 1px solid var(--hosted-text-14); border-left: 3px solid rgba(23, 37, 42, 0.3); border-radius: 4.2px; background: var(--hosted-box); padding: 24px 28px; }
.post-tldr-label { margin-bottom: 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(23, 37, 42, 0.7); }
.post-tldr ul { margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.625; }
.post-tldr li { margin: 0; padding: 0; }
.post-tldr li + li { margin-top: 8px; }
.post-tldr li::marker { color: var(--hosted-text-62); }
.post-figure { margin: 2em 0; }
.post-figure img { width: 100%; height: auto; }
.post-figure figcaption { margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--hosted-text-62); }
.post-faq { margin: 32px 0; border: 1px solid var(--hosted-text-14); border-radius: 4.2px; background: var(--hosted-box); padding: 8px 28px; }
.post-faq > div { padding: 16px 0; border-bottom: 1px solid var(--hosted-text-14); }
.post-faq > div:last-child { border-bottom: 0; }
.post-faq .q { margin: 0 0 6px; font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--hosted-text); }
.post-faq .a { margin: 0; font-size: 15px; line-height: 1.625; color: rgba(23, 37, 42, 0.7); }
.post-more { margin: 0 auto; width: 100%; max-width: 1008px; border-top: 1px solid var(--hosted-text-8); padding: 32px 24px; }
.post-more h2 { font-size: 24px; font-weight: 600; letter-spacing: -0.025em; }

/* the contents column */
.post-side { position: sticky; top: 80px; max-height: calc(100vh - 9rem); overflow: auto; }
.post-back { margin-bottom: 24px; display: grid; height: 36px; width: 36px; place-items: center; border-radius: 9999px; border: 1px solid var(--hosted-text-10); color: var(--hosted-text); transition: background 0.2s; }
.post-back:hover { background: var(--hosted-text-6); }
.post-back svg { width: 16px; height: 16px; }
.post-side-title { margin-bottom: 16px; font-size: 14px; font-weight: 700; line-height: 1.45; letter-spacing: -0.025em; color: var(--hosted-text); }
.post-toc { border-left: 1px solid var(--hosted-text-10); }
.post-toc a { position: relative; display: block; width: 100%; margin-bottom: 12px; padding-left: 14px; font-size: 14px; line-height: 1.4; color: var(--hosted-text-62); transition: color 0.2s; }
.post-toc a:last-child { margin-bottom: 0; }
.post-toc a:hover { color: var(--hosted-text); }
.post-toc a[aria-current="true"] { color: var(--hosted-link); font-weight: 600; }
.post-toc a[aria-current="true"]::before { content: ""; position: absolute; left: -1px; top: 2px; bottom: 2px; width: 2px; background: var(--hosted-link); }

/* ------------------------------------------------------------------ wider screens (Ryze's @3xl and xl steps) */
@media (min-width: 768px) {
  .journal { padding: 40px 40px 96px; }
  .featured { grid-template-columns: 1fr 1.35fr; gap: 56px; }
  .featured-copy { order: 0; }
  .featured-photo { order: 0; }
  .featured h1 { font-size: 32px; }
  .post-grid { padding-top: 56px; }
  .post-main h1 { font-size: 36px; }
  .post-summary { font-size: 16.5px; }
  .prose { font-size: 18px; line-height: 1.625; }
  .prose h2 { font-size: 24px; margin: 1.87em 0 1.07em; }
  .prose h3 { font-size: 20px; }
  .prose table { font-size: 13px; }
  .post-tldr ul, .post-faq .a { font-size: 15px; }
  .post-more { padding: 32px 40px; }
  .post-more h2 { font-size: 28px; }
}
@media (min-width: 1280px) {
  .post-back-link { display: none; }
  .post-grid { grid-template-columns: 1fr minmax(0, 760px) 1fr; }
  .post-side-col { display: block; justify-self: end; padding-right: 40px; width: 250px; grid-column: 1; }
  .post-main { grid-column: 2; margin: 0; max-width: none; }
}
@media (min-width: 1440px) {
  .featured h1 { font-size: 36px; }
}