/* Krina Vaghela. Plain and quiet, in the style of kiankyars.github.io.
   Colours measured from the reference: background #111111, text #e8e8e8, menu #cccccc, lines #333333, links #7db4f9. */
:root {
  --bg: #111111; --fg: #e8e8e8; --nav: #cccccc; --muted: #999999; --quote: #aaaaaa;
  --line: #333333; --bar: #414141; --link: #7db4f9; --tile: #25282b; --tile-hover: #1c2a33;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #ffffff; --fg: #111111; --nav: #333333; --muted: #666666; --quote: #555555;
  --line: #dddddd; --bar: #cccccc; --link: #0b5cc2; --tile: #f0f0f0; --tile-hover: #e3edf9;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 18px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
h1, p, ul, ol, blockquote, figure { margin: 0; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 3px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--fg); color: var(--bg); padding: 8px 14px; border-radius: 6px; }
.skip:focus { top: 12px; }
#main:focus { outline: none; }

.col { width: min(760px, 100% - 40px); margin-inline: auto; }

/* header: name, then the menu, then a thin line */
.site-head .col { padding: 38px 0 26px; border-bottom: 1px solid var(--line); }
.site-name { display: inline-block; font: 700 23px/1.2 var(--sans); color: var(--fg); letter-spacing: -.005em; }
.site-name:hover { text-decoration: none; }
.site-head ul { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 30px; margin-top: 22px; padding: 0; list-style: none; }
.site-head nav a { font: 700 21px/1.2 var(--sans); color: var(--nav); }
.site-head nav a:hover { color: var(--fg); text-decoration: none; }
.site-head nav a[aria-current="page"] { color: var(--fg); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.theme { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.theme:hover { color: var(--fg); background: var(--tile); }

main { padding: 54px 0 46px; }
h1 { font: 700 clamp(40px, 8vw, 58px)/1.1 var(--sans); letter-spacing: -.015em; margin-bottom: 30px; }
main p { margin-bottom: 1.1em; max-width: 40em; }
main ul { padding-left: 1.5em; margin-bottom: 1.1em; }
main li { margin-bottom: .8em; padding-left: .2em; }
main li > ul { margin: .8em 0 0; list-style: circle; }
.links { margin-top: 1.4em; }
.small { font-size: 15px; color: var(--muted); }
.muted { color: var(--muted); }
hr { border: 0; border-top: 1px solid var(--line); margin: 44px 0; }

/* typing lines */
.thinking { margin-top: 1.4em; color: var(--muted); }
.thinking .label { margin-right: 6px; }
.typing { color: var(--fg); }
.cursor { margin-left: 1px; color: var(--fg); animation: blink 1.05s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.typing-line { margin: -14px 0 26px; color: var(--muted); min-height: 1.6em; }
.typing-line .typing { color: var(--fg); }

/* quote (About) */
blockquote { padding-left: 30px; border-left: 3px solid var(--bar); color: var(--quote); font-style: italic; }
blockquote p { margin: 0; }
.quote-by { margin-top: 26px; }

/* blog grid */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; margin: 34px 0 0; padding: 0; list-style: none; }
.tile { display: grid; place-items: center; aspect-ratio: 1; border-radius: 3px; background: var(--tile); color: var(--fg); font-size: 16px; line-height: 1; transition: background .15s; }
a.tile:hover { background: var(--tile-hover); color: var(--fg); text-decoration: none; }
.tile.off { color: var(--muted); opacity: .55; }

/* a blog day */
.back { display: inline-block; margin-bottom: 30px; font-size: 16px; }
.post h1 { margin-bottom: 8px; }
.post-meta { font-size: 16px; color: var(--muted); margin-bottom: 26px !important; }
.post-figure { margin: 0 0 30px; }
.post-figure img { width: 100%; height: auto; border-radius: 4px; background: var(--tile); }
.post-text p { line-height: 1.7; margin-bottom: 1.1em; overflow-wrap: anywhere; max-width: none; }
.post-source { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 15px; color: var(--muted); overflow-wrap: anywhere; max-width: none !important; }
.pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 40px; font-weight: 700; }

/* extra photos inside a post */
.post-photos { margin: 6px 0 1.4em; display: grid; gap: 14px; }
.post-photos.two { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.post-photos img { width: 100%; height: auto; border-radius: 4px; background: var(--tile); }
@media (max-width: 600px) { .post-photos.two { grid-template-columns: 1fr; } }

/* art */
.art-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 38px 26px; margin: 34px 0 0; padding: 0 !important; list-style: none; align-items: start; }
.art-grid li { margin: 0; padding: 0; }
.art-grid img { width: 100%; height: auto; border-radius: 4px; background: var(--tile); }
.art-grid .small { margin: 10px 0 0; }

.site-foot .col { border-top: 1px solid var(--line); padding: 30px 0 56px; }
.site-foot p { color: var(--muted); }

@media (max-width: 600px) {
  body { font-size: 17px; }
  .site-head .col { padding-top: 28px; }
  .site-head ul { gap: 8px 22px; } .site-head nav a { font-size: 19px; } .site-name { font-size: 21px; }
  main { padding-top: 40px; }
  .art-grid { grid-template-columns: 1fr; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px; } .tile { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } .tile { transition: none; } }