:root {
  color-scheme: light;

  --palette-1: #0883a4;
  --palette-2: #c5395a;
  --palette-3: #eeac9c;

  --background:         #fcfdfd;
  --foreground:         #152428;
  --card:               #ffffff;
  --card-foreground:    #152428;
  --popover:            #ffffff;
  --popover-foreground: #152428;
  --muted:              #f7f2f3;
  --muted-foreground:   #84626a;

  --primary:               #0883a4;
  --primary-foreground:    #ffffff;
  --secondary:             #c5395a;
  --secondary-foreground:  #ffffff;
  --accent:                #eeac9c;
  --accent-foreground:     #0a0a0a;
  --destructive:           #ef4444;
  --destructive-foreground:#ffffff;

  --border: #e0e8eb;
  --input:  #e0e8eb;
  --ring:   #0aaedb;

  --chart-1: #0883a4;  --chart-2: #c5395a;  --chart-3: #eeac9c;
  --chart-4: #0883a4;  --chart-5: #c5395a;
  --sidebar: #ffffff;              --sidebar-foreground: #152428;
  --sidebar-primary: #0883a4;      --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #f7f2f3;       --sidebar-accent-foreground: #152428;
  --sidebar-border: #e0e8eb;       --sidebar-ring: #0aaedb;

  --link: #07748f;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --background:         #14191a;
    --foreground:         #f4f5f6;
    --card:               #1b2527;
    --card-foreground:    #f4f5f6;
    --popover:            #1b2527;
    --popover-foreground: #f4f5f6;
    --muted:              #372529;
    --muted-foreground:   #b3989f;

    --primary:               #24c7f5;
    --primary-foreground:    #0a0a0a;
    --secondary:             #cb4d6b;
    --secondary-foreground:  #ffffff;
    --accent:                #eeab9b;
    --accent-foreground:     #0a0a0a;
    --destructive:           #dc2626;
    --destructive-foreground:#ffffff;

    --border: #2d3e43;
    --input:  #2d3e43;
    --ring:   #24c7f5;

    --sidebar: #1b2527;            --sidebar-foreground: #f4f5f6;
    --sidebar-primary: #24c7f5;    --sidebar-primary-foreground: #0a0a0a;
    --sidebar-accent: #372529;     --sidebar-accent-foreground: #f4f5f6;
    --sidebar-border: #2d3e43;     --sidebar-ring: #24c7f5;

    --link: var(--primary);
  }
}

* { box-sizing: border-box }

body {
  background: var(--background);
  color: var(--foreground);
  font: 18px/1.65 Georgia, "Times New Roman", serif;
  max-width: 34rem;
  margin: 0 auto;
  padding: 3.5rem 1.25rem 6rem;
  -webkit-text-size-adjust: 100%;
}

h1 {
  font-size: 1.6rem; line-height: 1.2; margin: 0 0 .25rem;
  letter-spacing: -.01em;
}
h2 {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 1.05rem; font-weight: 600; margin: 2.5rem 0 .6rem;
  /* peach is 1.87:1 as text — only ever a rule or a fill */
  padding-bottom: .3rem;
  border-bottom: 2px solid var(--accent);
}
p, ul { margin: 0 0 1.1rem }

a { color: var(--link); text-decoration: underline; text-underline-offset: 2px }
a:hover { color: var(--secondary) }
a:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px }

.sub {
  color: var(--muted-foreground);
  font-style: italic;
  margin-bottom: 2rem;
}

ul.writing { list-style: none; padding: 0 }
ul.writing li {
  display: flex; gap: .9rem; padding: .5rem 0;
  border-bottom: 1px solid var(--border);
}
ul.writing time {
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
  font-size: .88rem; flex: none; padding-top: .2rem;
  min-width: 5.5rem;
}

blockquote {
  margin: 1.4rem 0; padding: .1rem 0 .1rem 1.1rem;
  border-left: 3px solid var(--primary);
  color: var(--muted-foreground);
}

code {
  font: .86em/1.5 ui-monospace, "SF Mono", Menlo, monospace;
  background: var(--muted); color: var(--foreground);
  padding: .1em .35em; border-radius: 3px;
}
pre {
  background: var(--card); color: var(--card-foreground);
  border: 1px solid var(--border); border-radius: 4px;
  padding: .9rem 1rem; overflow-x: auto;
}
pre code { background: none; padding: 0 }

footer {
  margin-top: 3.5rem; padding-top: 1.1rem;
  border-top: 1px solid var(--border);
  font-family: system-ui, -apple-system, sans-serif;
  font-size: .85rem; color: var(--muted-foreground);
}
footer a { color: var(--muted-foreground) }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important }
}