/* =========================================================
   KH DESIGN SYSTEM
   ========================================================= */

:root {

  /* ---------------------------------------------------------
     SPACE
     --------------------------------------------------------- */

  --kh-gap-xs: 4px;
  --kh-gap-s: 8px;
  --kh-gap-m: 16px;
  --kh-gap-l: 24px;
  --kh-gap-xl: 40px;
  --kh-gap-xxl: 64px;


  /* ---------------------------------------------------------
     TYPE
     --------------------------------------------------------- */

  --kh-text-s: 14px;
  --kh-text-m: 16px;
  --kh-text-l: 24px;
  --kh-text-xl: 40px;


  /* ---------------------------------------------------------
     LINE HEIGHT
     --------------------------------------------------------- */

  --kh-leading-tight: 1;
  --kh-leading-normal: 1.5;


  /* ---------------------------------------------------------
     COLOR
     --------------------------------------------------------- */

  --kh-paper: #f5f0dc;
  --kh-ink: #252525;
  --kh-accent: #e44b3a;
  --kh-sub: #527a68;
  --kh-white: #fff;


  /* ---------------------------------------------------------
     PIXEL
     --------------------------------------------------------- */

  --kh-pixel: 1px;
}


/* =========================================================
   BASE
   ========================================================= */

* {
  box-sizing: border-box;
}

html {
  background: var(--kh-paper);
}

body {
  margin: 0;

  background: var(--kh-paper);
  color: var(--kh-ink);

  font-size: var(--kh-text-m);
  line-height: var(--kh-leading-normal);
}

a {
  color: inherit;
  text-underline-offset: var(--kh-gap-xs);
}

.wp-block-image img {
  display: block;
  max-width: 100%;
  height: auto;
}


/* =========================================================
   PIXEL BOX
   ========================================================= */

.pixel-box {
  --p: calc(var(--kh-pixel) * 2);

  border: var(--p) solid currentColor;

  clip-path: polygon(
    var(--p) 0,
    calc(100% - var(--p)) 0,

    calc(100% - var(--p)) var(--p),
    100% var(--p),

    100% calc(100% - var(--p)),
    calc(100% - var(--p)) calc(100% - var(--p)),

    calc(100% - var(--p)) 100%,
    var(--p) 100%,

    var(--p) calc(100% - var(--p)),
    0 calc(100% - var(--p)),

    0 var(--p),
    var(--p) var(--p)
  );
}


/* =========================================================
   PIXEL SHADOW
   ========================================================= */

.pixel-shadow {
  box-shadow:
    2px 0 0 var(--kh-ink),
    0 2px 0 var(--kh-ink),
    2px 2px 0 var(--kh-ink);
}


/* =========================================================
   PIXEL LINE
   ========================================================= */

.pixel-line,
.wp-block-separator {
  height: calc(var(--kh-pixel) * 2) !important;

  border: 0 !important;

  background:
    repeating-linear-gradient(
      to right,
      var(--kh-ink) 0 calc(var(--kh-pixel) * 2),
      transparent calc(var(--kh-pixel) * 2) calc(var(--kh-pixel) * 4)
    ) !important;
}

/* =========================================================
   PIXEL LINK
   ========================================================= */

.pixel-link {
  text-decoration: none;
}

.pixel-link::before {
  content: "▶";

  display: inline-block;

  margin-right: var(--kh-gap-s);

  opacity: 0;
}

.pixel-link:hover::before,
.pixel-link:focus-visible::before {
  opacity: 1;

  animation: khCursor .5s steps(2) infinite;
}


/* =========================================================
   PIXEL CURSOR
   ========================================================= */

.pixel-cursor::after {
  content: "■";

  margin-left: var(--kh-gap-xs);

  animation: khBlink .8s steps(2) infinite;
}


/* =========================================================
   LABEL / META
   ========================================================= */

.pixel-label,
.kh-meta {
  font-size: var(--kh-text-s);
  line-height: var(--kh-leading-normal);
  letter-spacing: .1em;

  text-transform: uppercase;
}

.kh-meta {
  color: var(--kh-sub);
}


/* =========================================================
   SECTION
   ========================================================= */

.kh-section {
  padding-block: var(--kh-gap-xxl);
}


/* =========================================================
   MOTION
   ========================================================= */

@keyframes khCursor {
  50% {
    transform: translateX(2px);
  }
}

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


/* =========================================================
   SELECTION
   ========================================================= */

::selection {
  color: var(--kh-white);
  background: var(--kh-ink);
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

::-webkit-scrollbar {
  width: var(--kh-gap-s);
}

::-webkit-scrollbar-track {
  background: var(--kh-paper);
}

::-webkit-scrollbar-thumb {
  background: var(--kh-ink);
  border: 2px solid var(--kh-paper);
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .pixel-link::before,
  .pixel-cursor::after {
    animation: none;
  }

}


/* ========================================
   Heading Font
   H1 / H2 only
======================================== */

h1,
h2,
.wp-block-heading:is(h1, h2),
.wp-block-site-title {
	font-family: "DotGothic16", sans-serif !important;
	font-weight: 400;
	font-style: normal;
}

/* ========================================
   Typography
======================================== */

/* Base */
body {
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 400;
}

/* H1 / H2 */
h1,
h2,
.wp-block-heading:is(h1, h2) {
	font-family: "DotGGothic16", sans-serif;
	font-weight: 400;
	font-style: normal;
}

/* ========================================
   BLOG TABLE OF CONTENTS
======================================== */

.blog-toc {
	margin-block: var(--kh-gap-xl);
}

.blog-toc__title {
	margin: 0 0 var(--kh-gap-m);
	font-family: "DotGothic16", sans-serif;
}

.blog-toc__list {
	margin: 0;
	padding-left: var(--kh-gap-l);
}

.blog-toc__list li + li {
	margin-top: var(--kh-gap-xs);
}

.blog-toc a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* =========================================================
   NO PREVIEW
   KH COMMON COMPONENT
   ========================================================= */

.kh-noimage {
  --p: calc(var(--kh-pixel) * 2);

  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  width: 100%;
  aspect-ratio: 4 / 3;

  color: var(--kh-ink);
  background-color: var(--kh-paper);

  /* PIXEL GRID */
  background-image:
    linear-gradient(
      to right,
      color-mix(in srgb, var(--kh-ink) 15%, transparent) var(--kh-pixel),
      transparent var(--kh-pixel)
    ),
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--kh-ink) 15%, transparent) var(--kh-pixel),
      transparent var(--kh-pixel)
    );

  background-size:
    var(--kh-gap-m) var(--kh-gap-m);

  /* PIXEL BOX */
  border: var(--p) solid var(--kh-ink);

  clip-path: polygon(
    var(--p) 0,
    calc(100% - var(--p)) 0,

    calc(100% - var(--p)) var(--p),
    100% var(--p),

    100% calc(100% - var(--p)),
    calc(100% - var(--p)) calc(100% - var(--p)),

    calc(100% - var(--p)) 100%,
    var(--p) 100%,

    var(--p) calc(100% - var(--p)),
    0 calc(100% - var(--p)),

    0 var(--p),
    var(--p) var(--p)
  );
}


/* =========================================================
   NO PREVIEW CONTENT
   ========================================================= */

.kh-noimage__mark,
.kh-noimage__label {
  position: relative;
  z-index: 1;

  background: var(--kh-paper);
}


/* × */

.kh-noimage__mark {
  padding-inline: var(--kh-gap-xs);

  font-family: "DotGothic16", sans-serif;
  line-height: 1;
}


/* NO PREVIEW */

.kh-noimage__label {
  margin-top: var(--kh-gap-xs);
  padding-inline: var(--kh-gap-xs);

  font-size: var(--kh-text-s);
  line-height: var(--kh-leading-normal);
  letter-spacing: .1em;

  text-transform: uppercase;
}