@property --text {
  syntax: '<color>';
  inherits: true;
  initial-value: #1a1307;
}
@property --bg {
  syntax: '<color>';
  inherits: true;
  initial-value: #f5f0e8;
}
@property --accent {
  syntax: '<color>';
  inherits: true;
  initial-value: #8b7355;
}
@property --muted {
  syntax: '<color>';
  inherits: true;
  initial-value: #6b5c4c;
}
@property --surface {
  syntax: '<color>';
  inherits: true;
  initial-value: #ebe4d8;
}
:root {
  --text: #1a1307;
  --bg: #f5f0e8;
  --accent: #8b7355;
  --muted: #6b5c4c;
  --surface: #ebe4d8;
  --noise-opacity: 0.08;
  /* Font options - change these to test alternatives */
  --font-body: 'Inter', system-ui, sans-serif;
  --font-heading: 'Fraunces', Georgia, serif;
  /* ALT 1: --font-heading: 'Literata', Georgia, serif; */
  /* ALT 2: --font-heading: 'Newsreader', Georgia, serif; */
  /* ALT 3: --font-heading: 'Instrument Serif', Georgia, serif; */
}
:root.dark {
  --text: #f5f0e8;
  --bg: #2a231a;
  --accent: #c4a882;
  --muted: #a89888;
  --surface: #3a322a;
  --noise-opacity: 0.15;
}
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --text: #f5f0e8;
    --bg: #2a231a;
    --accent: #c4a882;
    --muted: #a89888;
    --surface: #3a322a;
    --noise-opacity: 0.15;
  }
}
* { box-sizing: border-box; margin: 0; padding: 0; }
::view-transition-group(root) {
  background: #f5f0e8;
}
:root.dark::view-transition-group(root) {
  background: #2a231a;
}
@media (prefers-color-scheme: dark) {
  :root:not(.light)::view-transition-group(root) {
    background: #2a231a;
  }
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.1s;
}
::view-transition-old(root) {
  animation: fade-out 0.08s ease-out;
}
::view-transition-new(root) {
  animation: fade-in 0.08s ease-out;
}
@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }
header { view-transition-name: header; }
footer { view-transition-name: footer; }
main { view-transition-name: main; }
html {
  overflow-y: scroll; /* Always show scrollbar to prevent layout shift */
  background: var(--bg); /* Extend bg color to full viewport */
  min-height: 100%;
}
body {
  min-height: 100vh;
  font-family: var(--font-body);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  max-width: 48rem;
  margin: 0 auto;
  padding: 2rem 1rem;
  position: relative;
}
/* Theme transition: target specific elements instead of * for better performance */
html.theme-transitioning,
html.theme-transitioning body,
html.theme-transitioning a,
html.theme-transitioning h1,
html.theme-transitioning h2,
html.theme-transitioning p,
html.theme-transitioning code,
html.theme-transitioning pre,
html.theme-transitioning nav,
html.theme-transitioning footer,
html.theme-transitioning .tag,
html.theme-transitioning .project-card,
html.theme-transitioning .theme-picker-btn,
html.theme-transitioning .theme-option,
html.theme-transitioning .social-links a,
html.theme-transitioning .copy-btn {
  transition: color 0.4s ease-out, background-color 0.4s ease-out, background 0.4s ease-out, border-color 0.4s ease-out, fill 0.4s ease-out !important;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: var(--noise-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='discrete' tableValues='0 1'/%3E%3CfeFuncG type='discrete' tableValues='0 1'/%3E%3CfeFuncB type='discrete' tableValues='0 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px;
  z-index: 9999;
  mix-blend-mode: multiply;
  view-transition-name: none;
  /* A/B comparison: uncomment to show texture only on right half
  -webkit-mask-image: linear-gradient(to right, transparent 50%, black 50%);
  mask-image: linear-gradient(to right, transparent 50%, black 50%);
  */
}
header { margin-bottom: 3rem; position: relative; z-index: 10; }
nav { display: flex; gap: 1rem; align-items: center; }
nav .spacer { flex: 1; }
@media (max-width: 480px) {
  nav { gap: 0.5rem; }
}
.theme-picker {
  position: relative;
}
.theme-picker-btn {
  border: 1px solid var(--accent);
  padding: 0.3rem 0.6rem;
  min-width: 4rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
  background: var(--surface);
  color: var(--text);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.theme-picker-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.theme-picker-options {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 0.35rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-0.5rem);
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 100;
}
.theme-picker.open .theme-picker-options {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.theme-option.hidden {
  display: none;
}
.theme-option {
  border: 1px solid var(--muted);
  padding: 0.3rem 0.6rem;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.85rem;
  white-space: nowrap;
  text-align: center;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.theme-option:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.theme-option[data-theme="light"] { background: #f5f0e8; color: #1a1307; }
.theme-option[data-theme="dark"] { background: #2a231a; color: #f5f0e8; }
.theme-option[data-theme="auto"] { background: linear-gradient(to right, #f5f0e8 50%, #2a231a 50%); color: #6b5c4c; }
nav a { color: var(--accent); }
main { margin-bottom: 3rem; }
h1 { font-family: var(--font-heading); font-weight: 600; font-size: 2.5rem; margin-bottom: 1rem; }
h1 em, h2 em { font-style: italic; font-weight: 400; }
h2 { font-family: var(--font-heading); font-weight: 500; margin: 2rem 0 1rem; }
p { margin-bottom: 1rem; }
a {
  color: var(--accent);
  text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.25s ease;
}
a:hover { background-size: 100% 1px; }
ul, ol { margin: 1rem 0 1rem 1.5rem; }
img { max-width: 100%; height: auto; border-radius: 6px; }
video { display: block; margin: 1rem auto; border-radius: 6px; width: 100%; clip-path: inset(0 round 15px); }
code { background: var(--surface); padding: 0.2em 0.4em; border-radius: 3px; font-size: 0.9em; }
pre { background: var(--surface); padding: 1rem; border-radius: 6px; overflow-x: auto; margin: 1rem 0; position: relative; white-space: pre; }
.copy-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: var(--bg);
  border: 1px solid var(--muted);
  color: var(--muted);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
pre:hover .copy-btn { opacity: 1; }
.copy-btn:hover { color: var(--accent); border-color: var(--accent); }
.copy-btn.copied { color: #2e6b2e; border-color: #2e6b2e; }
pre code { background: none; padding: 0; font-size: 0.85em; line-height: 1.5; }
/* Callout boxes */
.callout { padding: 1rem 1.25rem; border-radius: 6px; margin: 1.5rem 0; }
.callout p:last-child { margin-bottom: 0; }
.callout.warning { background: #fef3cd; border-left: 4px solid #d4a012; color: #664d03; }
:root.dark .callout.warning { background: #3d3215; border-left-color: #d4a012; color: #f5dfa3; }
@media (prefers-color-scheme: dark) {
  :root:not(.light) .callout.warning { background: #3d3215; border-left-color: #d4a012; color: #f5dfa3; }
}
/* Syntax highlighting */
.token.comment, .token.prolog { color: var(--muted); font-style: italic; }
.token.keyword, .token.tag > .token.tag { color: #8b4513; }
.token.function { color: #5a4a3a; }
.token.string, .token.attr-value { color: #2e6b2e; }
.token.number, .token.boolean { color: #6b4c3c; }
.token.operator, .token.punctuation { color: var(--text); }
.token.class-name, .token.attr-name { color: #5a4020; }
.post-meta { color: var(--muted); font-size: 0.9rem; margin-bottom: 1rem; }
.post-list { list-style: none; margin-left: 0; }
.post-list li { display: flex; justify-content: space-between; align-items: baseline; }
.post-list .post-meta { white-space: nowrap; margin-left: 1rem; }
.lighthouse-scores { display: flex; gap: 1rem; flex-wrap: wrap; margin: 2.5rem 0 1.5rem; justify-content: center; }
.lighthouse-score { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; }
.lighthouse-score svg { width: 48px; height: 48px; }
.lighthouse-score span { font-size: 0.75rem; color: var(--muted); }
.lighthouse-score circle.gauge {
  stroke-dasharray: 283;
  stroke-dashoffset: var(--offset);
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}
.tag-cloud { display: flex; flex-wrap: wrap; gap: 0.5rem; }
a.tag { display: inline-block; background: var(--surface); color: var(--text); padding: 0.25rem 0.6rem; border-radius: 4px; font-size: 0.85rem; text-decoration: none; }
html:not(.theme-transitioning) a.tag { transition: background 0.2s ease, color 0.2s ease; }
a.tag:hover { background: var(--accent); color: var(--bg); }
.tag-count { color: var(--muted); font-size: 0.75rem; }
.post-tags { margin-top: 0.5rem; }
.post-tags .tag { font-size: 0.8rem; padding: 0.2rem 0.5rem; }
.project-card { background: var(--surface); border-radius: 8px; padding: 1.25rem; margin-bottom: 1.5rem; }
.project-card h2 { margin-top: 0; margin-bottom: 0.5rem; font-size: 1.25rem; }
.project-card h2 a { text-decoration: none; }
.project-card h2 a:hover { text-decoration: underline; }
.project-card p { margin: 0; }
.project-card p:last-child { margin-bottom: 0; }
.project-card ul { margin: 0.5rem 0 0 0; padding-left: 1.25rem; }
footer { color: var(--muted); font-size: 0.9rem; border-top: 1px solid rgba(128,128,128,0.2); padding-top: 1rem; display: flex; justify-content: space-between; align-items: center; }
.social-links { display: flex; gap: 1rem; }
.social-links a { color: var(--muted); transition: color 0.2s ease; }
.social-links a:hover { color: var(--accent); }
.social-links svg { width: 20px; height: 20px; }