@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;600;700&family=Manrope:wght@400;500;600;650;700;750;800&display=swap');
:root{color-scheme:dark;--bg:#101411;--surface:#191f1a;--raised:#202822;--text:#ecf0e8;--muted:#a0ac9f;--line:#303b30;--accent:#d2f79c;--ink:#1b2815;font-family:'DM Sans',system-ui,sans-serif;font-size:16px;background:var(--bg);color:var(--text)}*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}a:hover{color:var(--accent)}button,input,textarea,select{font:inherit}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}:focus-visible{outline:2px solid var(--accent);outline-offset:5px}button{cursor:pointer}button:disabled{opacity:.6;cursor:wait}button,a{transition:background .18s,color .18s,border-color .18s}p{line-height:1.8}h1,h2,h3{font-family:Manrope,system-ui,sans-serif;letter-spacing:-.045em}h1{font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.17}h2{line-height:1.35}.wrap{width:min(1080px,calc(100% - 64px));margin-inline:auto}.site-header{height:112px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:8px;font-weight:600;font-size:17px;letter-spacing:-.03em}.brand-mark{height:39px;width:39px;border:1px solid var(--line);border-radius:12px;display:grid;place-content:center;font-size:28px;display:inline-block;text-align:center;margin-right:6px;font-weight:800;line-height:34px}.brand-mark span{color:var(--accent)}.brand>.muted{font-weight:400}.muted{color:var(--muted)}nav{display:flex;gap:28px;font-size:14px}nav a{color:var(--muted)}nav a:first-child{color:var(--text)}.hero{position:relative;padding:94px 0 84px;overflow:hidden}.eyebrow{font-size:11px;letter-spacing:.19em;font-weight:700;color:var(--accent);display:flex;align-items:center;gap:10px}.status-dot{width:6px;height:6px;background:var(--accent);border-radius:50%;box-shadow:0 0 0 5px #d2f79c0d}.hero h1{font-size:clamp(3.5rem,7vw,6rem);font-weight:650;margin:28px 0 22px;line-height:1.05;letter-spacing:-.07em}.hero em{font-style:normal;color:var(--accent)}.hero p{color:var(--muted);font-size:16px;margin:0 0 22px;line-height:1.9}.text-link{font-size:14px;font-weight:500}.text-link span{margin-left:14px}.hero-art{position:absolute;right:20px;top:120px;width:290px;height:290px;display:grid;place-items:center}.orbit{position:absolute;border:1px solid #a2bc7240;border-radius:50%;width:230px;height:230px}.orbit.one{transform:rotate(35deg) scaleX(.48)}.orbit.two{transform:rotate(-35deg) scaleX(.48)}.orbit.three{transform:rotate(90deg) scaleX(.48)}.art-star{font-size:96px;color:var(--accent);font-weight:400;text-shadow:0 0 70px #b3ea5640}.art-label{position:absolute;bottom:0;font-family:monospace;font-size:9px;letter-spacing:.15em;color:var(--muted)}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);padding-bottom:20px}.section-heading h2{font-size:23px;font-weight:600;margin:0}.section-heading h2 span{color:var(--accent);margin-left:8px}.section-heading>.muted{font-size:12px}.filters{display:flex;flex-wrap:wrap;gap:9px;margin:24px 0 10px}.filters a{padding:9px 17px;border:1px solid var(--line);border-radius:100px;color:var(--muted);font-size:12px}.filters a.active{color:var(--ink);background:var(--accent);border-color:var(--accent)}.filters a:hover:not(.active){border-color:var(--muted);color:var(--text)}.post-card{padding:34px 0 32px;border-bottom:1px solid var(--line)}.post-meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;color:var(--muted);font-size:12px}.post-card h2{font-weight:600;font-size:clamp(22px,3vw,29px);margin:13px 0 10px}.post-card h2 a{display:flex;justify-content:space-between;gap:30px}.card-arrow{font-size:24px;font-weight:400;color:var(--muted)}.post-card:hover .card-arrow{color:var(--accent)}.post-card p{font-size:14px;color:var(--muted);max-width:850px;margin:0 0 18px}.card-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px}.tags{display:flex;gap:8px;flex-wrap:wrap}.tag{display:inline-block;font-size:10px;letter-spacing:.02em;color:#bccbab;padding:5px 9px;background:var(--raised);border-radius:5px;line-height:1.4}.stats{color:var(--muted);font-size:11px;white-space:nowrap}.pagination{display:flex;justify-content:center;align-items:center;gap:28px;padding:32px 0;font-size:13px}.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:12px 20px;border:1px solid var(--accent);background:var(--accent);color:var(--ink);border-radius:7px;font-size:13px;font-weight:600;line-height:1.4}.button:hover{background:#e0ffb8;color:var(--ink)}.button.secondary{background:transparent;border-color:var(--line);color:var(--text)}.button.secondary:hover,.button[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}footer{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding:28px 0 38px;margin-top:65px!important;color:var(--muted);font-size:11px}footer div{display:flex;gap:24px}.back{display:inline-block;color:var(--muted);font-size:13px;margin:42px 0 24px}.article{max-width:790px;margin:auto}.article-header{padding:20px 0 35px;border-bottom:1px solid var(--line);margin-bottom:38px}.article-header h1{font-size:clamp(2.2rem,5vw,3.5rem);margin:22px 0;overflow-wrap:anywhere}.dek{color:var(--muted);font-size:18px}.author-avatar{background:var(--raised);color:var(--accent);border-radius:50%;width:30px;height:30px;display:grid;place-items:center;font-weight:700}.prose{line-height:1.95;font-size:16px;overflow-wrap:anywhere;color:#dce3d6}.prose h1,.prose h2,.prose h3,.prose h4{color:var(--text);margin:1.7em 0 .7em;line-height:1.35}.prose h1{font-size:2rem}.prose h2{font-size:1.65rem}.prose h3{font-size:1.3rem}.prose p{margin:1.3em 0}.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}.prose img,.prose video{max-width:100%;height:auto;border-radius:8px}.prose pre{background:#080c09;border:1px solid var(--line);padding:22px;border-radius:9px;overflow:auto;line-height:1.7;font-size:13px}.prose code{font-family:ui-monospace,SFMono-Regular,monospace;font-size:.87em;background:var(--raised);padding:2px 5px;border-radius:4px}.prose pre code{background:transparent;padding:0;font-size:inherit}.prose blockquote{border-left:2px solid var(--accent);margin:28px 0;padding:0 24px;color:var(--muted)}.prose table{border-collapse:collapse;display:block;overflow:auto}.prose td,.prose th{border:1px solid var(--line);padding:10px}.prose hr{border:0;border-top:1px solid var(--line);margin:36px 0}.article-end{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:32px 0;border-top:1px solid var(--line);margin-top:48px}.comments{max-width:790px;margin:48px auto}.comments h2{font-size:21px}.comment-form{padding:26px 0}.comment-form>label:first-of-type{max-width:360px}label{display:block;font-size:13px;color:var(--text);margin-bottom:20px}input:not([type=checkbox]),textarea,select{display:block;width:100%;margin-top:9px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--text);padding:12px 14px;min-width:0}textarea{resize:vertical;line-height:1.7}input::placeholder,textarea::placeholder{color:#788474}select{width:auto}small{color:var(--muted);font-size:12px;line-height:1.6}.form-footer{display:flex;align-items:center;justify-content:space-between;gap:20px}.form-footer label{margin:0}.comment{border-top:1px solid var(--line);padding:22px 0;scroll-margin-top:25px}.comment>div{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:13px}.comment strong .tag{margin-left:10px}.comment time{font-size:11px;color:var(--muted)}.comment p,.moderation p{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px}.reply-parent{display:block;font-size:12px;color:var(--accent);white-space:normal;margin-bottom:10px}.admin{max-width:980px}.admin-heading{padding:56px 0 28px}.admin-heading h1{margin:15px 0 25px}.toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:24px;font-size:14px}.toolbar>.button{margin-left:auto}.panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:28px;margin:24px 0}.panel h2{font-size:22px;margin:0 0 24px}.admin-row{display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);padding:18px 0;font-size:14px}.admin-row small{display:block;margin-top:6px}.text-button{border:0;background:none;color:var(--muted);padding:0;font-size:13px}.text-button:hover{color:var(--accent)}.danger{color:#f2a799}.inline-form{display:flex;align-items:end;gap:14px}.inline-form label{margin:0;flex:1}.tag-admin{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}.tag-admin form{display:flex;gap:14px;background:var(--raised);padding:10px 14px;border-radius:6px;font-size:13px}.moderation{border-top:1px solid var(--line);padding:22px 0}.moderation>strong{display:block;margin-top:10px}.two-columns{display:grid;grid-template-columns:1fr 1fr;gap:20px}fieldset{border:1px solid var(--line);border-radius:8px;padding:16px;margin:0 0 24px}legend{font-size:13px;padding:0 5px}.tag-options{display:flex;flex-wrap:wrap;gap:15px}.tag-options label{display:flex;align-items:center;gap:8px;margin:0}input[type=checkbox]{accent-color:var(--accent);width:17px;height:17px}.upload{border:1px dashed var(--line);border-radius:8px;padding:16px}.upload input{border:0;background:transparent;padding:8px 0}.editor-tabs{display:flex;align-items:center;justify-content:space-between;margin:22px 0 12px;font-size:14px}#markdown{font-family:ui-monospace,SFMono-Regular,monospace;font-size:13px}.preview{border:1px solid var(--line);border-radius:8px;padding:24px;margin:24px 0}.empty{padding:70px 0;text-align:center}.empty p{color:var(--muted)}.honeypot{position:absolute;left:-10000px}.sr-only,.skip:not(:focus){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip:focus{position:fixed;top:12px;left:12px;z-index:10;padding:14px;background:var(--accent);color:var(--ink)}[hidden]{display:none!important}#feed-status:empty,#interaction-status:empty,[data-comment-status]:empty,#editor-status:empty{display:none}
@media(max-width:760px){.wrap{width:calc(100% - 36px)}.site-header{height:84px}.brand>.muted{display:none}nav{gap:16px;font-size:12px}.hero{padding:58px 0}.hero h1{font-size:4rem}.hero-art{right:-110px;top:60px;opacity:.35;z-index:-1}.hero p{max-width:420px}.desktop{display:none}.card-bottom{align-items:flex-start}.stats{font-size:10px}.post-card{padding:28px 0}.section-heading>.muted{font-size:10px}.panel{padding:18px}.two-columns{grid-template-columns:1fr;gap:0}.form-footer{align-items:flex-start;flex-wrap:wrap}.comments>.section-heading{align-items:flex-start;flex-direction:column}.article-end{align-items:flex-start;flex-direction:column}footer{flex-direction:column;gap:16px}.admin-heading h1{font-size:2.5rem}.prose pre{padding:14px}.inline-form{flex-wrap:wrap}.hero-art .art-label{display:none}}

.comment-reply{margin-left:28px;padding-left:20px;border-left:2px solid var(--line)}
.comment-reply .reply-parent{color:var(--muted);font-size:11px;margin-bottom:8px}
.comment .text-button{margin-top:4px}.comment>.text-button{margin-right:18px}
.edit-dialog{width:min(560px,calc(100% - 32px));padding:0;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--text);box-shadow:0 24px 80px #0007}.edit-dialog::backdrop{background:#0009}.edit-dialog form{padding:24px}.edit-dialog h2{margin:0 0 18px;font-size:1.25rem}.edit-dialog textarea{margin:0;min-height:150px}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.comment-thread>.thread-item>.comment{border-top:1px solid var(--line)}
.comment-children{margin-left:28px;padding-left:20px;border-left:2px solid var(--line)}
.comment-children .comment{border-top:0;padding:16px 0}
.comment-children>.thread-item+.thread-item>.comment{border-top:1px solid var(--line)}
.comment-children .comment-children{margin-left:18px;padding-left:16px}
@media(max-width:760px){.comment-reply{margin-left:12px;padding-left:14px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Minimal journal theme */
:root,
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121317;
  --surface: #181a20;
  --raised: #20232a;
  --text: #e8e9ed;
  --muted: #a7a9b2;
  --line: #292c33;
  --accent: #b9c8ff;
  --ink: #121317;
}
html[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #f7f7f8;
  --raised: #efeff1;
  --text: #202124;
  --muted: #686b73;
  --line: #e3e4e8;
  --accent: #315fa8;
  --ink: #ffffff;
}
html { background: var(--bg); scroll-behavior: smooth; }
body { min-height: 100vh; background: var(--bg); color: var(--text); }
.wrap { width: min(1180px, calc(100% - 64px)); }
.site-header { height: 100px; }
.brand { gap: 12px; font-size: 17px; }
.brand-mark {
  width: 38px;
  height: 38px;
  margin: 0;
  border-radius: 10px;
  font-size: 25px;
  line-height: 34px;
}
.site-header nav { align-items: center; gap: 28px; font-size: 15px; }
.site-header nav a { color: var(--muted); }
.site-header nav a:hover { color: var(--text); }
.nav-separator { width: 1px; height: 22px; background: var(--line); }
.theme-toggle {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--muted);
  font-size: 23px;
  line-height: 1;
}
.theme-toggle:hover { color: var(--text); }
.theme-moon { display: none; }
html[data-theme="light"] .theme-sun { display: none; }
html[data-theme="light"] .theme-moon { display: inline; }
.home-intro {
  padding: 128px 0 120px;
  max-width: 720px;
}
.home-intro h1 {
  margin: 0 0 18px;
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  font-weight: 650;
  letter-spacing: -.06em;
}
.home-intro p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.65;
}
.post-index { scroll-margin-top: 28px; }
.post-index .section-heading { padding-bottom: 18px; }
.post-index .section-heading h2 {
  font-size: 1.45rem;
  font-weight: 550;
  letter-spacing: -.035em;
}
.filters { margin: 20px 0 12px; gap: 8px; }
.filters a {
  padding: 7px 12px;
  background: transparent;
  font-size: 12px;
}
.filters a.active {
  color: var(--text);
  background: var(--raised);
  border-color: var(--raised);
}
.post-card { padding: 24px 0 20px; }
.post-card h2 { margin: 0; font-family: inherit; font-size: 1.08rem; font-weight: 450; letter-spacing: -.015em; }
.post-card h2 a { align-items: baseline; }
.post-card h2 time {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: .86rem;
  font-weight: 400;
  letter-spacing: 0;
}
.post-card:hover h2 a > span:first-child { color: var(--accent); }
.card-bottom { margin-top: 10px; }
.tag {
  padding: 0;
  background: transparent;
  color: var(--muted);
  font-size: .72rem;
}
.tag::before { content: "#"; }
.post-reading-time { color: var(--muted); font-size: .72rem; }
.prose { color: var(--text); }
.prose pre { background: var(--surface); }
.button { border-color: var(--text); background: var(--text); color: var(--bg); }
.button:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.button.secondary { background: transparent; border-color: var(--line); color: var(--text); }
.button.secondary:hover, .button[aria-pressed=true] { color: var(--accent); border-color: var(--accent); }
footer { margin-top: 90px !important; }
.article, .comments { max-width: 940px; }

@media (max-width: 760px) {
  .wrap { width: calc(100% - 36px); }
  .site-header { height: 78px; }
  .brand { font-size: 16px; }
  .brand-mark { font-size: 24px; }
  .site-header nav { gap: 16px; font-size: 13px; }
  .site-header nav a[href="/#posts"] { display: none; }
  .home-intro { padding: 84px 0 82px; }
  .home-intro h1 { font-size: 2.8rem; }
  .post-card h2 a { display: block; }
  .post-card h2 time { display: block; margin-top: 7px; }
  .card-bottom { align-items: baseline; }
}

/* Public reading experience on phones */
@media (max-width: 640px) {
  body { overflow-x: hidden; }
  main.wrap:not(.admin) { width: calc(100% - 32px); }

  main:not(.admin) .home-intro { padding: 68px 0 64px; }
  main:not(.admin) .home-intro h1 {
    margin-bottom: 14px;
    font-size: clamp(2.35rem, 13vw, 3.1rem);
    line-height: 1.05;
  }
  main:not(.admin) .home-intro p {
    max-width: 32rem;
    font-size: 1.05rem;
    line-height: 1.6;
  }

  main:not(.admin) .section-heading { align-items: flex-start; }
  main:not(.admin) .filters {
    margin: 18px -16px 4px;
    padding: 0 16px 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  main:not(.admin) .filters::-webkit-scrollbar { display: none; }
  main:not(.admin) .filters a { flex: 0 0 auto; }
  main:not(.admin) .post-card { padding: 22px 0; }
  main:not(.admin) .post-card h2 { font-size: 1.08rem; line-height: 1.5; }
  main:not(.admin) .post-card h2 a { gap: 8px; }
  main:not(.admin) .post-card h2 time { font-size: .78rem; }
  main:not(.admin) .card-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
  main:not(.admin) .stats { white-space: normal; }

  main:not(.admin) .back { margin: 28px 0 16px; }
  main:not(.admin) .article-header { margin-bottom: 28px; padding-bottom: 26px; }
  main:not(.admin) .article-header h1 {
    margin: 16px 0;
    font-size: clamp(2rem, 11vw, 2.8rem);
    line-height: 1.12;
  }
  main:not(.admin) .dek { font-size: 1rem; line-height: 1.7; }
  main:not(.admin) .prose { font-size: 1rem; line-height: 1.8; }
  main:not(.admin) .prose h1 { font-size: 1.7rem; }
  main:not(.admin) .prose h2 { font-size: 1.4rem; }
  main:not(.admin) .prose h3 { font-size: 1.2rem; }
  main:not(.admin) .prose pre {
    max-width: 100%;
    margin-inline: 0;
    padding: 14px;
    font-size: .78rem;
    border-radius: 7px;
  }
  main:not(.admin) .prose blockquote { margin: 24px 0; padding-left: 16px; }
  main:not(.admin) .prose table { max-width: 100%; }
  main:not(.admin) .article-end { gap: 16px; }

  main:not(.admin) .comments { margin-top: 36px; }
  main:not(.admin) .comment-form { padding: 20px 0; }
  main:not(.admin) .comment-form > label:first-of-type { max-width: none; }
  main:not(.admin) .form-footer { width: 100%; }
  main:not(.admin) .form-footer .button { width: 100%; }
  main:not(.admin) .comment > div {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
  main:not(.admin) .comment-children { margin-left: 8px; padding-left: 12px; }
  main:not(.admin) .comment-children .comment-children { margin-left: 6px; padding-left: 10px; }
}
