/* 
 * Innerlogics Blog - Orange Theme
 */

:root {
  --accent: 30, 85%, 55%;
  --monospace-font: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --highlight-color: #FFEE6B;
}

/* Disable tap highlight and text selection on media */
img,
figure,
video {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
}

/* Smaller hr margins for a tighter look */
hr {
  margin-top: calc(var(--baseline) * 5);
  margin-bottom: calc(var(--baseline) * 5);
}

.rtl {
  direction: rtl;
  text-align: justify;
}

.center {
  text-align: center;
}

.nowrap {
  white-space: nowrap;
}

.width25 {
  width: 25%;
}
.width35 {
  width: 35%;
}

/* Font size */
.smaller {
  font-size: smaller;
}
.small {
  font-size: small;
}
.xx-small {
  font-size: xx-small;
}
.larger {
  font-size: larger
}
.large {
  font-size: large;
}
.font-size-75-percent {
  font-size: calc(var(--font-size) * 0.75);
}

.monospace {
  font-family: var(--monospace-font), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
  letter-spacing: 0;              /* important */
  word-spacing: 0;
  -webkit-text-size-adjust: 100%; /* disable iOS autosizing */
  font-kerning: none;
  tab-size: 2;                    /* adjust if you use tabs */
}

.tabular-nums {
  font-variant-numeric: tabular-nums;
}

.margin-0 {
  margin: 0;
}
.margin-top-0 {
  margin-top: 0;
}
.margin-top-5x-baseline {
  margin-top: calc(var(--baseline) * 5);
}
.margin-bottom-0 {
  margin-bottom: 0;
}

.padding-top-0 {
  padding-top: 0;
}
.padding-bottom-0 {
  padding-bottom: 0;
}

.credit {
  font-size: small;
  opacity: 0.7;
  margin-top: 0;
  text-align: right;
  transform: translateY(-8px);
}

/* Post count in tag/author headers */
.post-count {
  font-size: 0.65em;
  font-weight: 400;
  opacity: 0.7;
  margin-left: 0.3em;
}

.pagination__title {
  margin: calc(var(--baseline) * 8) 0 calc(var(--baseline) * 6);
}

/* Expand the header bar area by increasing logo height */
.logo {
  height: 48px;
  padding: 5px 9px;
}
.logo > img {
  max-height: 32px;
}

/* Hero tagline - adaptive font size */
.hero.framed p {
  font-size: clamp(0.95rem, 2.2vw, 1.15rem);
  line-height: 1.5;
}
/* Hero tagline - smaller font size on mobile*/
@media (max-width: 480px) {
  .hero.framed p {
    font-size: 0.8rem;
  }
}

/* Decrease margins above and below post images */
.post__image {
  margin: calc(var(--baseline) * 3) 0 calc(var(--baseline) * 2);
}

.post__title {
  margin-top: 0;
}

/* Decrease margins above and below post embedded iframes */
.post__iframe {
  margin-top: calc(var(--baseline) * 3);
  margin-bottom: calc(var(--baseline) * 3);
}

/* Dotted border between posts */
.post:not(:last-of-type) {
  border-bottom: 3px dotted hsla(var(--color), var(--alpha, .4));
}

.post__content,
.post__entry {
  text-align: justify;
  text-justify: inter-word;
  word-spacing: 0.02em;
  hyphens: none;
  
  /* Decrease spacing above post content */
  margin-top: calc(var(--baseline) * 4);
}
@media (max-width: 600px) {
  .post__content,
  .post__entry {
    text-align: left;
  }
}

.post__content .nojustify,
.post__entry .nojustify {
  text-align: left;
}

/* Rounded corners on images */
.post__content img,
.post__content video,
.post__image img,
article img {
  border-radius: 8px;
  box-shadow: 0 0 20px hsla(var(--accent), 0.3);
}

/* Opt-out for specific images */
figure.no-round-corners img {
  border-radius: 0;
  box-shadow: none;
}

/* Tight figure margins, above and below images */
.tight-figures figure {
  margin-top: 0;
  margin-bottom: 0;
}

/* Tight figure margins, above images */
.tight-figures-top figure {
  margin-top: 0;
}

/* Set figure height to 390px (for Vimeo videos) */
.h390-figures figure {
  height: 390px;
}

/* Blockquote styling */
blockquote {
  border: none;
  color: hsla(var(--color), 0.9);
  background: hsla(var(--color), 0.05);
  border-radius: 4px;
  padding: 1.5rem 1.5rem 1.5rem 4rem;
  position: relative;
  margin: 1.5rem 0;
  font-style: italic;
}

blockquote::before {
  content: "";
  background-image: url("/assets/images/q.png");
  background-size: contain;
  background-repeat: no-repeat;
  width: 2.5rem;
  height: 2.5rem;
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  opacity: 0.75;
  /*font-size: 3rem;
  line-height: 1;
  color: hsla(var(--accent), 0.5);*/
  filter: sepia(1) saturate(3) hue-rotate(-10deg);
}

/* RTL blockquote - swap padding so the icon space is on the right */
blockquote.rtl {
  padding: 1.5rem 4rem 1.5rem 1.5rem;
}

/* RTL quote icon placement + mirror */
blockquote.rtl::before {
  left: auto;
  right: 0.75rem;
  transform: rotate(180deg) translateY(2px); /* full 180 rotation (upside down) */
  transform-origin: center;
}

blockquote.no-before {
  padding: 22px 28px;
  font-style: normal;
}

blockquote.no-before::before {
  background-image: none;
}

/* Note-block styling */
.post__content .note-block,
.post__entry .note-block {
  background: rgba(255,255,255,0.06);
  border-left: 4px solid hsla(var(--accent), 0.7);
  border-radius: 12px;
  padding: 18px 22px;
  margin: 22px 0;
}

/* Inline code */
code, kbd {
  font-family: var(--monospace-font);
  background: hsla(var(--accent), var(--alpha, .2));
  color: hsla(var(--accent), var(--alpha, 1));
  padding: 1px 6px;
  margin: 0 2px;
  font-size: .9374999997rem;
}

/* -----------------------------------
   TERMINAL CODE BLOCK (p-based Publii)
------------------------------------ */

.post__content .note-block.code-block,
.post__entry   .note-block.code-block {
  font-family: var(--monospace-font);
  line-height: 1.55;
  letter-spacing: 0.015em;

  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.45),
    rgba(0,0,0,0.35)
  );

  border: 1px solid rgba(255,255,255,0.08);
  border-left: 4px solid hsla(var(--accent), 0.8);

  color: #d8d8d8;
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);

  padding: 18px 22px;
  border-radius: 12px;
  margin: 22px 0;

  position: relative;
}

/* Inner code reset */
.post__content .note-block.code-block > code,
.post__entry   .note-block.code-block > code {
  display: block;
  background: none;
  color: inherit;
  padding: 0;
  margin: 0;
  font-size: inherit;
  white-space: pre-wrap;
  z-index: 1;
}

/* -----------------------------------
   SHELL PROMPT ICON
   Enable with class="shell"
------------------------------------ */

.post__content .note-block.code-block.shell,
.post__entry   .note-block.code-block.shell {
  padding-left: 3.2em;
}

.post__content .note-block.code-block.shell::before,
.post__entry   .note-block.code-block.shell::before {
  content: "";
  position: absolute;

  left: 1.05em;
  top: 1.05em;

  width: 42px;
  height: 34px;

  background-image: url("/assets/images/shell.png");
  background-repeat: no-repeat;
  background-size: contain;

  opacity: 0.95;
  pointer-events: none;
  z-index: 0;
}

/* -----------------------------------
   BLINKING CURSOR (no left margin)
   Enable with class="blink"
------------------------------------ */

.post__content .note-block.code-block.blink > code,
.post__entry   .note-block.code-block.blink > code {
  position: relative;
}

.post__content .note-block.code-block.blink > code::after,
.post__entry   .note-block.code-block.blink > code::after {
  content: "";
  display: inline-block;

  width: 0.65em;
  height: 1.1em;

  margin-left: 0;   /* no built-in spacing */

  vertical-align: -0.15em;

  background: hsla(var(--color), 0.85);
  border-radius: 2px;

  animation: terminal-cursor-blink 1s steps(1, end) infinite;
}

@keyframes terminal-cursor-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .post__content .note-block.code-block.blink > code::after,
  .post__entry   .note-block.code-block.blink > code::after {
    animation: none;
    opacity: 1;
  }
}

/* -----------------------------------
   COPY TO CLIPBOARD BUTTON
   Enable with class="copyable"
   and add the button element:
     <p class="note-block code-block shell blink copyable">
       <button class="copy-btn">Copy</button>
       <code>
         ls -la
         echo "hello"
       </code>
     </p>
------------------------------------ */

.post__content .note-block.code-block.copyable,
.post__entry   .note-block.code-block.copyable {
  position: relative;
}

.post__content .note-block.code-block.copyable .copy-btn,
.post__entry   .note-block.code-block.copyable .copy-btn {
  position: absolute;
  top: 10px;
  right: 12px;

  font-family: inherit;
  font-size: 0.75rem;

  padding: 6px 10px;

  background: rgba(255,255,255,0.06);
  color: hsla(var(--color), 0.9);

  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;

  cursor: pointer;
  user-select: none;
}

.post__content .note-block.code-block.copyable .copy-btn,
.post__content .note-block.code-block.copyable .copy-btn *,
.post__entry   .note-block.code-block.copyable .copy-btn,
.post__entry   .note-block.code-block.copyable .copy-btn * {
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  z-index: 5;
}

.post__content .note-block.code-block.copyable .copy-btn:hover,
.post__entry   .note-block.code-block.copyable .copy-btn:hover {
  border-color: hsla(var(--accent), 0.6);
}

.post__content .note-block.code-block.copyable .copy-btn:active,
.post__entry   .note-block.code-block.copyable .copy-btn:active {
  transform: scale(0.97);
}

/* -----------------------------------
   ASCII ART CODE BLOCK (p-based Publii)
   Enable with class="ascii"
------------------------------------ */

/* Base: keep ASCII alignment */
.post__entry pre.note-block.code-block.ascii,
.post__content pre.note-block.code-block.ascii {
  white-space: pre;              /* do not wrap */
  overflow: hidden;              /* no scrollbars */
  padding: 10px 12px;
  line-height: 1.05;
  -webkit-text-size-adjust: 100%; /* stop iOS from "helping" */
}

/* Scale the entire code content on small screens */
.post__entry pre.note-block.code-block.ascii > code,
.post__content pre.note-block.code-block.ascii > code {
  display: inline-block;
  transform-origin: left top;
  transform: scale(var(--ascii-scale, 1));
}

.post__entry pre.note-block.code-block.ascii,
.post__content pre.note-block.code-block.ascii,
.post__entry pre.note-block.code-block.ascii code,
.post__content pre.note-block.code-block.ascii code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
  letter-spacing: 0;              /* important */
  word-spacing: 0;
  -webkit-text-size-adjust: 100%; /* disable iOS autosizing */
  font-kerning: none;
  tab-size: 2;                    /* adjust if you use tabs */
}

/* iPhone-ish breakpoints: tune if needed */
@media (max-width: 430px) {
  .post__entry pre.note-block.code-block.ascii,
  .post__content pre.note-block.code-block.ascii { --ascii-scale: 0.82; }
}

@media (max-width: 390px) {
  .post__entry pre.note-block.code-block.ascii,
  .post__content pre.note-block.code-block.ascii { --ascii-scale: 0.78; }
}

@media (max-width: 360px) {
  .post__entry pre.note-block.code-block.ascii,
  .post__content pre.note-block.code-block.ascii { --ascii-scale: 0.74; }
}

/* -----------------------------------
   TYPEWRITER NOTE BLOCK (variant)
   Use: <p class="note-block typewriter">...</p>
   Or:  <div class="note-block typewriter">...</div>

   Optional realism (requires JS):
   Add class "fx" to enable automatic faint letters and darker punctuation:
     <p class="note-block typewriter fx">...</p>
------------------------------------ */

@font-face {
  font-family: "CourierPrimeLocal";
  src: url("../fonts/CourierPrime-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "CourierPrimeLocal";
  src: url("../fonts/CourierPrime-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.post__content .note-block.typewriter,
.post__entry   .note-block.typewriter {
  position: relative;
  overflow: hidden;

  background: #f5f3ed;
  color: #333;

  border-left: none;
  border: 1px solid rgba(0,0,0,0.35);
  border-radius: 0;

  padding: 22px 28px;
  margin: 24px 0;

  font-family: "CourierPrimeLocal", "Courier New", monospace;
  font-size: 1.08rem;
  line-height: 1.22;

  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
  letter-spacing: 0.006em;
  word-spacing: 0;
  font-kerning: none;
  -webkit-text-size-adjust: 100%;

  box-shadow:
    0 1px 0 rgba(0,0,0,0.15),
    0 3px 0 rgba(0,0,0,0.05);

  text-shadow:
    0 0 0.02em rgba(0,0,0,0.25),
    0.01em 0 rgba(0,0,0,0.15),
    -0.01em 0 rgba(0,0,0,0.10);

  filter: blur(0.52px) contrast(0.96);
  transform: translateZ(0);
}

.note-block.typewriter.x-small {
  font-size: 0.75rem;
}

.note-block.typewriter.small {
  font-size: 0.90rem;
}

.note-block.typewriter.large {
  font-size: 1.18rem;
}

.note-block.typewriter.x-large {
  font-size: 1.32rem;
}

/* Grain overlay (no grid) */
.post__content .note-block.typewriter::before,
.post__entry   .note-block.typewriter::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  opacity: 0.7;
  mix-blend-mode: multiply;

  background-image:
    linear-gradient(
      to right,
      rgba(0,0,0,0.06),
      rgba(0,0,0,0.02) 45%,
      rgba(0,0,0,0.00) 78%
    ),
    radial-gradient(circle at 18% 22%, rgba(0,0,0,0.10), transparent 55%),
    radial-gradient(circle at 82% 68%, rgba(0,0,0,0.08), transparent 60%),
    radial-gradient(circle at 12% 18%, rgba(0,0,0,0.16) 1.2px, transparent 1.4px),
    radial-gradient(circle at 38% 72%, rgba(0,0,0,0.14) 1.2px, transparent 1.4px),
    radial-gradient(circle at 64% 26%, rgba(0,0,0,0.13) 1.2px, transparent 1.4px),
    radial-gradient(circle at 78% 54%, rgba(0,0,0,0.15) 1.2px, transparent 1.4px),
    radial-gradient(circle at 24% 46%, rgba(0,0,0,0.12) 1.2px, transparent 1.4px),
    radial-gradient(circle at 52% 10%, rgba(0,0,0,0.11) 1.2px, transparent 1.4px),
    radial-gradient(circle at 90% 32%, rgba(0,0,0,0.12) 1.2px, transparent 1.4px);

  background-size:
    auto,
    auto,
    auto,
    220px 220px,
    260px 260px,
    240px 240px,
    280px 280px,
    250px 250px,
    300px 300px,
    270px 270px;

  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat,
    repeat,
    repeat,
    repeat,
    repeat,
    repeat,
    repeat,
    repeat;
}

/* Keep content above the overlay */
.post__content .note-block.typewriter > *,
.post__entry   .note-block.typewriter > * {
  position: relative;
  z-index: 1;
}

/* Make links feel "printed" */
.post__content .note-block.typewriter a,
.post__entry   .note-block.typewriter a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.10em;
}

/* Inline code inside typewriter block: keep it subtle */
.post__content .note-block.typewriter code,
.post__entry   .note-block.typewriter code,
.post__content .note-block.typewriter kbd,
.post__entry   .note-block.typewriter kbd {
  font-family: inherit;
  background: rgba(0,0,0,0.05);
  color: inherit;
  padding: 1px 6px;
  margin: 0 2px;
  border-radius: 4px;
}

/* Optional realism helpers (used by JS when class "fx" is present) */
.post__content .note-block.typewriter.fx .faint,
.post__entry   .note-block.typewriter.fx .faint {
  opacity: 0.78;
}

.post__content .note-block.typewriter.fx .punch,
.post__entry   .note-block.typewriter.fx .punch {
  color: #0a0a0a;
  text-shadow:
    0.02em 0 rgba(0,0,0,0.35),
    -0.02em 0 rgba(0,0,0,0.25),
    0 0.03em rgba(0,0,0,0.10);
}

.post__content .note-block.typewriter.fx .shift,
.post__entry   .note-block.typewriter.fx .shift {
  display: inline-block;
  transform: translateY(var(--ty-shift-y, 0px)) rotate(var(--ty-rot, 0deg));
}

/* Mobile: slightly tighter */
@media (max-width: 480px) {
  .post__content .note-block.typewriter,
  .post__entry   .note-block.typewriter {
    padding: 16px 16px;
    font-size: 0.96rem;
    line-height: 1.20;
    letter-spacing: 0.005em;
  }
}

/* -----------------------------------
   Typewriter "type-in" reveal animation
   Enable with class="typein"
   - Reserves space (no layout shift)
   - JS reveals characters when block enters view
------------------------------------ */

.ty-pause {
  display: none;
}

.post__content .note-block.typewriter.typein,
.post__entry   .note-block.typewriter.typein {
  position: relative;
}

.post__content .note-block.typewriter.typein .ty-word,
.post__entry   .note-block.typewriter.typein .ty-word {
  display: inline-block;
}

.post__content .note-block.typewriter.typein .ty-space,
.post__entry   .note-block.typewriter.typein .ty-space {
  display: inline;
}

.post__content .note-block.typewriter.typein .ty-char,
.post__entry   .note-block.typewriter.typein .ty-char {
  display: inline;
  opacity: 0;
  transition: opacity 0.001s linear;
}

.post__content .note-block.typewriter.typein .ty-char.on,
.post__entry   .note-block.typewriter.typein .ty-char.on {
  opacity: 1;
}

/* Preserve FX faintness inside type-in blocks */
.post__content .note-block.typewriter.fx.typein .ty-char.faint.on,
.post__entry   .note-block.typewriter.fx.typein .ty-char.faint.on {
  opacity: 0.78;
}

.post__content .note-block.typewriter.fx.typein .ty-char.shift,
.post__entry   .note-block.typewriter.fx.typein .ty-char.shift {
  display: inline-block;
}

@media (prefers-reduced-motion: reduce) {
  .post__content .note-block.typewriter.typein .ty-char,
  .post__entry   .note-block.typewriter.typein .ty-char {
    opacity: 1 !important;
  }
}

/* Prevent inherited underlines from showing before characters reveal */
.post__content .note-block.typewriter.typein u,
.post__entry   .note-block.typewriter.typein u,
.post__content .note-block.typewriter.typein ins,
.post__entry   .note-block.typewriter.typein ins,
.post__content .note-block.typewriter.typein .underline,
.post__entry   .note-block.typewriter.typein .underline {
  text-decoration: none;
}

/* Underline only visible non-space characters */
.post__content .note-block.typewriter.typein u .ty-char.on:not(.ty-space),
.post__entry   .note-block.typewriter.typein u .ty-char.on:not(.ty-space),
.post__content .note-block.typewriter.typein ins .ty-char.on:not(.ty-space),
.post__entry   .note-block.typewriter.typein ins .ty-char.on:not(.ty-space),
.post__content .note-block.typewriter.typein .underline .ty-char.on:not(.ty-space),
.post__entry   .note-block.typewriter.typein .underline .ty-char.on:not(.ty-space) {
  text-decoration: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.10em;
}


.post__content .note-block.typewriter.typein .ty-space,
.post__entry   .note-block.typewriter.typein .ty-space {
  text-decoration: none !important;
}

/* Simulate bad printing / clipped ribbon on specific inline fragments.
   Usage examples inside a typewriter block:
   <span class="badprint">but</span>
   <span class="badprint hard">decision</span>
   <span class="badprint" style="--badprint-width: 0.42em;">but</span>
*/
.post__content .note-block.typewriter .badprint,
.post__entry   .note-block.typewriter .badprint {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  -webkit-mask-image: linear-gradient(
    to right,
    #000 0%,
    #000 calc(100% - var(--badprint-width, 0.52em)),
    rgba(0,0,0,0.45) calc(100% - var(--badprint-width, 0.52em) + 0.18em),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    #000 0%,
    #000 calc(100% - var(--badprint-width, 0.52em)),
    rgba(0,0,0,0.45) calc(100% - var(--badprint-width, 0.52em) + 0.18em),
    transparent 100%
  );
}


/* Horizontal misalignment like real carriage issues (actual shifted line) */
.post__content .note-block.typewriter .misalign,
.post__entry   .note-block.typewriter .misalign {
  display: block;
  width: calc(100% - var(--ty-shift-x, 1.1ch));
  margin-left: var(--ty-shift-x, 1.1ch);
  line-height: inherit;
  white-space: nowrap;
}

/* subtle version */
.post__content .note-block.typewriter .misalign.soft,
.post__entry   .note-block.typewriter .misalign.soft {
  margin-left: 0.7ch;
  width: calc(100% - 0.7ch);
}

/* stronger version */
.post__content .note-block.typewriter .misalign.hard,
.post__entry   .note-block.typewriter .misalign.hard {
  margin-left: 1.45ch;
  width: calc(100% - 1.45ch);
}

/* Explicit line wrapper when you want full control over broken lines */
.post__content .note-block.typewriter .ty-line,
.post__entry   .note-block.typewriter .ty-line {
  display: block;
  white-space: nowrap;
}

/* Do not use real bold weight inside typewriter blocks.
   Bold is simulated by a second strike, not by font-weight. */
.post__content .note-block.typewriter strong,
.post__content .note-block.typewriter b,
.post__content .note-block.typewriter .bold,
.post__entry   .note-block.typewriter strong,
.post__entry   .note-block.typewriter b,
.post__entry   .note-block.typewriter .bold,
.post__content .note-block.typewriter .ty-char.ty-bold-host,
.post__entry   .note-block.typewriter .ty-char.ty-bold-host {
  font-weight: 400 !important;
}

/* The second strike carries the heavier bold impression */
.post__content .note-block.typewriter .ty-char.bold-second,
.post__entry   .note-block.typewriter .ty-char.bold-second {
  font-weight: 700 !important;
}

/* Bold typewriter chars: second strike */
.post__content .note-block.typewriter.typein .ty-char.bold-second,
.post__entry   .note-block.typewriter.typein .ty-char.bold-second {
  position: absolute;
  left: 0.018em;
  top: 0.008em;
  opacity: 0;
  pointer-events: none;
}

.post__content .note-block.typewriter.typein .ty-char.bold-second.on,
.post__entry   .note-block.typewriter.typein .ty-char.bold-second.on {
  opacity: 1;
}

/* Ensure the main bold char can host the second strike */
.post__content .note-block.typewriter.typein .ty-char.ty-bold-host,
.post__entry   .note-block.typewriter.typein .ty-char.ty-bold-host {
  position: relative;
  display: inline-block;
}

/* -----------------------------------
   Typewriter overstrike correction
   Use:
   <span class="overstrike" data-under="many">Many</span>

   Optional animation with typein:
   add class "typein" to the parent note-block
------------------------------------ */

.post__content .note-block.typewriter .overstrike,
.post__entry   .note-block.typewriter .overstrike {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  vertical-align: baseline;
}

.post__content .note-block.typewriter .overstrike > .under,
.post__entry   .note-block.typewriter .overstrike > .under,
.post__content .note-block.typewriter .overstrike > .over,
.post__entry   .note-block.typewriter .overstrike > .over {
  grid-column: 1;
  grid-row: 1;
  white-space: pre;
  filter: blur(0.08px);
}

/* Base look when not animating */
.post__content .note-block.typewriter .overstrike > .under .ty-char,
.post__entry   .note-block.typewriter .overstrike > .under .ty-char {
  opacity: 0.68;
}

.post__content .note-block.typewriter .overstrike > .over .ty-char,
.post__entry   .note-block.typewriter .overstrike > .over .ty-char {
  opacity: 1;
}

.post__content .note-block.typewriter .overstrike > .over,
.post__entry   .note-block.typewriter .overstrike > .over {
  transform: translate(0.02em, 0.01em);
  text-shadow:
    0.008em 0 rgba(0,0,0,0.14),
    -0.008em 0 rgba(0,0,0,0.09);
}

.post__content .note-block.typewriter.fx .overstrike > .over,
.post__entry   .note-block.typewriter.fx .overstrike > .over {
  text-shadow:
    0.015em 0 rgba(0,0,0,0.24),
    -0.012em 0 rgba(0,0,0,0.16),
    0 0.02em rgba(0,0,0,0.06);
}

/* Type-in integration */
.post__content .note-block.typewriter.typein .overstrike > .under .ty-char,
.post__entry   .note-block.typewriter.typein .overstrike > .under .ty-char,
.post__content .note-block.typewriter.typein .overstrike > .over .ty-char,
.post__entry   .note-block.typewriter.typein .overstrike > .over .ty-char {
  opacity: 0;
}

.post__content .note-block.typewriter.typein .overstrike > .under .ty-char.on,
.post__entry   .note-block.typewriter.typein .overstrike > .under .ty-char.on {
  opacity: 0.82;
}

.post__content .note-block.typewriter.typein .overstrike > .over .ty-char.on,
.post__entry   .note-block.typewriter.typein .overstrike > .over .ty-char.on {
  opacity: 1;
}

/* Preserve FX faintness inside overstrikes during type-in */
.post__content .note-block.typewriter.fx.typein .overstrike .ty-char.faint.on,
.post__entry   .note-block.typewriter.fx.typein .overstrike .ty-char.faint.on {
  opacity: 0.78;
}

.post__content .note-block.typewriter.fx.typein .overstrike .ty-char.shift,
.post__entry   .note-block.typewriter.fx.typein .overstrike .ty-char.shift {
  display: inline-block;
}

/* --------------------------------- */

/* -----------------------------------
   Attribution styling
------------------------------------ */

.content figure + ul:not(.post__toc ul),
.content figure + ol,
.content blockquote + ul:not(.post__toc ul),
.content blockquote + ol {
  margin-top: -0.5rem;
  padding-left: 1.5rem;
  font-size: 0.875rem;
  color: hsla(var(--color), 0.6);
}

.content figure + ul:not(.post__toc ul) li:not(:empty):before,
.content blockquote + ul:not(.post__toc ul) li:not(:empty):before { 
  content: "▶ ";
  color: hsla(var(--accent), 0.6);
  padding-top: 1px;
}

/* -----------------------------------
   Read-more fade
------------------------------------ */

.post__content > :is(p, ul, ol, blockquote, div):has(+ a.read-more) {
  max-height: 7.5em;
  overflow: hidden;

  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
}

/* Keep link spacing clean */
.post__content > a.read-more {
  display: inline-block;
  margin-top: 0.6rem;
}

/* -----------------------------------------------
   External link icon (Feather SVG injected by JS)
-------------------------------------------------- */

/* External links - normal inline, icon stays with last word via JS nowrap span */
.post__content a[target="_blank"],
.post__entry   a[target="_blank"] {
  /* No special display - let text wrap naturally */
}

/* The last-word wrapper keeps icon attached */
.post__content a[target="_blank"] .ext-link-last,
.post__entry   a[target="_blank"] .ext-link-last {
  white-space: nowrap;
}

.post__content a[target="_blank"] .ext-link-icon,
.post__entry   a[target="_blank"] .ext-link-icon {
  width: 0.85em;
  height: 0.85em;
  margin-left: 0.28em;
  transform: translateY(0.09em);

  stroke: currentColor;
  fill: none;
  stroke-width: 2;

  opacity: 0.55;
  pointer-events: none;
}

/* RTL spacing */
blockquote.rtl a[target="_blank"] .ext-link-icon,
.rtl a[target="_blank"] .ext-link-icon {
  margin-left: 0;
  margin-right: 0.28em;
}

/* Type hints (subtle) */
.post__content a[target="_blank"] .ext-link-icon.is-video,
.post__entry   a[target="_blank"] .ext-link-icon.is-video {
  opacity: 0.65;
}

.post__content a[target="_blank"] .ext-link-icon.is-github,
.post__entry   a[target="_blank"] .ext-link-icon.is-github {
  opacity: 0.62;
}

.post__content a[target="_blank"] .ext-link-icon.is-pdf,
.post__entry   a[target="_blank"] .ext-link-icon.is-pdf {
  opacity: 0.62;
}

.post__content a[target="_blank"] .ext-link-icon.is-docs,
.post__entry   a[target="_blank"] .ext-link-icon.is-docs {
  opacity: 0.6;
}

.post__content a[target="_blank"] .ext-link-icon.is-social,
.post__entry   a[target="_blank"] .ext-link-icon.is-social {
  opacity: 0.58;
}

.post__content a[target="_blank"] .ext-link-icon.is-wiki,
.post__entry   a[target="_blank"] .ext-link-icon.is-wiki {
  opacity: 0.62;
}

/* -----------------------------------
   Add background color to messages
------------------------------------ */

.msg--highlight {
  background-color: color-mix(in srgb, var(--highlight-color) 20%, transparent);
}

.msg--info {
  background-color: color-mix(in srgb, var(--info-color) 20%, transparent);
}

.msg--success {
  background-color: color-mix(in srgb, var(--success-color) 20%, transparent);
}

.msg--warning {
  background-color: color-mix(in srgb, var(--warning-color) 20%, transparent);
}

/* -----------------------------------
   Ordered lists: hanging indent + "1."
------------------------------------ */

.post__content ol,
.post__entry   ol {
  list-style: none;
  counter-reset: item;
  margin-left: 0;
  padding-left: 1.5em;
}

.post__content ol > li,
.post__entry   ol > li {
  counter-increment: item;
  position: relative;
  margin: 0.25em 0;
}

.post__content ol > li::before,
.post__entry   ol > li::before {
  content: counter(li) ".\00a0" !important; /* dot + nbsp */
  position: absolute;
  left: -2.0em;
  width: 1.6em;
  text-align: right;

  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}

.post__content ol:not(.post__toc ul) > li:before,
.post__entry ol:not(.post__toc ul) > li:before {
    color: hsla(var(--color), 1);
}

/* -----------------------------------
   Image margin fix for p-based content
   Publii is adding "post__image" to the img and to the figure, which is causing double margins. 
   This forces the image to have zero margin, and the figure to have the normal margins, 
   effectively negating the extra margin on the image.
   There's an additional JS fix that removes the empty paragraph that Publii inserts after the figure, which also causes extra spacing.
   (Publii bug workaround) 
------------------------------------ */
.post__content figure.post__image > a > img.post__image {
  margin: 0 !important;
}

/* ------------------------------
   Figure caption spacing
--------------------------------- */

.post__image figcaption {
  margin: calc(var(--baseline) * 0.5) 0 0;
}

/* ------------------------------
   Gallery caption styling
--------------------------------- */

.gallery figure.gallery__item {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}

.gallery figure.gallery__item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.gallery .gallery__item figcaption {
  position: absolute;
  right: 0;

  box-sizing: border-box;
  padding: 0.6em 0.85em;

  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  color: #fff;
  font-size: 0.85rem;
  line-height: 1.35;

  border-radius: 0 0 8px 8px;
}

/* -----------------------------------
   GLightbox Overlay for video popups
------------------------------------ */
.goverlay {
  background: rgba(0,0,0,0.4)!important;
}

.gslide-media {
  border-radius: 18px;
  box-shadow: 0 40px 100px rgba(0,0,0,0.7);
  overflow: hidden;
  border: 2px solid rgba(255,255,255,0.12);
}

.ginner-container {
  padding: 24px;
}

/* -----------------------------------
   Inline share button in post__meta
------------------------------------ */
.post__meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0;
}
.post__meta > .js-share {
  margin-left: auto;
  text-decoration: none;
  color: hsla(var(--accent), .7);
  transition: color 0.24s ease-out;
}
.post__meta > .js-share::before {
  content: none;
}
.post__meta > .js-share .icon {
  fill: hsla(var(--accent), .7);
  height: 14px;
  width: 14px;
  vertical-align: -2px;
  margin-right: 4px;
  transition: fill 0.24s ease-out;
}
.post__meta > .js-share:hover {
  color: hsla(var(--accent), 1);
}
.post__meta > .js-share:hover .icon {
  fill: hsla(var(--accent), 1);
}