:root{
  --bg:#f7f7f4; --fg:#1b1b1a; --muted:#6c6c68; --faint:#e5e5df;
  --accent:#3f5a7d; --card:#eeeee9;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --mono:"SF Mono","JetBrains Mono",ui-monospace,"Cascadia Code",Menlo,Consolas,monospace;
  --measure:48rem;
}
html[data-theme="dark"]{
  --bg:#16171a; --fg:#e9e8e3; --muted:#9a9a94; --faint:#2a2b2f;
  --accent:#8aa4c8; --card:#1e1f23;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--serif); font-size:19px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
  transition:background .35s ease, color .35s ease;
}
a{color:inherit}

.wrap{
  max-width:var(--measure);
  margin:0 auto;
  padding:clamp(2.5rem,6vw,5rem) 1.4rem 5rem;
}

.top{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:3.2rem}
.greet{font-family:var(--mono); font-size:.74rem; letter-spacing:.02em; color:var(--muted); text-transform:lowercase}
.toggle{
  appearance:none; background:none; border:1px solid var(--faint); border-radius:999px;
  width:2.1rem; height:2.1rem; cursor:pointer; color:var(--muted); font-size:.9rem;
  display:inline-flex; align-items:center; justify-content:center; line-height:1;
  transition:color .2s ease, border-color .2s ease;
}
.toggle:hover{color:var(--fg); border-color:var(--muted)}

h1{font-size:clamp(2rem,5.5vw,2.7rem); line-height:1.08; font-weight:600; letter-spacing:-.015em; margin:0 0 .7rem}
.lede{color:var(--muted); font-size:1.06rem; margin:0 0 2.6rem; max-width:30rem}
.lede em{color:var(--fg); font-style:italic}

.hero{margin:0 0 .6rem; border-radius:6px; overflow:hidden; aspect-ratio:16/9;
  border:1px solid var(--faint);
  background:linear-gradient(160deg,#7f93ad,#3f5a7d 55%,#26313f);}
.hero img{width:100%; height:100%; object-fit:cover; display:block}
.demo-note{font-family:var(--mono); font-size:.64rem; color:var(--muted); margin:0 0 3.4rem}

section{margin-bottom:3.4rem}
.eyebrow{font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 1.1rem}
.eyebrow a{text-decoration:none}
.eyebrow a:hover{color:var(--accent)}

.list{list-style:none; margin:0; padding:0}
.list li{border-top:1px solid var(--faint)}
.list li:last-child{border-bottom:1px solid var(--faint)}
.row{display:flex; align-items:baseline; gap:1rem; text-decoration:none; padding:.85rem .2rem; position:relative}
.row .title{flex:1 1 auto}
.row .meta{font-family:var(--mono); font-size:.72rem; color:var(--muted); white-space:nowrap}
.row .arrow{position:absolute; left:-1.15rem; color:var(--accent); opacity:0; transform:translateX(-.25rem); transition:opacity .2s ease, transform .2s ease}
.row:hover .title, .row:focus-visible .title{color:var(--accent)}
.row:hover .arrow, .row:focus-visible .arrow{opacity:1; transform:translateX(0)}

.grid{display:grid; grid-template-columns:repeat(2,1fr); gap:.55rem}
.tile{aspect-ratio:4/5; border-radius:3px; overflow:hidden; border:1px solid var(--faint)}
.tile img{width:100%; height:100%; object-fit:cover; display:block}
.tile:nth-child(6n+1){background:linear-gradient(160deg,#9fc4c9,#5f97a6 60%,#3a5d73)}
.tile:nth-child(6n+2){background:linear-gradient(160deg,#93ad8f,#5f7d63 60%,#3a4f40)}
.tile:nth-child(6n+3){background:linear-gradient(160deg,#cdc19d,#9c9067 55%,#6a6040)}
.tile:nth-child(6n+4){background:linear-gradient(160deg,#9fb3c9,#6c86a6 55%,#42586f)}
.tile:nth-child(6n+5){background:linear-gradient(160deg,#b79fc9,#8069a6 55%,#4f3f6f)}
.tile:nth-child(6n+0){background:linear-gradient(160deg,#c9a79f,#a66c5f 55%,#6f4a3f)}

.viewall{display:inline-block; margin-top:1rem; font-family:var(--mono); font-size:.72rem; color:var(--muted); text-decoration:none; transition:color .2s ease}
.viewall:hover{color:var(--accent)}

.elsewhere{display:flex; flex-wrap:wrap; gap:.4rem 1.4rem}
.elsewhere a{font-family:var(--mono); font-size:.8rem; color:var(--muted); text-decoration:none; transition:color .2s ease}
.elsewhere a:hover{color:var(--accent)}
footer{margin-top:4rem; padding-top:1.4rem; border-top:1px solid var(--faint); font-family:var(--mono); font-size:.68rem; color:var(--muted)}

/* subpages: writing posts, pictures gallery */
.back{display:inline-block; margin-bottom:2.4rem; font-family:var(--mono); font-size:.72rem; color:var(--muted); text-decoration:none; transition:color .2s ease}
.back:hover{color:var(--accent)}
.post-meta{font-family:var(--mono); font-size:.72rem; color:var(--muted); margin:0 0 2.6rem}

.prose p{margin:0 0 1.3rem}
.prose h2{font-size:1.3rem; font-weight:600; letter-spacing:-.01em; margin:2.2rem 0 1rem}
.prose h3{font-size:1.08rem; font-weight:600; margin:1.8rem 0 .9rem}
.prose a{color:var(--accent); text-decoration-color:var(--faint)}
.prose blockquote{margin:1.6rem 0; padding-left:1.1rem; border-left:2px solid var(--faint); color:var(--muted); font-style:italic}
.prose ul{padding-left:1.3rem; margin:0 0 1.3rem}
.prose li{margin:0 0 .4rem}
.prose code{font-family:var(--mono); font-size:.85em; background:var(--card); padding:.1em .35em; border-radius:3px}

@media (max-width:520px){ .row .arrow{display:none} }
@media (prefers-reduced-motion: reduce){ *{transition:none !important} }
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}