/* ==========================================================================
   kire.css — simple in the light, terminal in the dark.
   light: Fira Sans, paper, soft colour blocks.
   dark:  Fira Code, Dracula, everything is a terminal.
   ========================================================================== */

/* tokens --------------------------------------------------------------
   one palette, both themes: light-dark() picks a side from color-scheme,
   so every colour is declared once. only the few values that aren't
   colours (tint, fonts, prompt, cursor) need the terminal branch below. */

:root {
  color-scheme: light dark;

  --drac-bg:      light-dark(#f9f5ff, #282a36);
  --drac-fg:      light-dark(#282a36, #f8f8f2);
  --drac-comment: light-dark(#6070a1, #6272a4);
  /* dracula's comment blue is only 3.03:1 on the dark bg — fine for the card
     edge it draws, short of WCAG AA (4.5:1) for text. text uses a lifted one. */
  --drac-comment-text: light-dark(#6070a1, #8995bb);
  --drac-orange:  light-dark(#a06315, #ffb86c);
  --drac-yellow:  light-dark(#7e7203, #f1fa8c);
  --drac-green:   light-dark(#1c832d, #50fa7b);
  --drac-purple:  light-dark(#7c4dbd, #bd93f9);
  --drac-cyan:    light-dark(#157c92, #8be9fd);
  --drac-pink:    light-dark(#b74a86, #ff79c6);
  --drac-red:     light-dark(#c33027, #ff5555);

  /* the hard ink edge a card gets in light mode */
  --ink: #282a36;

  --bg: var(--drac-bg);
  --fg: var(--drac-fg);
  --dim: var(--drac-comment-text);
  --line: light-dark(#e4dcf2, #44475a);
  --accent: var(--drac-purple);
  --link: light-dark(var(--drac-purple), var(--drac-cyan));
  --link-hover: var(--drac-pink);

  --card-bg: light-dark(#ffffff, #21222c);
  --card-fg: var(--drac-fg);
  --card-edge: light-dark(var(--ink), var(--drac-comment));
  --shadow: 5px 5px 0 var(--card-edge);
  --shadow-sm: 4px 4px 0 var(--card-edge);

  --code-bg: light-dark(#efe7fb, #44475a);
  --code-fg: var(--drac-cyan);
  --pre-bg: light-dark(#efe7fb, #21222c);
  --pre-fg: light-dark(var(--drac-fg), var(--drac-yellow));

  --sticker-shadow: light-dark(rgba(0, 0, 0, 0.25), #191a21);

  --sans: "Fira Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Fira Code", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* light: plain and papery */
  --card-tint: 28%;
  --body-font: var(--sans);
  --head-font: var(--sans);
  --prompt: "";
  --cursor: none;

  /* type scale — 16px base, 1.25 ratio. WCAG sets no minimum font size; what
     it constrains is contrast at a given size (1.4.3), resize to 200% (1.4.4)
     and spacing overrides (1.4.12) — so every step is rem and the root below
     stays at the reader's own browser default. */
  --fs-micro: 0.6875rem;   /* 11px — uppercase micro-labels: card meta, nav, toggle */
  --fs-caption: 0.875rem;  /* 14px — meta, nav, footer, captions */
  --fs-body: 1rem;         /* 16px — body copy and notes */
  --fs-lead: 1.125rem;     /* 18px — subtitles, lead-ins */
  --fs-h3: 1.25rem;        /* 20px */
  --fs-h2: 1.5rem;         /* 24px — WCAG's "large text" threshold */
  --fs-h1: 2rem;           /* 32px */

  /* one width for the whole site — .wrap derives from this, so header,
     content and footer all share the same two edges */
  --measure: 44rem;
}

/* dark = terminal: monospace everything, a prompt on every heading */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --card-tint: 18%;
    --body-font: var(--mono);
    --head-font: var(--mono);
    --prompt: "> ";
    --cursor: inline;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --card-tint: 18%;
  --body-font: var(--mono);
  --head-font: var(--mono);
  --prompt: "> ";
  --cursor: inline;
}

/* a picked theme beats the system one */
:root[data-theme="light"] { color-scheme: light; }

/* light-dark() is the whole palette, so anything that cannot parse it would
   lose every colour at once. those engines (safari < 17.5, chrome < 123,
   firefox < 120) get the light theme spelled out instead. */
@supports not (color: light-dark(#000, #fff)) {
  :root {
    --drac-bg: #f9f5ff;
    --drac-fg: #282a36;
    --drac-comment: #6070a1;
    --drac-comment-text: #6070a1;
    --drac-orange: #a06315;
    --drac-yellow: #7e7203;
    --drac-green: #1c832d;
    --drac-purple: #7c4dbd;
    --drac-cyan: #157c92;
    --drac-pink: #b74a86;
    --drac-red: #c33027;

    --line: #e4dcf2;
    --link: #7c4dbd;
    --card-bg: #ffffff;
    --card-edge: #282a36;
    --code-bg: #efe7fb;
    --pre-bg: #efe7fb;
    --pre-fg: #282a36;
    --sticker-shadow: rgba(0, 0, 0, 0.25);
  }

  .card,
  .note {
    border-color: var(--ink);
    box-shadow: var(--shadow);
  }

  .card:hover,
  .card:focus-within { box-shadow: 7px 7px 0 var(--ink); }
}

/* base ---------------------------------------------------------------- */

* { box-sizing: border-box; }

html {
  /* everything is sized in rem, so this one dial scales the whole site */
  font-size: 100%;
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  /* a sticker may hang past a card edge without widening the page */
  overflow-x: hidden;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body-font);
  font-size: var(--fs-body);
  line-height: 1.65;
}

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

h1, h2, h3, h4 {
  /* a heading always starts on a clean line, never beside a sticker */
  clear: both;
  font-family: var(--head-font);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 2rem 0 0.75rem;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

a {
  color: var(--link);
  text-decoration: underline dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover { color: var(--link-hover); }

img { max-width: 100%; height: auto; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2.5rem 0;
}

pre, code, kbd, samp { font-family: var(--mono); }

code {
  background: var(--code-bg);
  color: var(--code-fg);
  padding: 0.1em 0.3em;
  font-size: 0.9em;
}

pre {
  background: var(--pre-bg);
  color: var(--pre-fg);
  padding: 0.85rem 1rem;
  overflow-x: auto;
  border-left: 2px solid var(--accent);
}

pre code { background: none; color: inherit; padding: 0; font-size: var(--fs-caption); }

blockquote {
  margin: 2rem 0;
  padding-left: 1.25rem;
  border-left: 3px solid var(--accent);
  color: var(--dim);
}

blockquote p { margin: 0.4rem 0; }

table { width: 100%; border-collapse: collapse; }
th, td { border-bottom: 1px solid var(--line); padding: 0.5rem 0.6rem; text-align: left; }

/* layout -------------------------------------------------------------- */

.wrap {
  width: min(100% - 2.5rem, var(--measure));
  margin-inline: auto;
}

.skip-link { position: absolute; left: -9999px; }

.skip-link:focus {
  left: 1rem;
  top: 1rem;
  z-index: 10;
  background: var(--card-bg);
  border: 1px solid var(--card-edge);
  padding: 0.5rem 0.75rem;
}

/* header -------------------------------------------------------------- */

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem 1.25rem;
  padding: 1.75rem 0 1.25rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 2.5rem;
}

.site-title {
  font-family: var(--head-font);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg);
  text-decoration: none;
  margin-right: auto;
}

.site-title:hover { color: var(--accent); }

/* the cursor only exists in terminal mode, so a token drives it */
.site-title .cursor {
  display: var(--cursor);
  color: var(--accent);
  animation: blink 1.1s steps(1) infinite;
}

@keyframes blink { 50% { opacity: 0; } }

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--body-font);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.site-nav a {
  color: var(--dim);
  padding-bottom: 2px;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--fg);
  text-decoration-color: var(--accent);
}

.theme-toggle {
  font: inherit;
  font-family: var(--body-font);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.5;
  background: none;
  color: var(--dim);
  border: 1px solid var(--line);
  padding: 0.15rem 0.5rem;
  cursor: pointer;
}

.theme-toggle:hover { color: var(--fg); border-color: var(--accent); }

/* cards --------------------------------------------------------------- */

.post-list {
  clear: both;
  list-style: none;
  margin: 0 0 3rem;
  padding: 0;
  display: grid;
  gap: 2rem;
}

.card {
  position: relative;
  display: block;
  padding: 1.5rem 1.75rem;
  background: color-mix(in srgb, var(--c) var(--card-tint), var(--card-bg));
  color: var(--card-fg);
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

/* in dark mode a card wears its own colour on the border and the shadow;
   in light mode every card keeps the same ink edge */
.card,
.note {
  border: 1px solid light-dark(var(--ink), var(--c));
  box-shadow: 5px 5px 0 light-dark(var(--ink), color-mix(in srgb, var(--c) 68%, #191a21));
}

.card:hover,
.card:focus-within {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 light-dark(var(--ink), color-mix(in srgb, var(--c) 68%, #191a21));
}

/* the colour block per post — the six dracula accents, cycled */
.c1 { --c: var(--drac-purple); }
.c2 { --c: var(--drac-pink); }
.c3 { --c: var(--drac-cyan); }
.c4 { --c: var(--drac-green); }
.c5 { --c: var(--drac-orange); }
.c6 { --c: var(--drac-yellow); }

.card__title {
  margin: 0 0 0.4rem;
  font-size: var(--fs-h3);
  line-height: 1.3;
  /* titles are Title Case in the front matter; the cards wear them lowercase */
  text-transform: lowercase;
}

.card__title a { color: inherit; }

/* the whole card is clickable; the link keeps the semantics */
.card__title a::after { content: ""; position: absolute; inset: 0; }

.card:hover .card__title { color: var(--accent); }

.card__excerpt {
  margin: 0 0 0.9rem;
  color: var(--card-fg);
  opacity: 0.85;
}

.card__excerpt p { margin: 0; }

.card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.85rem;
  font-family: var(--body-font);
  font-size: var(--fs-micro);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--card-fg);
  opacity: 0.7;
}

.tag {
  position: relative;
  z-index: 1;
  color: inherit;
  text-decoration: none;
  border: 1px solid currentColor;
  padding: 0 0.28rem;
}

.tag:hover { color: var(--accent); }

/* dark mode gives every heading a prompt */
.card__title::before,
.page-title::before {
  content: var(--prompt);
  color: var(--c, var(--accent));
}

@media (max-width: 34rem) {
  .card { padding: 1.15rem 1.25rem; box-shadow: var(--shadow-sm); }
  .card__title { font-size: var(--fs-lead); }
  /* the excerpt is body-sized elsewhere; on a narrow card it steps down */
  .card__excerpt { font-size: var(--fs-caption); }
  /* the #tag headings run long; one step down keeps them off two lines */
  .tag-group h2 { font-size: var(--fs-h3); }
}

/* note / callout box -------------------------------------------------- */

.note {
  --c: var(--drac-purple);
  clear: both;
  font-size: var(--fs-body);
  margin: 2rem 0;
  padding: 1rem 1.15rem;
  background: color-mix(in srgb, var(--c) var(--card-tint), var(--card-bg));
}

.note :first-child { margin-top: 0; }
.note :last-child { margin-bottom: 0; }

/* posts & pages ------------------------------------------------------- */

.page,
.post {
  max-width: var(--measure);
  margin-bottom: 4rem;
}

.page-title { margin-top: 0; }

/* script pages carry long shell lines — give the code the full column */
.script { max-width: none; }

.script .post-content > p,
.script .post-content > ul,
.script .post-content > .note { max-width: var(--measure); }

.subtitle {
  margin-top: -0.5rem;
  font-size: var(--fs-lead);
  color: var(--dim);
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.9rem;
  margin-bottom: 2rem;
  font-family: var(--body-font);
  font-size: var(--fs-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}

.post-meta .tag {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--card-edge);
  box-shadow: 3px 3px 0 var(--card-edge);
  background: var(--card-bg);
  color: var(--fg);
  text-transform: none;
  letter-spacing: 0.02em;
  transition: transform 0.15s ease, color 0.15s ease;
}

.post-meta .tag:hover { color: var(--accent); transform: translate(-1px, -1px); }

.post-content > :first-child { margin-top: 0; }

/* a hand-signed sign-off, allowed to sit beside a sticker */
.signature {
  clear: none;
  margin-top: 1.5rem;
  font-family: var(--body-font);
  font-style: italic;
  font-size: var(--fs-h3);
  line-height: 1.3;
  color: var(--accent);
}

/* the small print under the note — what the site is made of */
.colophon {
  max-width: var(--measure);
  margin-top: 0.9rem;
  font-family: var(--body-font);
  font-size: var(--fs-caption);
  line-height: 1.6;
  color: var(--dim);
}

.post-edit {
  margin-top: 3rem;
  padding: 1rem 1.25rem;
  border: 1px dashed var(--line);
  font-family: var(--body-font);
  font-size: var(--fs-caption);
  color: var(--dim);
}

.post-edit p { margin: 0; }

.post-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-family: var(--body-font);
  font-size: var(--fs-caption);
}

/* tag index ----------------------------------------------------------- */

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
  padding: 0;
  list-style: none;
  font-family: var(--body-font);
  font-size: var(--fs-caption);
}

.tag-cloud a {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--card-edge);
  box-shadow: 3px 3px 0 var(--card-edge);
  background: var(--card-bg);
  color: var(--fg);
  text-decoration: none;
}

.tag-cloud a:hover { color: var(--accent); transform: translate(-1px, -1px); }

.tag-group { margin-bottom: 2.5rem; }

.tag-group h2 {
  font-family: var(--head-font);
  font-size: var(--fs-h2);
  letter-spacing: 0.04em;
}

.tag-group h2::before { content: "#"; color: var(--accent); }

.tag-group ul { margin: 0; padding-left: 1.1rem; }
.tag-group li::marker { color: var(--accent); }

/* stickers ------------------------------------------------------------ */

/* one class carries the behaviour; each usage tunes --tilt and --w from
   _data/stickers.yml, then picks a placement modifier */
.sticker {
  --tilt: 0deg;
  --w: clamp(2.75rem, 9vw, 6rem);

  z-index: 2;
  /* --w arrives inline from the sticker data, so cap the used value here
     rather than trying to redefine the variable further down */
  width: min(var(--w), 40vw);
  height: auto;
  filter: drop-shadow(3px 3px 0 var(--sticker-shadow));
  transform: rotate(var(--tilt));
  transition: transform 0.15s ease;
}

.sticker:hover {
  transform: rotate(0deg) scale(1.15);
  z-index: 3;
}

.sticker--right { float: right; margin: 0.25rem 0 1rem 1.25rem; }

.post-content .sticker { width: min(calc(var(--w) * 0.8), 32vw); }
.sticker--left { float: left; margin: 0.25rem 1.25rem 1rem 0; }

@media (prefers-reduced-motion: reduce) {
  .sticker, .card { transition: none; }
  .site-title .cursor { animation: none; }
}

/* footer — the three-column minima shape, in this theme's clothes ------ */

.site-footer {
  border-top: 1px solid var(--line);
  margin-top: 4rem;
  padding: 2rem 0 3rem;
  font-family: var(--body-font);
  font-size: var(--fs-caption);
  color: var(--dim);
}

/* the omg.lol status line — one ambient line above the footer proper */
.footer-status {
  margin: 0 auto 1.5rem;
  font-family: var(--body-font);
  font-size: var(--fs-caption);
  line-height: 1.6;
  color: var(--dim);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.footer-status[hidden] { display: none; }

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem 2rem;
}

.footer-quote {
  position: relative;
  /* two shares of the row to the socials' one */
  flex: 2 1 0;
  margin: 0;
  padding-left: 1.6rem;
  border: 0;
}

/* a small soft quotation mark instead of a rule down the side */
.footer-quote::before {
  content: "\201C";
  position: absolute;
  left: 0;
  top: 0.3rem;
  font-family: var(--body-font);
  font-size: 2rem;
  line-height: 1;
  color: var(--accent);
  opacity: 0.3;
}

.footer-quote p {
  margin: 0;
  /* follows the theme; inter's real italic comes from the ital axis
     requested in head.html, without which the browser would fake the slant */
  font-family: var(--body-font);
  /* same size as body copy */
  font-size: var(--fs-body);
  font-style: italic;
  font-weight: 300;
  line-height: 1.5;
  color: var(--dim);
}

.footer-quote footer {
  margin-top: 0.45rem;
  /* the credit line runs in inter; only the quote itself is serif */
  font-family: var(--body-font);
  font-size: var(--fs-caption);
  font-style: normal;
  line-height: 1.4;
  color: var(--dim);
  opacity: 0.8;
}

.footer-quote footer::before { content: "\2014\00a0"; }
.footer-quote cite { font-style: italic; }

/* socials, tucked to the right */
.footer-social {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  /* the icons only need ~180px, so keep them tucked to the far edge of the third */
  justify-content: flex-end;
  gap: 1.25rem;
}

.site-footer p { margin: 0; }
.site-footer a { color: var(--dim); }
.site-footer a:hover { color: var(--accent); }

.social-media-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.social-media-list a {
  display: block;
  color: var(--dim);
  text-decoration: none;
}

.social-media-list a:hover { color: var(--accent); }

.username {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.svg-icon {
  width: 20px;
  height: 20px;
  display: block;
  fill: currentColor;
}

@media (max-width: 40rem) {
  .footer-inner { flex-direction: column; align-items: flex-start; }
  /* flex-basis means height once the row turns into a column */
  .footer-quote,
  .footer-social { flex: 0 1 auto; }
  .footer-social { justify-content: flex-start; }
}

/* syntax highlighting (rouge) — dracula tokens, both themes ------------ */

.highlight { background: transparent; }
.highlight pre { margin: 0; }

/* one frame around the block, not two */
.highlighter-rouge > .highlight {
  background: var(--pre-bg);
  border-left: 2px solid var(--accent);
}

.highlighter-rouge > .highlight > pre { border-left: 0; }

.highlight .c, .highlight .c1, .highlight .cm, .highlight .cs, .highlight .cd { color: var(--drac-comment-text); font-style: italic; }
.highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt, .highlight .kc,
.highlight .o, .highlight .ow { color: var(--drac-pink); }
.highlight .s, .highlight .s1, .highlight .s2, .highlight .sb, .highlight .sc, .highlight .sd, .highlight .se,
.highlight .sh, .highlight .si, .highlight .sx, .highlight .sr, .highlight .ss { color: var(--drac-yellow); }
.highlight .m, .highlight .mi, .highlight .mf, .highlight .mh, .highlight .mo, .highlight .il,
.highlight .no, .highlight .nb, .highlight .bp { color: var(--drac-purple); }
.highlight .nf, .highlight .fm, .highlight .nd, .highlight .na, .highlight .nt { color: var(--drac-green); }
.highlight .nc, .highlight .nn, .highlight .vc, .highlight .vg, .highlight .vi, .highlight .nv { color: var(--drac-cyan); }
.highlight .gd, .highlight .err { color: var(--drac-red); background: none; }
.highlight .gi { color: var(--drac-green); }
.highlight .p, .highlight .nx { color: var(--pre-fg); }