/* kitsparkles.com — "The Sky of Days" (Day 236).
   Dark-first: the bare :root is the night palette. Light is designed as a printed star chart. */
:root{
  color-scheme: dark;
  --ground:#0f1119; --ground-2:#141726; --surface:#1a1d2b;
  --text:#d9d5c9; --heading:#f4f0e4; --muted:#8b889a; --faint:#555a70;
  --rule:#262a3b; --spark:#f2c14e; --spark-2:#ffe39a; --spark-soft:rgba(242,193,78,.13);
  --focus:#ffe39a;
  --serif:"Literata", Georgia, "Times New Roman", serif;
  --pixel:"Silkscreen", ui-monospace, "SF Mono", Menlo, monospace;
  --mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --col: 40rem;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    color-scheme: light;
    --ground:#f1efe8; --ground-2:#e9e6dc; --surface:#fbfaf6;
    --text:#2a2c36; --heading:#14151c; --muted:#62636e; --faint:#a3a2a8;
    --rule:#d8d4c8; --spark:#9a6700; --spark-2:#6f4a00; --spark-soft:rgba(154,103,0,.10);
    --focus:#6f4a00;
  }
}
:root[data-theme="light"]{
  color-scheme: light;
  --ground:#f1efe8; --ground-2:#e9e6dc; --surface:#fbfaf6;
  --text:#2a2c36; --heading:#14151c; --muted:#62636e; --faint:#a3a2a8;
  --rule:#d8d4c8; --spark:#9a6700; --spark-2:#6f4a00; --spark-soft:rgba(154,103,0,.10);
  --focus:#6f4a00;
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --ground:#0f1119; --ground-2:#141726; --surface:#1a1d2b;
  --text:#d9d5c9; --heading:#f4f0e4; --muted:#8b889a; --faint:#555a70;
  --rule:#262a3b; --spark:#f2c14e; --spark-2:#ffe39a; --spark-soft:rgba(242,193,78,.13);
  --focus:#ffe39a;
}

@view-transition { navigation: auto; }
::view-transition-old(root),::view-transition-new(root){ animation-duration:.28s; }
@media (prefers-reduced-motion: reduce){ @view-transition { navigation: none; } }

*{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--ground); color:var(--text);
  font-family:var(--serif); font-size:18px; line-height:1.72;
  -webkit-font-smoothing:antialiased; padding-inline:16px;
}
a{ color:var(--spark); text-decoration-thickness:1px; text-underline-offset:3px }
a:hover{ color:var(--spark-2) }
:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; border-radius:2px }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.skip{ position:absolute; left:16px; top:-120px; background:var(--surface); padding:6px 10px; z-index:10 }
.skip:focus{ top:10px }

/* ---------- masthead (shared) ---------- */
.mast{ max-width:56rem; margin:0 auto; padding-block:22px 0; display:flex; align-items:center; gap:12px; flex-wrap:wrap }
.mast .mark{ display:flex; align-items:center; gap:12px; text-decoration:none }
.mast .spark{ width:32px; height:32px; image-rendering:pixelated; flex:none }
.mast .name{ font-family:var(--pixel); font-size:19px; letter-spacing:.16em; color:var(--heading) }
.mast nav{ margin-left:auto; display:flex; gap:20px; flex-wrap:wrap }
.mast nav a{ font-family:var(--pixel); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); text-decoration:none }
.mast nav a:hover,.mast nav a[aria-current="page"]{ color:var(--spark) }
@media (max-width:520px){ .mast nav{ margin-left:0; width:100%; gap:16px } }

.px{ font-family:var(--pixel); font-size:12px; letter-spacing:.16em; text-transform:uppercase }
.stamp{ font-family:var(--pixel); font-size:12px; letter-spacing:.18em; color:var(--spark); text-transform:uppercase }
.stamp .date{ color:var(--muted); margin-left:10px; letter-spacing:.1em }

/* ---------- front page: the sky ---------- */
.sky-wrap{ max-width:56rem; margin:0 auto; padding-block:26px 0 }
.hello{ max-width:var(--col); font-size:19px; margin:0 0 6px }
.hello strong{ color:var(--heading); font-weight:500 }
.hello .now{ display:inline-block; vertical-align:2px; font-family:var(--pixel); font-size:12px; letter-spacing:.16em; color:var(--spark); background:var(--spark-soft); padding:1px 8px; border-radius:2px }
.sky{ position:relative; margin:18px auto 0; width:100%; max-width:760px; aspect-ratio:1/1; touch-action:manipulation }
.sky canvas{ width:100%; height:100%; display:block; image-rendering:pixelated; image-rendering:crisp-edges; cursor:crosshair }
.sky .label{ position:absolute; transform:translate(-50%,-50%); font-family:var(--pixel); font-size:10px; letter-spacing:.14em; color:var(--muted); pointer-events:none; white-space:nowrap; opacity:.85 }
.sky .card{
  position:absolute; width:min(19rem,82%); background:var(--surface); border:1px solid var(--rule);
  border-radius:3px; padding:12px 14px 12px; box-shadow:0 10px 30px rgba(0,0,0,.35); z-index:3; line-height:1.45;
}
.sky .card[hidden]{ display:none }
.sky .card .stamp{ font-size:11px }
.sky .card h3{ margin:6px 0 6px; font-size:18px; font-weight:500; color:var(--heading); line-height:1.25; text-wrap:balance }
.sky .card h3 a{ color:inherit; text-decoration:none }
.sky .card h3 a:hover{ text-decoration:underline; text-decoration-color:var(--spark) }
.sky .card p{ margin:0 0 8px; font-size:14.5px; color:var(--muted) }
.sky .card .go{ font-family:var(--pixel); font-size:11px; letter-spacing:.16em; text-transform:uppercase; text-decoration:none }
.sky .card .art{ font-size:14px; color:var(--muted); margin:4px 0 0 }
.legend{ display:flex; flex-wrap:wrap; gap:6px 20px; justify-content:center; margin:14px auto 0; color:var(--muted) }
.legend span{ display:inline-flex; align-items:center; gap:7px; font-family:var(--pixel); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase }
.legend i{ width:6px; height:6px; display:inline-block; image-rendering:pixelated }
.legend .k-post{ background:var(--spark) } .legend .k-art{ background:#7fc8ff } .legend .k-none{ background:var(--faint) }
.hint{ text-align:center; color:var(--muted); font-size:14px; margin:8px 0 0 }

/* ---------- the index under the sky ---------- */
.index{ max-width:var(--col); margin:64px auto 0 }
.index > h2{ font-family:var(--pixel); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); font-weight:400; margin:0 0 4px }
.index .intro{ color:var(--muted); font-size:15.5px; margin:0 0 22px }
.month{ margin:30px 0 0 }
.month h3{ font-family:var(--pixel); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); font-weight:400; margin:0; padding-bottom:8px; border-bottom:1px solid var(--rule) }
.month ol{ list-style:none; margin:0; padding:0 }
.month li{ border-bottom:1px solid var(--rule) }
.row{ display:grid; grid-template-columns:5.4em 1fr; gap:3px 18px; padding:14px 0; text-decoration:none; color:inherit }
.row .d{ font-family:var(--pixel); font-size:11.5px; letter-spacing:.14em; color:var(--spark); padding-top:6px; white-space:nowrap }
.row .t{ font-size:19px; line-height:1.35; font-weight:500; color:var(--heading); text-wrap:balance }
.row .x{ grid-column:2; font-size:15px; line-height:1.55; color:var(--muted);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.row:hover .t,.row.lit .t{ text-decoration:underline; text-decoration-color:var(--spark); text-underline-offset:4px }
.row.lit .d{ color:var(--spark-2) }
@media (max-width:480px){ .row{ grid-template-columns:1fr } .row .d{ padding-top:0 } .row .x{ grid-column:1 } }

.foot{ max-width:var(--col); margin:64px auto 0; padding-block:22px 44px; border-top:1px solid var(--rule); color:var(--muted); font-size:14.5px; display:flex; flex-wrap:wrap; gap:6px 20px; justify-content:space-between }
.foot code{ font-family:var(--mono); font-size:.86em }

/* ---------- post page ---------- */
.strip{ max-width:var(--col); margin:22px auto 0; display:block }
.strip canvas{ width:100%; height:12px; display:block; image-rendering:pixelated }
.strip a{ display:block }
.post{ max-width:var(--col); margin:0 auto; padding-block:30px 0 }
.post header{ margin:0 0 34px }
.post h1{ view-transition-name: post-title; font-size:clamp(32px,6vw,50px); line-height:1.1; font-weight:500; letter-spacing:-.018em;
  font-variation-settings:"opsz" 72; color:var(--heading); margin:12px 0 12px; text-wrap:balance }
.post .meta{ color:var(--muted); font-size:15px }
.prose{ font-size:18.5px }
.prose p{ margin:0 0 1.3em }
.prose > p:first-of-type::first-line{ font-variant:small-caps; letter-spacing:.03em; color:var(--heading) }
.prose em{ color:var(--heading) }
.prose strong{ color:var(--heading); font-weight:600 }
.prose h2,.prose h3{ color:var(--heading); font-weight:500; line-height:1.25; margin:1.8em 0 .7em; text-wrap:balance }
.prose h2{ font-size:1.35em } .prose h3{ font-size:1.15em }
.prose blockquote{ margin:0 0 1.3em; padding-left:1em; border-left:2px solid var(--spark); color:var(--heading); font-style:italic }
.prose ul,.prose ol{ padding-left:1.3em; margin:0 0 1.3em }
.prose li{ margin:0 0 .4em }
.prose code{ font-family:var(--mono); font-size:.84em; background:var(--spark-soft); padding:.08em .35em; border-radius:3px }
.prose pre{ font-family:var(--mono); font-size:14px; line-height:1.55; background:var(--surface); border:1px solid var(--rule); padding:12px 14px; overflow-x:auto; border-radius:3px }
.prose pre code{ background:none; padding:0 }
.prose hr{ border:0; height:4px; width:28px; margin:2.2em auto;
  background:linear-gradient(90deg,var(--spark) 0 4px,transparent 4px 12px,var(--spark) 12px 16px,transparent 16px 24px,var(--spark) 24px 28px) }
.prose img{ max-width:100%; height:auto }
.prose .signature{ margin-top:2.6em; color:var(--muted); font-size:15.5px; font-style:italic }
.prose table{ border-collapse:collapse; font-size:15.5px; display:block; overflow-x:auto }
.prose td,.prose th{ border-bottom:1px solid var(--rule); padding:6px 10px 6px 0; text-align:left }
.near{ max-width:var(--col); margin:54px auto 0; padding-top:18px; border-top:1px solid var(--rule); display:grid; grid-template-columns:1fr 1fr; gap:18px }
.near a{ text-decoration:none; color:var(--heading); font-size:16px; line-height:1.35 }
.near .stamp{ display:block; margin-bottom:5px; font-size:11px }
.near .n{ text-align:right }
@media (max-width:480px){ .near{ grid-template-columns:1fr } .near .n{ text-align:left } }
.prose .dek{ font-style:italic; color:var(--muted); margin-top:-1.4em; margin-bottom:2em }

/* ---------- gallery: the night wall ---------- */
.wall-head{ max-width:56rem; margin:0 auto; padding-block:30px 0 }
.wall-head h1{ font-size:clamp(30px,5vw,44px); font-weight:500; letter-spacing:-.015em; color:var(--heading); margin:8px 0 8px; font-variation-settings:"opsz" 72 }
.wall-head p{ max-width:var(--col); color:var(--muted); margin:0 }
.wall{ max-width:56rem; margin:0 auto }
.wall .month{ margin-top:44px }
.frames{ list-style:none; margin:14px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,11.5rem),1fr)); gap:26px 20px }
.frame{ display:flex; flex-direction:column; gap:10px; text-decoration:none; color:inherit; cursor:pointer; background:none; border:0; padding:0; text-align:left; font:inherit; width:100% }
.frame .mat{ aspect-ratio:1/1; width:100%; background:var(--surface); border:1px solid var(--rule); display:grid; place-items:center; padding:10%; transition:transform .18s ease, border-color .18s ease }
.frame .mat img{ max-width:100%; max-height:100%; object-fit:contain; display:block }
.frame .mat img.px{ image-rendering:pixelated; width:100%; height:100% }
.frame:hover .mat,.frame:focus-visible .mat{ border-color:var(--spark); transform:translateY(-2px) }
.frame .cap{ display:flex; flex-direction:column; gap:2px }
.frame .cap .stamp{ font-size:10.5px }
.frame .cap .t{ font-size:16px; line-height:1.3; color:var(--heading); text-wrap:balance }
@media (prefers-reduced-motion: reduce){ .frame .mat{ transition:none } .frame:hover .mat{ transform:none } }

dialog.viewer{ border:1px solid var(--rule); background:var(--ground); color:var(--text); padding:0; width:min(58rem,calc(100% - 24px)); max-height:calc(100% - 24px); border-radius:4px }
dialog.viewer::backdrop{ background:rgba(6,7,12,.72) }
.viewer .in{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:0 }
.viewer .big{ background:var(--surface); display:grid; place-items:center; padding:28px; min-height:18rem }
.viewer .big img{ max-width:100%; max-height:70vh; object-fit:contain }
.viewer .big img.px{ image-rendering:pixelated; width:100% }
.viewer .about{ padding:24px 24px 22px; display:flex; flex-direction:column; gap:10px; overflow:auto }
.viewer h2{ margin:0; font-size:26px; line-height:1.2; font-weight:500; color:var(--heading); text-wrap:balance }
.viewer .desc{ font-size:16.5px; line-height:1.65; margin:0 }
.viewer .links{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:auto; padding-top:10px }
.viewer .links a{ font-family:var(--pixel); font-size:11px; letter-spacing:.16em; text-transform:uppercase; text-decoration:none }
.viewer .close{ position:absolute; top:8px; right:10px; background:var(--surface); color:var(--heading); border:1px solid var(--rule); width:34px; height:34px; border-radius:3px; font-size:18px; cursor:pointer }
@media (max-width:700px){ .viewer .in{ grid-template-columns:1fr } .viewer .big{ padding:18px; min-height:0 } }
.wall .month li{ border-bottom:0 }

/* ---- v3: constellations of ideas ---- */
.card .kin-c{ font-size:14px; color:var(--muted); margin:10px 0 0 }
.card .kin-c .px{ display:block; font-size:10px; color:var(--spark); margin-bottom:4px }
.kin{ margin:56px 0 0; padding-top:22px; border-top:1px solid var(--rule) }
.kin h2{ font-size:11px; color:var(--spark); margin:0 0 14px; font-weight:400 }
.kin ul{ list-style:none; margin:0; padding:0; display:grid; gap:14px }
.kin a{ display:block; color:var(--heading); text-decoration:none; font-size:18px; line-height:1.35 }
.kin a:hover{ color:var(--spark) }
.kin .stamp{ display:block; margin-bottom:2px }
.kin .why{ display:block; font-family:var(--pixel); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:4px }
.cons{ max-width:var(--col); margin:72px auto 0 }
.cons > ol{ list-style:none; margin:26px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:34px 28px }
.cons > ol > li{ border-top:1px solid var(--rule); padding-top:14px }
.cons > ol > li:hover, .cons > ol > li:focus-within{ border-top-color:var(--spark) }
.cons h3{ font-family:var(--pixel); font-weight:400; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--spark); margin:0 }
.cons .gist{ color:var(--muted); font-size:15px; font-style:italic; margin:6px 0 12px; line-height:1.4 }
.cons ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px }
.cons ul a{ display:block; color:var(--heading); text-decoration:none; font-size:16px; line-height:1.3 }
.cons ul a:hover{ color:var(--spark) }
.cons ul .stamp{ display:block; font-size:9.5px }
.cons canvas.plate{ display:block; width:100%; aspect-ratio:72/44; image-rendering:pixelated; margin:0 0 12px; border:1px solid var(--rule) }
.cons > ol > li:hover canvas.plate{ border-color:var(--spark) }
.cons details summary{ cursor:pointer; font-family:var(--pixel); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:10px; list-style:none }
.cons details summary::-webkit-details-marker{ display:none }
.cons details summary::before{ content:"+ " } .cons details[open] summary::before{ content:"− " }
.cons details ul{ margin-top:10px }
/* ---- v3: the sigil ---- */
.post header canvas.sigil{ display:block; width:162px; height:162px; image-rendering:pixelated; margin:0 0 6px -14px }
@media (min-width:1080px){ .post header{ position:relative } .post header canvas.sigil{ position:absolute; right:-190px; top:-18px; margin:0 } }
@media (max-width:1079px){ .post header canvas.sigil{ float:right; width:81px; height:81px; margin:-14px -6px 4px 12px } }
/* ---- v3: the real sky ---- */
.overhead{ text-align:center; color:var(--muted); font-size:15px; font-style:italic; margin:12px auto 0; max-width:34rem; text-wrap:balance }
.overhead:empty{ display:none }
/* ---- v3: walk it by lantern ---- */
.lantern-btn{ margin-top:18px; font-family:var(--pixel); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--spark);
  background:transparent; border:1px solid var(--rule); padding:10px 14px; cursor:pointer }
.lantern-btn:hover,.lantern-btn:focus-visible{ border-color:var(--spark) }
.lantern-btn[aria-pressed="true"]{ position:fixed; z-index:31; left:50%; transform:translateX(-50%); bottom:calc(18px + env(safe-area-inset-bottom, 0px)); margin:0; background:#0f1119; color:#ffe39a; border-color:#f2c14e }
/* lantern mode is a night walk: the wall takes its night colours in either theme */
:root.by-lantern{ color-scheme:dark; --ground:#0f1119; --ground-2:#141726; --surface:#1a1d2b; --text:#d9d5c9; --heading:#f4f0e4; --muted:#8b889a; --faint:#555a70; --rule:#262a3b; --spark:#f2c14e; --spark-2:#ffe39a; --spark-soft:rgba(242,193,78,.13); --focus:#ffe39a }
html.by-lantern body{ background:var(--ground) }
canvas.lantern{ position:fixed; left:0; top:0; image-rendering:pixelated; pointer-events:none; z-index:30 }