/*
Theme Name: Knosyn
Theme URI: https://knosyn.com
Author: knosyn
Description: Ambient, monochrome, brutalist theme for a creative + tech notebook. Mobile-first. Dark default with light toggle, drifting dust particles, hairline rules, no radius.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: knosyn
Tags: blog, one-column, custom-menu, dark-mode-support, translation-ready
*/

/* ---------------------------------------------------------------
   1. TOKENS
   Two themes, one hue. Accent is very low chroma on purpose --
   it should read as "slightly cold grey", not as blue.
--------------------------------------------------------------- */

:root,
[data-theme="dark"] {
  --bg:     oklch(0.15 0.006 265);
  --fg:     oklch(0.94 0.004 265);
  --dim:    oklch(0.58 0.006 265);
  --rule:   oklch(0.33 0.006 265);
  --accent: oklch(0.80 0.035 250);
  --veil:   oklch(0.80 0.030 250 / 0.16);
  --code-bg: oklch(0.50 0 0 / 0.06);
  --grain-blend: overlay;
  --grain-opacity: 0.07;
  --img-filter: grayscale(1) contrast(1.05) brightness(0.92);
}

[data-theme="light"] {
  --bg:     oklch(0.94 0.004 265);
  --fg:     oklch(0.17 0.006 265);
  --dim:    oklch(0.47 0.006 265);
  --rule:   oklch(0.79 0.005 265);
  --accent: oklch(0.45 0.050 250);
  --veil:   oklch(0.45 0.050 250 / 0.10);
  --code-bg: oklch(0.20 0 0 / 0.04);
  --grain-blend: multiply;
  --grain-opacity: 0.05;
  --img-filter: grayscale(1) contrast(1.02);
}

:root {
  --pad: 20px;             /* mobile gutter */
  --measure: 40em;         /* prose measure */
  --col: 720px;            /* desktop column */
  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* ---------------------------------------------------------------
   2. RESET
--------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color 600ms ease, color 600ms ease;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding-left: 1.2em; }

a { color: inherit; text-decoration: none; transition: color 220ms ease; }
a:hover, a:focus-visible { color: var(--accent); }

:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }

::selection { background: var(--accent); color: var(--bg); }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link:focus {
  position: fixed; z-index: 100; top: 8px; left: 8px;
  width: auto; height: auto; clip: auto;
  padding: 10px 14px; background: var(--fg); color: var(--bg);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
}

/* ---------------------------------------------------------------
   3. AMBIENT LAYERS
   Fixed behind everything. Pointer-events off, aria-hidden in markup.
--------------------------------------------------------------- */

.kn-ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.kn-haze {
  position: absolute;
  inset: -25%;
  background: radial-gradient(closest-side, var(--veil), transparent 70%);
  animation: kn-haze-drift 51s ease-in-out infinite;
  will-change: transform, opacity;
}

.kn-haze--b {
  animation: kn-haze-drift-b 69s ease-in-out infinite;
}

.kn-grain {
  position: absolute;
  inset: -10%;
  opacity: var(--grain-opacity);
  mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  animation: kn-grain-shift 5s steps(4) infinite;
}

/* Dust. Sized, positioned and timed by js/ambient.js; blur + easing here. */
.kn-dust i {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: var(--fg);
  opacity: 0;
  will-change: transform, opacity;
  animation-name: kn-float;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.kn-dust i[data-accent] { background: var(--accent); }

@keyframes kn-float {
  0%   { transform: translate3d(0, 40px, 0); opacity: 0; }
  12%  { opacity: var(--o, 0.5); }
  88%  { opacity: var(--o, 0.5); }
  100% { transform: translate3d(var(--dx, 12px), -160px, 0); opacity: 0; }
}

@keyframes kn-haze-drift {
  0%   { transform: translate3d(-14%, -6%, 0) scale(1.10); opacity: 0.55; }
  50%  { transform: translate3d(12%, 10%, 0)  scale(1.35); opacity: 0.90; }
  100% { transform: translate3d(-14%, -6%, 0) scale(1.10); opacity: 0.55; }
}

@keyframes kn-haze-drift-b {
  0%   { transform: translate3d(20%, 30%, 0)   scale(1.20); opacity: 0.70; }
  50%  { transform: translate3d(-18%, -12%, 0) scale(1.00); opacity: 0.35; }
  100% { transform: translate3d(20%, 30%, 0)   scale(1.20); opacity: 0.70; }
}

@keyframes kn-grain-shift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-3%, 2%); }
  50%  { transform: translate(2%, -3%); }
  75%  { transform: translate(-2%, -2%); }
  100% { transform: translate(0, 0); }
}

@keyframes kn-track-drift {
  0%   { letter-spacing: -0.055em; }
  50%  { letter-spacing: -0.030em; }
  100% { letter-spacing: -0.055em; }
}

@keyframes kn-hair-pulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}

@keyframes kn-reveal {
  from { opacity: 0; transform: translate3d(0, 18px, 0); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* Motion opt-outs: OS setting, or the in-page toggle. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .kn-haze, .kn-grain, .kn-dust i, .kn-title { animation: none !important; }
  .kn-dust i { opacity: var(--o, 0.4); }
  .kn-reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
}

[data-motion="off"] .kn-haze,
[data-motion="off"] .kn-grain,
[data-motion="off"] .kn-dust i,
[data-motion="off"] .kn-title { animation: none !important; }
[data-motion="off"] .kn-dust i { opacity: var(--o, 0.4); }

/* Scroll reveal: text arrives rather than pops. */
.kn-reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  filter: blur(6px);
}
.kn-reveal.is-in {
  animation: kn-reveal 900ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.no-js .kn-reveal { opacity: 1; transform: none; filter: none; }

/* ---------------------------------------------------------------
   4. SHELL
--------------------------------------------------------------- */

.kn-shell {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.kn-main { flex: 1 0 auto; }

.kn-wrap {
  width: 100%;
  max-width: var(--col);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* Full-bleed inside a wrapped column. */
.kn-bleed {
  margin-left: calc(var(--pad) * -1);
  margin-right: calc(var(--pad) * -1);
}

.kn-meta {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
}

.kn-rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }

.kn-hair {
  width: 42px;
  height: 1px;
  background: var(--accent);
  animation: kn-hair-pulse 12s ease-in-out infinite;
}

/* ---------------------------------------------------------------
   5. HEADER
--------------------------------------------------------------- */

.kn-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
}

.kn-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 52px;
  max-width: var(--col);
  margin: 0 auto;
  padding: 12px var(--pad) 11px;
}

.kn-brand {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.05em;
}

.kn-brand__dot { color: var(--accent); }

.kn-header__tools { display: flex; align-items: center; gap: 4px; }

.kn-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}
.kn-toggle:hover { color: var(--fg); }
.kn-toggle__off { display: none; }
[data-theme="light"] .kn-toggle__on { display: none; }
[data-theme="light"] .kn-toggle__off { display: inline; }

/* Nav: four hairline-separated cells, ~44px tall. */
.kn-nav { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }

.kn-nav ul {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  max-width: var(--col);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.kn-nav li:first-child a { padding-left: var(--pad); }

.kn-nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}

.kn-nav .current-menu-item > a,
.kn-nav .current_page_item > a,
.kn-nav .current-post-ancestor > a,
.kn-nav .kn-nav--current > a { color: var(--fg); }

/* Reading progress, single posts only. */
.kn-progress { height: 2px; background: var(--rule); }
.kn-progress__fill {
  height: 2px;
  width: 0;
  background: var(--accent);
  transform-origin: 0 50%;
}

/* ---------------------------------------------------------------
   6. HOME HERO
--------------------------------------------------------------- */

.kn-hero { padding: 56px 0 44px; }

.kn-hero__title {
  font-size: clamp(48px, 15vw, 76px);
  line-height: 0.92;
  font-weight: 700;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.kn-title { animation: kn-track-drift 26s ease-in-out infinite; }

.kn-hero__sub {
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--dim);
}

.kn-hero__desc {
  margin-top: 20px;
  max-width: 32em;
  color: var(--dim);
  text-wrap: pretty;
}

/* ---------------------------------------------------------------
   7. POST INDEX
--------------------------------------------------------------- */

.kn-list { display: flex; flex-direction: column; }

.kn-entry {
  border-top: 1px solid var(--rule);
  padding: 24px 0 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kn-entry__meta { display: flex; justify-content: space-between; gap: 12px; }

.kn-entry__title {
  font-size: clamp(28px, 8.5vw, 36px);
  line-height: 1.02;
  font-weight: 500;
  letter-spacing: -0.04em;
  text-wrap: pretty;
}

.kn-entry__excerpt { color: var(--dim); text-wrap: pretty; }

.kn-entry__thumb { overflow: hidden; }
.kn-entry__thumb img {
  width: 100%;
  filter: var(--img-filter);
  transition: filter 700ms ease, transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
.kn-entry:hover .kn-entry__thumb img { filter: none; transform: scale(1.015); }

/* Pagination */
.kn-pager {
  border-top: 1px solid var(--rule);
  padding: 22px 0 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.kn-pager a, .kn-pager .current {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 10px 13px;
  border: 1px solid var(--rule);
  color: var(--dim);
}
.kn-pager .current { color: var(--bg); background: var(--fg); border-color: var(--fg); }

.kn-empty { padding: 80px 0; color: var(--dim); }

/* ---------------------------------------------------------------
   8. SINGLE POST
--------------------------------------------------------------- */

.kn-post__head { padding: 48px 0 30px; display: flex; flex-direction: column; gap: 18px; }

.kn-post__meta { display: flex; flex-wrap: wrap; gap: 14px; }
.kn-post__meta .kn-cat { color: var(--accent); }

.kn-post__title {
  font-size: clamp(40px, 12vw, 60px);
  line-height: 0.95;
  font-weight: 700;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.kn-featured {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.kn-featured img { width: 100%; filter: var(--img-filter); }

.kn-prose {
  padding: 34px 0 0;
  max-width: var(--measure);
}

.kn-prose > * + * { margin-top: 22px; }
.kn-prose p { text-wrap: pretty; }

.kn-prose h2, .kn-prose h3, .kn-prose h4 {
  margin-top: 40px;
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dim);
}
.kn-prose h2 { font-size: 11px; }
.kn-prose h3 { font-size: 10px; }
.kn-prose h4 { font-size: 10px; letter-spacing: 0.16em; }

.kn-prose a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.kn-prose a:hover { color: var(--fg); }

.kn-prose strong { font-weight: 700; }

.kn-prose blockquote {
  border-left: 2px solid var(--accent);
  padding: 4px 0 4px 18px;
  font-size: clamp(22px, 6.5vw, 26px);
  line-height: 1.24;
  font-weight: 500;
  letter-spacing: -0.03em;
  text-wrap: pretty;
}
.kn-prose blockquote p + p { margin-top: 12px; }
.kn-prose blockquote cite {
  display: block;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 10px;
  font-style: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
}

.kn-prose pre,
.kn-prose code,
.kn-prose kbd {
  font-family: var(--mono);
  font-size: 13px;
}

.kn-prose pre {
  border: 1px solid var(--rule);
  background: var(--code-bg);
  padding: 14px 16px;
  line-height: 1.7;
  overflow-x: auto;
}

.kn-prose :not(pre) > code {
  background: var(--code-bg);
  border: 1px solid var(--rule);
  padding: 1px 5px;
}

.kn-prose hr { border: 0; border-top: 1px solid var(--rule); margin: 40px 0; }

.kn-prose figure { margin: 34px 0; }
.kn-prose img { filter: var(--img-filter); transition: filter 700ms ease; }
.kn-prose figure:hover img { filter: none; }
.kn-prose figcaption {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}

.kn-prose .alignwide,
.kn-prose .alignfull {
  margin-left: calc(var(--pad) * -1);
  margin-right: calc(var(--pad) * -1);
  max-width: none;
}

/* Tags */
.kn-tags {
  margin-top: 44px;
  border-top: 1px solid var(--rule);
  padding: 20px 0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.kn-tags a {
  border: 1px solid var(--rule);
  padding: 9px 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}
.kn-tags a:hover { border-color: var(--accent); color: var(--accent); }

/* Next post */
.kn-next {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--rule);
  padding: 26px 0 30px;
}
.kn-next__title {
  font-size: clamp(26px, 8vw, 34px);
  line-height: 1.04;
  font-weight: 500;
  letter-spacing: -0.04em;
  text-wrap: pretty;
}

/* Pages */
.kn-page__head { padding: 48px 0 24px; }
.kn-page__title {
  font-size: clamp(36px, 11vw, 54px);
  line-height: 0.96;
  font-weight: 700;
  letter-spacing: -0.05em;
}

/* Archive header */
.kn-archive__head { padding: 48px 0 26px; display: flex; flex-direction: column; gap: 14px; }
.kn-archive__title {
  font-size: clamp(36px, 11vw, 54px);
  line-height: 0.96;
  font-weight: 700;
  letter-spacing: -0.05em;
}
.kn-archive__desc { max-width: 32em; color: var(--dim); }

/* ---------------------------------------------------------------
   9. FOOTER
--------------------------------------------------------------- */

.kn-footer { border-top: 1px solid var(--rule); margin-top: 72px; }

.kn-footer__bar {
  max-width: var(--col);
  margin: 0 auto;
  padding: 20px var(--pad) 26px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* ---------------------------------------------------------------
   10. DESKTOP
   Same single column. More air, bigger display type, nothing new.
--------------------------------------------------------------- */

@media (min-width: 760px) {
  :root { --pad: 40px; }
  body { font-size: 18px; }

  .kn-header__bar { min-height: 64px; padding-top: 16px; padding-bottom: 15px; }
  .kn-brand { font-size: 19px; }
  .kn-nav a { font-size: 11px; letter-spacing: 0.16em; }

  .kn-hero { padding: 104px 0 72px; }
  .kn-hero__title { font-size: clamp(76px, 9vw, 104px); }

  .kn-entry { padding: 40px 0 44px; }
  .kn-entry__title { font-size: 44px; }

  .kn-post__head { padding: 96px 0 44px; }
  .kn-post__title { font-size: clamp(60px, 7.2vw, 84px); }
  .kn-prose { padding-top: 48px; }
  .kn-prose > * + * { margin-top: 26px; }

  .kn-page__title, .kn-archive__title { font-size: 64px; }
  .kn-footer { margin-top: 120px; }
}

@media (min-width: 1180px) {
  :root { --col: 800px; }
  /* Metadata steps into the left margin -- the only desktop-only move. */
  .kn-entry { display: grid; grid-template-columns: 120px 1fr; gap: 0 32px; }
  .kn-entry__meta { flex-direction: column; gap: 6px; justify-content: flex-start; }
  .kn-entry__title, .kn-entry__excerpt, .kn-entry__thumb { grid-column: 2; }
  .kn-entry__title { margin-bottom: 12px; }
  .kn-entry__excerpt + .kn-entry__thumb { margin-top: 16px; }
}

/* ---------------------------------------------------------------
   11. PRINT
--------------------------------------------------------------- */

@media print {
  .kn-ambient, .kn-header, .kn-footer, .kn-tags, .kn-next { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .kn-prose img { filter: grayscale(1); }
}