@import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Shantell+Sans:ital,wght@0,300..800;1,300..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap");

:root {
  --blog-red: rgb(176, 51, 51);
  --bg-body: #eee;
  --bg-secondary: #fff;
  --text-primary: #1f2937;
  --text-secondary: #4b5563;
  --text-muted: #6b7280;
  --border-color: #d1d5db;
  color-scheme: light;
}

html.dark {
  --blog-red: rgb(220, 80, 80);
  --bg-body: #2a1f18;
  --bg-secondary: #3d2f26;
  --text-primary: #e5e5e5;
  --text-secondary: #b8aaa0;
  --text-muted: #93857c;
  --border-color: #5b493e;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg-body);
  color: var(--text-primary);
  font-family: "Fira Sans", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  transition: background-color .3s, color .3s;
}
a { color: inherit; text-decoration: none; }
a[href^="http"] { color: var(--blog-red); text-decoration: underline; }
button, input, textarea { font: inherit; }
button { color: inherit; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
img { display: block; max-width: 100%; height: auto; margin: 1.5rem auto; border-radius: .5rem; }
p, ul, ol { margin-top: 0; margin-bottom: 2rem; }
hr { margin: 2rem 0; padding-top: 1.25rem; border: 0; border-top: 1px solid var(--border-color); }

.site-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  width: min(100%, 1024px);
  margin-inline: auto;
  padding-inline: 1rem;
}
.site-header { position: relative; text-align: right; }
.site-title { margin: 1rem 0 .2rem; font-family: "Libre Baskerville", serif; font-size: clamp(1.7rem, 5vw, 2.35rem); font-weight: 700; line-height: 1.2; }
.site-caption { color: var(--text-secondary); font-family: "Shantell Sans", sans-serif; font-size: .8rem; }
.site-underline { display: block; width: 100%; height: 20px; fill: var(--blog-red); stroke: var(--blog-red); stroke-width: 2; transform: scaleX(0); transform-origin: left; animation: underline-reveal .8s ease-in-out forwards; }
@keyframes underline-reveal { to { transform: scaleX(1); } }
.site-nav { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; margin-top: .75rem; font-family: "Fira Sans", sans-serif; }
.site-nav a { padding: .25rem 0; font-size: 1.05rem; font-weight: 600; opacity: .2; transition: opacity .2s, color .2s; }
.site-nav a:hover, .site-nav a:focus-visible, .site-nav a[aria-current="page"] { opacity: 1; }
.theme-toggle { display: inline-flex; align-items: center; gap: .375rem; min-height: 32px; padding: .375rem .625rem; border: 1px solid #404040; border-radius: .25rem; background: #171717; color: #f5f5f5; font-family: "Fira Sans", sans-serif; font-size: .75rem; font-weight: 500; line-height: 1; cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.theme-toggle:hover, .theme-toggle:focus-visible { border-color: var(--blog-red); box-shadow: 0 0 8px rgb(176 51 51 / 40%); outline: none; }
.theme-icon { width: .875rem; height: .875rem; fill: currentColor; }
.theme-icon-sun { display: none; }
html.dark .theme-toggle { border-color: var(--border-color); background: var(--bg-body); color: var(--text-primary); }
html.dark .theme-icon-moon { display: none; }
html.dark .theme-icon-sun { display: block; }

.page-content { min-width: 0; margin-bottom: 2.5rem; text-align: justify; }
.page-content h1, .page-content h2, .page-content h3, .page-content h4 { font-family: "Fira Sans", sans-serif; font-weight: 700; }
.page-title { margin: .8rem 0 1.25rem; font-size: clamp(1.3rem, 4vw, 1.65rem); line-height: 1.35; }
.page-subtitle { margin: -.85rem 0 1.25rem; color: var(--text-secondary); font-size: 1rem; font-style: italic; line-height: 1.5; text-align: left; }
.section-heading { margin: 1rem 0 1.5rem; font-size: clamp(1.25rem, 4vw, 1.5rem); }
.content-heading { margin: 2.5rem 0 1rem; font-size: 1.25rem; }
.blog-post { border-top: 1px solid var(--border-color); padding-top: 1.25rem; line-height: 1.75; }
.about-copy { border-top: 0; padding-top: 0; }
.blog-post h1, .blog-post h2 { margin: 2rem 0 1rem; font-size: 1.4rem; }
.blog-post h3 { margin: 1.5rem 0 1rem; color: var(--blog-red); font-size: 1.12rem; }
.blog-post h4 { margin: 1.5rem 0 1rem; border-bottom: 2px solid var(--blog-red); font-size: 1.08rem; }
.blog-post li { margin: 0 0 .5rem 1rem; }
blockquote { margin: 1.5rem 0; padding-left: 1rem; border-left: 3px solid var(--blog-red); font-family: "Shantell Sans", sans-serif; }
blockquote.highlight { padding: 1rem; color: var(--blog-red); font-family: "Fira Sans", sans-serif; opacity: .85; }
span.line { display: block; margin-bottom: .5rem; }
.handdrawn-underline { position: relative; display: inline-block; }
.handdrawn-underline::after { content: ""; position: absolute; z-index: -1; left: 0; bottom: 0; width: 100%; height: 4px; background: var(--blog-red); transform: rotate(-1deg); opacity: .75; }

.post-list { margin: 0; padding: 0; list-style: none; }
.list-item { margin-top: .65rem; padding-bottom: .65rem; border-bottom: 1px solid var(--border-color); }
.post-link { display: block; font-size: .94rem; line-height: 1.35; }
.post-link:hover, .post-link:focus-visible { color: var(--blog-red); }
.post-link h3 { margin: 0; font-size: inherit; font-weight: 600; line-height: inherit; }
.metadata { display: flex; flex-direction: column; justify-content: space-between; gap: .6rem; margin-bottom: .5rem; }
.tags { display: flex; flex-wrap: wrap; gap: .25rem .5rem; }
.tag, .post-date { color: var(--blog-red); font-family: "Fira Sans", sans-serif; font-size: .78rem; }
.post-list .metadata { gap: .35rem; margin: .3rem 0 0; }
.post-list .tags { gap: .15rem .4rem; }
.post-list .tag, .post-list .post-date { font-size: .7rem; line-height: 1.45; }
.load-more-wrap { display: flex; justify-content: center; margin: 1.1rem 0 .75rem; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 38px; padding: .45rem .8rem; border: 1px solid var(--border-color); border-radius: .35rem; background: transparent; font-family: "Fira Sans", sans-serif; font-weight: 400; cursor: pointer; transition: color .2s, border-color .2s, background-color .2s; }
.button:hover:not(:disabled), .button:focus-visible { border-color: var(--blog-red); color: var(--blog-red); }
.button-primary { border-color: var(--blog-red); background: var(--blog-red); color: white; }
.button-primary:hover:not(:disabled) { border-color: #8f2828; background: #8f2828; color: white; }
.button-primary:focus-visible { border-color: var(--blog-red); background: var(--blog-red); color: white; outline: none; box-shadow: 0 0 0 3px rgb(176 51 51 / 30%); }
.button-primary:disabled { opacity: .5; cursor: not-allowed; }
[hidden] { display: none !important; }

.subscription, .engagement { margin: 2.5rem 0; padding: 2rem 0; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); text-align: center; }
.page-content > .subscription:first-child { margin-top: 1rem; padding-top: 0; border-top: 0; }
.subscription h2, .engagement h3, .connect h3 { margin: 0 0 1rem; }
.subscription p, .engagement p { color: var(--text-secondary); font-size: .9rem; text-align: center; }
.subscribe-form { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: .75rem; }
.subscribe-form input { min-width: 0; min-height: 42px; padding: .55rem .75rem; border: 1px solid var(--border-color); border-radius: .375rem; background: var(--bg-secondary); color: var(--text-primary); transition: border-color .2s, box-shadow .2s; }
.subscribe-form input:focus { border-color: var(--blog-red); outline: none; box-shadow: 0 0 0 3px rgb(176 51 51 / 20%); }
.subscribe-form .button-primary { min-height: 42px; padding-inline: 1.5rem; border-radius: .375rem; }
.form-status { min-height: 1.5rem; margin: .7rem 0 0 !important; color: var(--blog-red) !important; }
.share-buttons, .social-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.share-buttons { margin-bottom: 1.5rem; }
.share-button { color: var(--text-secondary) !important; font-size: .75rem; text-decoration: none !important; }
.share-button svg, .rss-link svg { width: .875rem; height: .875rem; flex: 0 0 auto; fill: currentColor; }
.share-button:hover, .share-button:focus-visible, .share-button.is-copied { color: var(--blog-red) !important; background: var(--bg-secondary); }
.rss-link { display: inline-flex; align-items: center; gap: .3rem; color: var(--text-primary) !important; font-size: 1rem; font-weight: 600; text-decoration: none !important; transition: color .2s; }
.rss-link:hover, .rss-link:focus-visible { color: var(--text-secondary) !important; }
.connect { margin: 2rem 0; text-align: center; }
.connect h3 { margin-bottom: 1rem; font-size: 1.125rem; line-height: 1.5; }
.social-button { min-height: 32px; padding: .375rem .625rem; gap: .375rem; border-radius: .25rem; color: var(--blog-red) !important; font-size: .75rem; line-height: 1; text-decoration: none !important; }
.social-button svg { width: .875rem; height: .875rem; flex: 0 0 auto; fill: currentColor; }
.social-button .social-label { text-decoration: underline; text-underline-offset: 1px; }
.social-button:hover, .social-button:focus-visible { background: var(--bg-secondary); }

.blog-post pre { overflow-x: auto; margin: 0 0 1.5rem; padding: 1rem; border: 1px solid var(--border-color); background: var(--bg-secondary); }
.blog-post code { font-family: "Fira Code", monospace; font-size: .84rem; }
.blog-post :not(pre) > code { padding: .1rem .25rem; background: var(--bg-secondary); }
.hljs-comment, .hljs-quote { color: #6a737d; font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-type { color: #d73a49; }
.hljs-string, .hljs-attr, .hljs-variable { color: #005cc5; }
.hljs-number, .hljs-literal { color: #005cc5; }
.hljs-title, .hljs-section { color: #6f42c1; font-weight: 700; }
.dark .hljs-comment, .dark .hljs-quote { color: #8b949e; }
.dark .hljs-keyword, .dark .hljs-selector-tag, .dark .hljs-type { color: #ff7b72; }
.dark .hljs-string, .dark .hljs-attr, .dark .hljs-variable { color: #a5d6ff; }
.dark .hljs-number, .dark .hljs-literal { color: #79c0ff; }
.dark .hljs-title, .dark .hljs-section { color: #d2a8ff; }

.short-text { white-space: pre-wrap; }
.project-image { width: min(75%, 760px); }
.caption-note { color: var(--text-secondary); font-family: "Shantell Sans", sans-serif; font-size: .85rem; text-align: center; }
.reading-state { color: var(--text-secondary); text-align: center; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .35rem; margin-bottom: 2rem; }
.calendar-grid h3 { grid-column: 1 / -1; margin: 1.5rem 0 .5rem; color: var(--blog-red); font-family: "Libre Baskerville", serif; }
.calendar-day { min-height: 3.5rem; padding: .35rem; border: 1px solid var(--border-color); border-radius: .25rem; background: transparent; text-align: left; opacity: .55; }
.calendar-day:hover, .calendar-day:focus-visible, .calendar-day.today { border-color: var(--blog-red); color: var(--blog-red); opacity: 1; }

.not-found { padding: 4rem 0; text-align: center; }
.not-found p { text-align: center; }

/* The public blog intentionally omits the docs-only local Codex workflow. */
.ot-annotator-bulk, .ot-annotator-codex { display: none !important; }

@media (min-width: 768px) {
  .site-shell { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem; padding-inline: 1.5rem; }
  .site-header, .page-content, .full-width { grid-column: 1 / -1; }
  .site-title { margin-top: 1.25rem; }
  .site-nav { position: absolute; top: 3rem; left: 0; flex-direction: row; gap: 2rem; margin: 0; }
  .site-nav a { font-size: 1.125rem; }
  .metadata { flex-direction: row; gap: 1rem; }
  .subscribe-form { flex-direction: row; }
  .subscribe-form input { width: 20rem; }
}

@media (max-width: 640px) {
  .page-content { text-align: left; }
  p, li { text-align: left; }
  .calendar-day { min-height: 2.5rem; padding: .2rem; font-size: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}