/*
Theme Name: Vapor Drawings
Theme URI: https://example.com/
Author: Vapor Drawings
Description: A full-screen editorial theme for music, art, interviews, reviews, photos, and culture.
Version: 2.9.6
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: vapor-drawings
*/

@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter/Inter-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter/Inter-Italic-Variable.woff2") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans JP";
  src: url("assets/fonts/noto-sans-jp/NotoSansJP-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

/* v2.7.0 — metrics-matched Japanese fallback.
   The hosted Noto Sans JP file is large, so `font-display: swap` shows a system
   Japanese face first. Full-width Japanese glyphs are 1em wide in every CJK
   font, so no horizontal adjustment is needed; the visible jump comes from the
   line box. These overrides give the fallback the same ascent/descent as Noto
   Sans JP (1160 / -288 per 1000 units), so the swap no longer reflows headlines.
   If no listed face is installed, this @font-face is simply skipped and the
   stack continues to the generic UI fonts below. */
@font-face {
  font-family: "Vapor JP Fallback";
  src:
    local("Hiragino Kaku Gothic ProN W3"),
    local("HiraKakuProN-W3"),
    local("Hiragino Sans"),
    local("Yu Gothic Medium"),
    local("YuGothic"),
    local("Noto Sans CJK JP"),
    local("Noto Sans JP"),
    local("Meiryo");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  ascent-override: 116%;
  descent-override: 28.8%;
  line-gap-override: 0%;
  size-adjust: 100%;
}

:root {
  --page-padding-x: 8.98vw;
  --hero-top: 19.14vh;
  --hero-width: 82.03vw;
  --hero-height: 72.73vh;
  --text: #111312;
  --muted: rgba(17, 19, 18, .58);
  --white: #f8faf8;
  --paper: rgba(250, 250, 247, .92);
  --hairline: rgba(17, 19, 18, .17);
  --ease: cubic-bezier(.76, 0, .24, 1);
  --font-primary: "Inter", "Noto Sans JP", "Vapor JP Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

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

html,
body {
  width: 100%;
  min-height: 100%;
}

html {
  background: #bdf5f9;
  scroll-behavior: smooth;
}

body {
  position: relative;
  margin: 0;
  min-height: 100svh;
  color: var(--text);
  font-family: var(--font-primary);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  font-optical-sizing: auto;
  background: transparent;
  isolation: isolate;
}

/* Organic animated background. Fixed to the viewport so it never breaks between sections. */
body::before {
  content: "";
  position: fixed;
  inset: -18vmax;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 46% 52% at -2% 2%, rgba(61, 242, 249, 1) 0%, rgba(61, 242, 249, .92) 32%, transparent 68%),
    radial-gradient(ellipse 36% 44% at 4% 54%, rgba(184, 247, 251, .96) 0%, rgba(184, 247, 251, .78) 38%, transparent 72%),
    radial-gradient(ellipse 30% 52% at 53% -2%, rgba(255, 215, 133, 1) 0%, rgba(255, 215, 133, .92) 36%, transparent 72%),
    radial-gradient(ellipse 20% 40% at 70% -3%, rgba(255, 150, 60, 1) 0%, rgba(255, 150, 60, .9) 34%, transparent 70%),
    radial-gradient(ellipse 40% 84% at 110% 38%, rgba(251, 36, 102, 1) 0%, rgba(251, 36, 102, .93) 36%, transparent 74%),
    radial-gradient(ellipse 34% 42% at 102% 98%, rgba(255, 46, 102, .98) 0%, rgba(255, 46, 102, .86) 40%, transparent 74%),
    radial-gradient(ellipse 60% 48% at 30% 100%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, .93) 42%, transparent 76%),
    linear-gradient(108deg, #3df2f9 0%, #cdf7fb 22%, #fff0c8 46%, #ff963c 68%, #fb2466 100%);
  background-repeat: no-repeat;
  transform: translate3d(0,0,0) scale(1.04);
  filter: saturate(1.30) contrast(1.14);
  animation: vapor-organic-drift 22s ease-in-out infinite alternate;
  will-change: transform, filter;
  transition: opacity .65s ease;
}

body::after {
  content: "";
  position: fixed;
  inset: -12vmax;
  z-index: -1;
  pointer-events: none;
  opacity: .42;
  background:
    radial-gradient(circle at 24% 70%, rgba(255,255,255,.48), transparent 34%),
    radial-gradient(circle at 72% 44%, rgba(255,255,255,.26), transparent 31%);
  filter: blur(26px);
  animation: vapor-light-drift 28s ease-in-out infinite alternate-reverse;
  will-change: transform;
}

@keyframes vapor-organic-drift {
  0%   { transform: translate3d(-2.2%, -1.4%, 0) scale(1.04) rotate(-.24deg); filter: saturate(1.22) contrast(1.08) hue-rotate(-2deg); }
  45%  { transform: translate3d(1.6%, 1.1%, 0) scale(1.08) rotate(.20deg); filter: saturate(1.30) contrast(1.12) hue-rotate(2deg); }
  100% { transform: translate3d(-.6%, 2.2%, 0) scale(1.05) rotate(-.10deg); filter: saturate(1.26) contrast(1.10) hue-rotate(-2deg); }
}

@keyframes vapor-light-drift {
  from { transform: translate3d(-3%, 1.2%, 0) scale(1); }
  to   { transform: translate3d(4%, -2.8%, 0) scale(1.10); }
}


/* Front-page WebGL background. The CSS gradient above remains as a
   progressive-enhancement fallback until the shader has rendered. */
.vapor-webgl-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .65s ease;
}

.vapor-webgl-ready .vapor-webgl-bg {
  opacity: 1;
}

.vapor-webgl-ready::before {
  opacity: 0;
}

.vapor-webgl-ready::after {
  opacity: .12;
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after {
    animation: none !important;
  }
}

body.home {
  overflow: hidden;
}

button,
input,
select,
textarea {
  font-family: var(--font-primary);
}

button,
a {
  color: inherit;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
}

::selection {
  color: #fff;
  background: #111;
}

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

/* Header */
.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 20;
  height: 150px;
  pointer-events: none;
}

.home .site-header {
  position: fixed;
}

.admin-bar .site-header {
  top: 32px;
}

.site-logo {
  position: absolute;
  top: 5.15vh;
  left: 3.62vw;
  width: clamp(178px, 15.3vw, 314px);
  pointer-events: auto;
}

.site-logo img,
.site-logo .custom-logo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: left top;
}

.site-logo .custom-logo-link,
.site-logo > a {
  display: block;
  width: 100%;
}

.header-message {
  position: absolute;
  top: 7.05vh;
  left: 35.1vw;
  right: 8vw;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .55em;
  align-items: baseline;
  font-size: clamp(17px, 1.53vw, 31px);
  line-height: 1.25;
  letter-spacing: .01em;
  white-space: nowrap;
  pointer-events: auto;
}

.site-index-link {
  position: absolute;
  top: 58px;
  right: 4.1vw;
  padding: 8px 0;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .18em;
  text-transform: uppercase;
  pointer-events: auto;
}

.site-index-link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s var(--ease);
}

.site-index-link:hover::after,
.site-index-link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Front-page slider */
.hero-area {
  position: relative;
  width: 100%;
  min-height: 100svh;
}

.slider-stage {
  position: absolute;
  top: var(--hero-top);
  left: var(--page-padding-x);
  width: var(--hero-width);
  height: var(--hero-height);
}

.slider {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 6px;
  background: rgba(14, 24, 22, .18);
}

.slider-track {
  display: flex;
  width: 100%;
  height: 100%;
  transform: translate3d(0, 0, 0);
  transition: transform 1s var(--ease);
  will-change: transform;
}

.slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.slide-link {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.slide-media {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  background: #fff;
}

.slide-media img,
.slide-media video,
.slide-media iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.slide-media img,
.slide-media video {
  object-fit: cover;
  object-position: center;
  transform: scale(1.012);
  transition: transform 1.25s var(--ease), filter .65s ease;
}

.slide-media iframe {
  pointer-events: none;
}

.slide-story-link {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
}

.slide-link:hover .slide-media img,
.slide-link:hover .slide-media video {
  transform: scale(1.035);
  filter: saturate(1.05) contrast(1.02);
}

.has-empty-media .image-shade {
  display: none;
}

.has-empty-media .slide-copy {
  color: var(--text);
  text-shadow: none;
}

.image-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(3, 13, 11, .58) 0%, rgba(3, 13, 11, .26) 31%, transparent 62%),
    linear-gradient(0deg, rgba(3, 13, 11, .18), transparent 38%);
  pointer-events: none;
}

.slide-copy {
  position: absolute;
  top: 50%;
  right: auto;
  left: clamp(28px, 3.15vw, 52px);
  bottom: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: min(48%, 620px);
  max-width: calc(100% - 84px);
  color: var(--white);
  font-family: var(--font-primary) !important;
  line-height: 1;
  text-align: left;
  text-shadow: 0 1px 18px rgba(0, 0, 0, .28);
  transform: translateY(-50%);
}

.slide-copy *,
.slide-category,
.slide-title {
  display: block;
  font-family: var(--font-primary) !important;
  font-style: normal;
  font-synthesis: none;
}

.slide-category {
  font-size: clamp(13px, .9vw, 16px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: .015em;
}

.slide-title {
  font-size: clamp(30px, 2.15vw, 42px);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.038em;
  overflow-wrap: anywhere;
}

.slider-next,
.slider-prev {
  position: absolute;
  top: 50%;
  width: clamp(28px, 2.6vw, 54px);
  height: clamp(78px, 12.8vh, 164px);
  padding: 0;
  border: 0;
  background: transparent;
  transform: translateY(-50%);
  cursor: pointer;
  transition: transform .25s ease, opacity .25s ease;
}

.slider-next {
  right: -6.25vw;
}

.slider-prev {
  left: -6.25vw;
  opacity: 0;
  pointer-events: none;
}

.slider-prev.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.slider-next:hover {
  transform: translateY(-50%) translateX(5px);
}

.slider-prev:hover {
  transform: translateY(-50%) translateX(-5px);
}

.slider-next:focus-visible,
.slider-prev:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 8px;
}

.slider-next svg,
.slider-prev svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.slider-next path,
.slider-prev path {
  fill: none;
  stroke: rgba(26, 31, 30, .8);
  stroke-width: 1.15;
  vector-effect: non-scaling-stroke;
}

.slider-status {
  position: absolute;
  right: 0;
  bottom: -26px;
  display: none;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: .12em;
}

.status-rule {
  width: 20px;
  height: 1px;
  background: currentColor;
  opacity: .5;
}

/* Editorial article */
.article-shell,
.content-shell {
  width: min(1380px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(155px, 17vh, 205px) 0 96px;
}

.article-sheet,
.content-panel {
  overflow: hidden;
  background: var(--paper);
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 8px;
  box-shadow: 0 18px 80px rgba(36, 53, 46, .08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.article-masthead {
  display: grid;
  grid-template-columns: minmax(135px, 185px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 74px);
  align-items: start;
  padding: clamp(42px, 5vw, 76px) clamp(34px, 6vw, 92px) clamp(24px, 2.5vw, 38px);
}

.article-kicker {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: .4em;
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.article-kicker a {
  width: fit-content;
  border-bottom: 1px solid currentColor;
}

.article-title-wrap {
  min-width: 0;
}

.entry-title {
  max-width: 1080px;
  margin: 0;
  font-size: clamp(42px, 4.8vw, 78px);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.045em;
  overflow-wrap: anywhere;
}

.article-deck {
  max-width: 760px;
  margin: 28px 0 0;
  color: var(--muted);
  font-size: clamp(17px, 1.4vw, 22px);
  line-height: 1.62;
}

.article-feature {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 160px;
  background: rgba(14, 18, 17, .08);
}

.article-feature img,
.entry-featured-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 82svh;
  margin: 0;
  object-fit: contain;
}

.article-content-grid {
  display: grid;
  grid-template-columns: minmax(130px, 180px) minmax(0, 760px) minmax(80px, 1fr);
  gap: clamp(30px, 5vw, 86px);
  align-items: start;
  padding: clamp(30px, 3.2vw, 48px) clamp(34px, 6vw, 92px) clamp(64px, 8vw, 116px);
}

.article-rail {
  position: sticky;
  top: 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .08em;
}

.article-rail-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.article-rail-label {
  color: var(--text);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.entry-content {
  min-width: 0;
  font-family: var(--font-primary);
  font-size: clamp(16px, 1.02vw, 18px);
  line-height: 1.95;
  letter-spacing: .008em;
  overflow-wrap: break-word;
}

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

.entry-content > *:last-child {
  margin-bottom: 0;
}

.entry-content p,
.entry-content ul,
.entry-content ol,
.entry-content blockquote,
.entry-content figure,
.entry-content table,
.entry-content .wp-block-embed {
  margin-top: 0;
  margin-bottom: 1.75em;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
  font-family: var(--font-primary);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.025em;
}

.entry-content h2 {
  margin: 2.35em 0 .8em;
  font-size: clamp(31px, 3.3vw, 54px);
}

.entry-content h3 {
  margin: 2.1em 0 .75em;
  font-size: clamp(24px, 2.3vw, 36px);
}

.entry-content h4 {
  margin: 2em 0 .65em;
  font-size: 21px;
}

.entry-content a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

.entry-content ul,
.entry-content ol {
  padding-left: 1.35em;
}

.entry-content li + li {
  margin-top: .55em;
}

.entry-content blockquote,
.entry-content .wp-block-quote {
  margin-right: 0;
  margin-left: 0;
  padding: 1.25em 0 1.25em clamp(20px, 3vw, 42px);
  border-left: 1px solid currentColor;
  font-family: var(--font-primary);
  font-size: clamp(24px, 3vw, 44px);
  line-height: 1.28;
  letter-spacing: -.025em;
}

.entry-content blockquote p:last-child {
  margin-bottom: 0;
}

.entry-content cite {
  display: block;
  margin-top: 1em;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  letter-spacing: .08em;
}

.entry-content img {
  display: block;
  height: auto;
  border-radius: 3px;
}

.entry-content figcaption,
.wp-caption-text {
  margin-top: 9px;
  color: var(--muted);
  font-family: var(--font-primary);
  font-size: 12px;
  line-height: 1.5;
}

.entry-content .alignwide {
  width: min(1040px, calc(100vw - 110px));
  max-width: none;
  margin-left: clamp(-140px, -8vw, -70px);
}

.entry-content .alignfull {
  width: min(1220px, calc(100vw - 72px));
  max-width: none;
  margin-left: clamp(-230px, -14vw, -115px);
}

.entry-content iframe,
.entry-content video {
  max-width: 100%;
}

.entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-primary);
  font-size: 14px;
}

.entry-content th,
.entry-content td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--hairline);
  text-align: left;
  vertical-align: top;
}

.article-spacer {
  min-width: 0;
}

.article-footer {
  padding: 0 clamp(34px, 6vw, 92px) clamp(46px, 6vw, 88px);
}

.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 44px;
}

.article-tags a {
  padding: 7px 11px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .06em;
}

.post-navigation {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.post-nav-link {
  display: flex;
  flex-direction: column;
  min-height: 150px;
  padding: 26px 28px 30px;
}

.post-nav-link + .post-nav-link {
  border-left: 1px solid var(--hairline);
}

.post-nav-link.is-next {
  text-align: right;
  align-items: flex-end;
}

.post-nav-label {
  margin-bottom: auto;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.post-nav-title {
  max-width: 480px;
  margin-top: 24px;
  font-size: clamp(21px, 2.2vw, 34px);
  line-height: 1.08;
  letter-spacing: -.025em;
}

.article-endmark {
  margin-top: 34px;
  font-size: 11px;
  letter-spacing: .2em;
  text-align: center;
  text-transform: uppercase;
}

/* Pages and archive */
.content-panel {
  padding: clamp(34px, 6vw, 92px);
}

.content-panel .entry-header {
  margin-bottom: 28px;
}

.content-panel .entry-title {
  font-size: clamp(38px, 5vw, 72px);
}

.post-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.post-card {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 7px;
  background: rgba(250, 250, 247, .88);
  box-shadow: 0 12px 42px rgba(36, 53, 46, .07);
  backdrop-filter: blur(16px);
}

.post-card-image {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: rgba(0, 0, 0, .1);
}

.post-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}

.post-card:hover .post-card-image img {
  transform: scale(1.035);
}

.post-card-copy {
  padding: 24px;
}

.entry-category,
.entry-meta {
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.post-card-title {
  margin: 8px 0 0;
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.04;
  font-weight: 400;
  letter-spacing: -.03em;
}

.pagination {
  margin-top: 32px;
  font-size: 14px;
}

.nav-links {
  display: flex;
  gap: 8px;
}

.page-numbers {
  display: inline-flex;
  min-width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: rgba(255, 255, 255, .48);
}

.page-numbers.current {
  color: #fff;
  background: #111;
}

@media (max-width: 1080px) {
  .article-content-grid {
    grid-template-columns: 130px minmax(0, 1fr);
  }

  .article-spacer {
    display: none;
  }

  .entry-content .alignwide,
  .entry-content .alignfull {
    width: 100%;
    margin-left: 0;
  }
}

@media (max-width: 980px) {
  :root {
    --page-padding-x: 18px;
    --hero-top: 170px;
    --hero-width: calc(100vw - 36px);
    --hero-height: calc(100svh - 208px);
  }

  body.home {
    overflow: auto;
  }

  .site-logo {
    top: 24px;
    left: 22px;
    width: 190px;
  }

  .header-message {
    top: 112px;
    left: 22px;
    right: 22px;
    display: block;
    font-size: 16px;
    line-height: 1.45;
    white-space: normal;
  }

  .header-message time {
    margin-right: .55em;
  }

  .slider {
    border-radius: 4px;
  }

  .slide-copy {
    top: 50%;
    right: auto;
    left: 24px;
    bottom: auto;
    width: min(58%, 470px);
    max-width: calc(100% - 78px);
    transform: translateY(-50%);
  }

  .slider-next,
  .slider-prev {
    width: 28px;
    height: 84px;
    filter: invert(1);
    mix-blend-mode: difference;
  }

  .slider-next {
    right: 18px;
  }

  .slider-prev {
    left: 18px;
  }

  .slider-status {
    right: 2px;
    bottom: -23px;
    display: flex;
  }

  .post-grid {
    grid-template-columns: 1fr;
  }

  .article-masthead {
    grid-template-columns: 120px minmax(0, 1fr);
  }
}

@media (max-width: 782px) {
  .admin-bar .site-header {
    top: 46px;
  }

}

@media (max-width: 720px) {
  body {
    background-attachment: scroll;
  }

  /* Mobile header uses normal document flow. This prevents the logo/message
     from drifting over the hero image in Safari and WordPress wrappers. */
  .home .site-header,
  .site-header {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    padding: 30px 22px 0;
    pointer-events: auto;
  }

  .site-logo {
    position: relative;
    top: auto;
    left: auto;
    width: min(190px, 55vw);
    margin: 0;
  }

  .site-logo img,
  .site-logo .custom-logo {
    width: 100%;
    max-height: 104px;
    object-fit: contain;
    object-position: left center;
  }

  .site-index-link {
    top: 32px;
    right: 17px;
    font-size: 10px;
  }

  .header-message {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    display: block;
    margin: 22px 0 0;
    font-size: 13px;
    line-height: 1.5;
  }

  .slider-stage {
    position: relative;
    top: auto;
    left: auto;
    width: calc(100% - 24px);
    height: auto;
    margin: 34px 12px 38px;
  }

  .slider {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
  }

  .slide-copy {
    top: 50%;
    right: auto;
    left: 18px;
    bottom: auto;
    width: min(74%, 320px);
    max-width: calc(100% - 70px);
    gap: 8px;
    transform: translateY(-50%);
  }

  .slide-category {
    font-size: 13px;
  }

  .slide-title {
    font-size: clamp(28px, 8.2vw, 36px);
    line-height: 1;
  }

  .slider-next,
  .slider-prev {
    width: 24px;
    height: 72px;
  }

  .slider-next {
    right: 13px;
  }

  .slider-prev {
    left: 13px;
  }

  .slider-status {
    right: 1px;
  }

  .article-shell,
  .content-shell {
    width: calc(100% - 16px);
    padding: 48px 0 48px;
  }

  .article-sheet,
  .content-panel,
  .post-card {
    border-radius: 5px;
  }

  .article-masthead {
    display: block;
    padding: 28px 20px 14px;
  }

  .article-kicker {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-bottom: 25px;
    padding-top: 0;
    font-size: 10px;
  }

  .entry-title {
    font-size: clamp(34px, 9.2vw, 48px);
    line-height: 1;
    letter-spacing: -.04em;
  }

  .article-deck {
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.62;
  }

  .article-feature img,
  .entry-featured-image {
    max-height: none;
  }

  .article-content-grid {
    display: block;
    padding: 18px 20px 58px;
  }

  .article-rail {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 20px;
    margin-bottom: 42px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--hairline);
    font-size: 11px;
  }

  .entry-content {
    font-size: 16px;
    line-height: 1.9;
  }

  .entry-content h2 {
    font-size: 32px;
  }

  .entry-content h3 {
    font-size: 25px;
  }

  .entry-content blockquote,
  .entry-content .wp-block-quote {
    padding-left: 18px;
    font-size: 26px;
  }

  .entry-content .alignwide,
  .entry-content .alignfull {
    width: calc(100% + 40px);
    margin-left: -20px;
  }

  .entry-content .alignwide img,
  .entry-content .alignfull img {
    border-radius: 0;
  }

  .article-footer {
    padding: 0 20px 42px;
  }

  .article-tags {
    margin-bottom: 32px;
  }

  .post-navigation {
    grid-template-columns: 1fr;
  }

  .post-nav-link {
    min-height: 124px;
    padding: 22px 0;
  }

  .post-nav-link + .post-nav-link {
    border-top: 1px solid var(--hairline);
    border-left: 0;
  }

  .post-nav-link.is-next {
    text-align: left;
    align-items: flex-start;
  }

  .post-nav-title {
    margin-top: 20px;
    font-size: 24px;
  }

  .content-panel {
    padding: 30px 20px 44px;
  }

  .content-panel .entry-title {
    font-size: 44px;
  }

  .post-card-copy {
    padding: 20px;
  }

  .post-card-title {
    font-size: 30px;
  }
}

@media (max-width: 390px) {
  .site-logo {
    width: min(174px, 56vw);
  }

  .header-message {
    margin-top: 18px;
    font-size: 12px;
  }

  .slider-stage {
    margin-top: 28px;
  }

  .article-shell,
  .content-shell {
    padding-top: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* v1.4 — desktop scale normalization
   Large and high-density displays use CSS pixels, not physical pixels.
   These caps keep the composition at a stable editorial size instead of
   allowing vw/vh values to enlarge indefinitely on Full HD, Retina, or 4K. */
@media (min-width: 981px) {
  :root {
    --page-padding-x: 0px;
    --hero-top: 160px;
    --hero-bottom-space: 72px;
    --hero-width: min(
      1280px,
      calc(100vw - 280px),
      calc((100svh - var(--hero-top) - var(--hero-bottom-space)) * 16 / 9)
    );
    --hero-height: auto;
  }

  .site-header {
    height: 160px;
  }

  .site-logo {
    top: 40px;
    left: max(42px, calc(50vw - 720px));
    width: clamp(205px, 13vw, 250px);
  }

  .header-message {
    top: 55px;
    left: calc(50% - 240px);
    right: max(52px, calc(50vw - 720px));
    gap: .6em;
    font-size: clamp(17px, 1.2vw, 21px);
    line-height: 1.3;
  }

  .slider-stage {
    top: var(--hero-top);
    left: 50%;
    width: var(--hero-width);
    height: auto;
    aspect-ratio: 16 / 9;
    transform: translateX(-50%);
  }

  .slide-copy {
    top: 50%;
    right: auto;
    left: 34px;
    bottom: auto;
    width: min(48%, 590px);
    max-width: calc(100% - 84px);
    transform: translateY(-50%);
  }

  .slider-next,
  .slider-prev {
    width: 34px;
    height: 110px;
  }

  .slider-next { right: -72px; }
  .slider-prev { left: -72px; }
}

@media (min-width: 1700px) {
  .site-logo {
    left: calc(50vw - 720px);
  }

  .header-message {
    left: calc(50% - 250px);
    right: calc(50vw - 720px);
  }
}

/* v1.5 — article-edge alignment and balanced front-page spacing */
@media (min-width: 981px) {
  /* The single-post header now shares the exact 1380px content grid used by
     .article-shell. On narrower desktop widths, both resolve to 24px. */
  .single .site-logo {
    left: max(24px, calc((100vw - 1380px) / 2));
  }

  .single .site-index-link {
    right: max(24px, calc((100vw - 1380px) / 2));
  }

  /* Keep a visible lower field beneath the 16:9 hero, even when browser
     chrome or the WordPress admin bar reduces the usable viewport height. */
  .home .hero-area {
    min-height: 100svh;
    padding-bottom: var(--hero-bottom-space);
  }
}

@media (max-width: 720px) {
  /* Match the mobile article card edge without changing the home-page header. */
  .single .site-header {
    padding-right: 8px;
    padding-left: 8px;
  }

  .single .site-index-link {
    right: 8px;
  }
}

/* v1.6 — shared header grid and WebGL front page */
@media (min-width: 981px) {
  /* Match the front-page logo to the exact left edge used by the article
     sheet. This is the same formula as the single-post masthead. */
  .home .site-logo {
    left: max(24px, calc((100vw - 1380px) / 2));
  }
}

@media (max-width: 720px) {
  /* Article pages use an 8px outer column on mobile. Align only the home
     logo to that same edge while retaining the current message measure. */
  .home .site-header {
    padding-left: 8px;
  }

  .home .header-message {
    margin-right: 14px;
    margin-left: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vapor-webgl-bg {
    transition: none;
  }
}



/* v1.7 — article media slider and unified typography */
@media (max-width: 720px) {
  /* Most hosted video embeds are 16:9. Oversize them inside the 4:5 mobile
     card so they crop rather than stretch. */
  .slide-media-video-embed {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 178%;
    height: 100%;
    transform: translate(-50%, -50%);
  }
}


/* v2.0 — self-hosted Inter / Noto Sans JP typography */
.home .slide-copy,
.home .slide-copy *,
.home .slide-category,
.home .slide-title,
.home .slider-status,
.home .slider-next,
.home .slider-prev {
  /* Force the theme-hosted font stack over WordPress global typography. */
  font-family: var(--font-primary) !important;
}

.home .slide-title {
  font-size: clamp(30px, 2.15vw, 42px) !important;
  font-weight: 400 !important;
  line-height: .98 !important;
  letter-spacing: -.038em !important;
}

.home .slide-category {
  font-size: clamp(13px, .9vw, 16px) !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  letter-spacing: .015em !important;
}

.slider-next[hidden],
.slider-prev[hidden] {
  display: none !important;
}

@media (max-width: 720px) {
  .home .slide-title {
    font-size: clamp(28px, 8.2vw, 36px) !important;
  }

  .home .slide-category {
    font-size: 13px !important;
  }

  .image-shade {
    background:
      linear-gradient(90deg, rgba(3, 13, 11, .62) 0%, rgba(3, 13, 11, .26) 38%, transparent 72%),
      linear-gradient(0deg, rgba(3, 13, 11, .12), transparent 42%);
  }
}


/* v2.1 — tighter responsive article rhythm and Gutenberg type scale */
/*
 * Keep the editorial hierarchy, but remove the excessive vertical voids
 * between the title, article metadata, and the first content block.
 */
@media (min-width: 721px) {
  .single .article-masthead {
    padding-bottom: clamp(24px, 2.5vw, 38px);
  }

  .single .article-content-grid {
    padding-top: clamp(30px, 3.2vw, 48px);
  }
}

@media (max-width: 720px) {
  /* The mobile header is in normal flow, so the article needs only a modest
     breathing space below the logo rather than a second header-sized offset. */
  .single .article-shell {
    padding-top: 42px;
  }

  .single .article-masthead {
    padding-bottom: 12px;
  }

  .single .article-content-grid {
    padding-top: 16px;
  }

  .single .article-rail {
    margin-bottom: 26px;
  }
}

@media (max-width: 390px) {
  .single .article-shell {
    padding-top: 34px;
  }
}

/* WordPress global styles assign fairly large values to Medium and Large.
 * These later, specific rules intentionally remap them one visual step down:
 * Medium → small-body scale, Large → medium-body scale. */
.entry-content .has-small-font-size {
  font-size: 14px !important;
  line-height: 1.9 !important;
}

.entry-content .has-medium-font-size {
  font-size: clamp(15px, .92vw, 16px) !important;
  line-height: 1.92 !important;
}

.entry-content .has-large-font-size {
  font-size: clamp(17px, 1.08vw, 18.5px) !important;
  line-height: 1.88 !important;
}

.entry-content .has-x-large-font-size,
.entry-content .has-huge-font-size {
  font-size: clamp(20px, 1.45vw, 24px) !important;
  line-height: 1.75 !important;
}

@media (max-width: 720px) {
  .entry-content .has-small-font-size {
    font-size: 13.5px !important;
  }

  .entry-content .has-medium-font-size {
    font-size: 15px !important;
  }

  .entry-content .has-large-font-size {
    font-size: 17px !important;
  }

  .entry-content .has-x-large-font-size,
  .entry-content .has-huge-font-size {
    font-size: 20px !important;
  }
}


/* v2.2 — connected taxonomy, writer, date, and tag archives */
.article-meta-link,
.article-rail a,
.archive-context-link,
.post-card-meta a {
  color: inherit;
  text-decoration: none;
}

.article-meta-link,
.article-rail a {
  position: relative;
  width: fit-content;
}

.article-meta-link::after,
.article-rail a::after,
.archive-context-link::after,
.post-card-meta a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -2px;
  left: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s var(--ease);
}

.article-meta-link:hover::after,
.article-meta-link:focus-visible::after,
.article-rail a:hover::after,
.article-rail a:focus-visible::after,
.archive-context-link:hover::after,
.archive-context-link:focus-visible::after,
.post-card-meta a:hover::after,
.post-card-meta a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.archive-intro {
  position: relative;
  margin-bottom: 24px;
  padding: clamp(34px, 5vw, 72px) clamp(30px, 5.5vw, 82px);
}

.archive-eyebrow {
  margin: 0 0 18px;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.archive-title {
  max-width: 1050px;
  margin: 0;
  font-size: clamp(42px, 5.4vw, 82px);
  font-weight: 400;
  line-height: .96;
  letter-spacing: -.045em;
  overflow-wrap: anywhere;
}

.archive-description {
  max-width: 720px;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.75;
}

.archive-context {
  margin-top: 28px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.archive-context-link {
  position: relative;
  display: inline-block;
}

.post-card-image.is-empty {
  background: #fff;
}

.post-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: .06em;
}

.post-card-meta a {
  position: relative;
}

@media (max-width: 720px) {
  .archive-intro {
    margin-bottom: 16px;
    padding: 28px 20px 32px;
  }

  .archive-eyebrow {
    margin-bottom: 14px;
    font-size: 10px;
  }

  .archive-title {
    font-size: clamp(38px, 11vw, 54px);
  }

  .archive-description {
    margin-top: 18px;
    font-size: 15px;
  }

  .archive-context {
    margin-top: 20px;
  }
}

/* Replace the legacy permanent kicker underline with the shared hover cue. */
.article-kicker .article-meta-link {
  border-bottom: 0;
}

/* v2.3 — specific child-category labels and balanced article titles */
.article-sheet .entry-title {
  width: calc(100% - clamp(8px, 2vw, 28px));
  max-width: 100%;
  font-size: clamp(34px, 2.5vw, 50px);
  line-height: 1.02;
  letter-spacing: -.04em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.article-kicker .article-meta-link:first-child {
  text-transform: uppercase;
}

.home .slide-category {
  text-transform: none;
}

.article-category-link {
  text-transform: none;
}

@media (max-width: 760px) {
  .article-sheet .entry-title {
    width: calc(100% - 8px);
    font-size: clamp(28px, 7.6vw, 38px);
    line-height: 1.04;
    letter-spacing: -.035em;
  }
}

@media (max-width: 390px) {
  .article-sheet .entry-title {
    width: calc(100% - 6px);
    font-size: clamp(27px, 7.45vw, 34px);
  }
}



/* v2.4 — parent/subcategory roles, static listing images, mobile alignment */
@media (max-width: 720px) {
  /* Align the logo with the inner text column of article/page/archive cards. */
  .site-header,
  .single .site-header,
  .home .site-header {
    padding-right: 28px;
    padding-left: 28px;
  }


  /* Align INDEX to the same inner-right column rather than the card edge. */
  .site-index-link,
  .single .site-index-link {
    right: 28px;
  }
}

/* v2.5 — rich media restored only for the home slider */
.slide-media-audio {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(720px, calc(100% - 48px));
  height: 54px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}


/* v2.5.1 — mobile logo optical alignment
   The bundled PNG contains a very small transparent inset on its left edge.
   Shift only the rendered logo two pixels left so its visible strokes align
   with the card/image text column, without moving INDEX or header spacing. */
@media (max-width: 720px) {
  .site-logo {
    transform: translateX(-2px);
  }
}


/* v2.5.3 — unified mobile logo alignment
   Use the same 28px header inset on the home page and article/archive pages.
   The existing -2px optical correction for the PNG remains unchanged. */

/* v2.6 — ARTIST taxonomy and separated artist/title presentation */
.article-title-group,
.slide-title-group,
.post-card-title-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.article-title-group {
  gap: 10px;
}

.slide-title-group {
  gap: 4px;
  width: 100%;
}

.post-card-title-group {
  gap: 4px;
  margin-top: 8px;
}

.post-card-title-group .post-card-title {
  margin: 0;
}

.article-artist {
  position: relative;
  display: block;
  width: fit-content;
  max-width: 100%;
  color: inherit;
  font-family: var(--font-primary) !important;
  font-style: normal;
  font-weight: 400;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.article-artist::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -2px;
  left: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s var(--ease);
}

.article-artist:hover::after,
.article-artist:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* The copy sits above the full-slide story link. Pointer events pass through
   to the story link except on the dedicated ARTIST archive link. */
.home .slide-copy {
  z-index: 3;
  pointer-events: none;
}

.home .slide-artist,
.home .slide-title {
  pointer-events: auto;
}

.home .slide-artist {
  font-size: clamp(18px, 1.25vw, 24px);
  line-height: 1.12;
  letter-spacing: -.02em;
}

.article-masthead-artist {
  font-size: clamp(18px, 1.6vw, 26px);
  line-height: 1.16;
  letter-spacing: -.025em;
}

.post-card-artist {
  font-size: clamp(15px, 1.35vw, 20px);
  line-height: 1.18;
  letter-spacing: -.015em;
}

@media (max-width: 720px) {
  .article-title-group {
    gap: 7px;
  }

  .home .slide-artist {
    font-size: clamp(17px, 4.8vw, 21px);
  }

  .article-masthead-artist {
    font-size: clamp(16px, 4.7vw, 20px);
  }

  .post-card-artist {
    font-size: clamp(14px, 4.2vw, 18px);
  }
}


/* v2.6.1 — ARTIST and title use the same type size everywhere */
.home .slide-artist {
  font-size: clamp(30px, 2.15vw, 42px) !important;
  line-height: .98;
  letter-spacing: -.038em;
}

.article-sheet .article-masthead-artist {
  font-size: clamp(34px, 2.5vw, 50px);
  line-height: 1.02;
  letter-spacing: -.04em;
}

.post-card-artist {
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.04;
  letter-spacing: -.03em;
}

@media (max-width: 760px) {
  .article-sheet .article-masthead-artist {
    font-size: clamp(28px, 7.6vw, 38px);
    line-height: 1.04;
    letter-spacing: -.035em;
  }
}

@media (max-width: 720px) {
  .home .slide-artist {
    font-size: clamp(28px, 8.2vw, 36px) !important;
  }

  .post-card-artist {
    font-size: 30px;
  }
}

@media (max-width: 390px) {
  .article-sheet .article-masthead-artist {
    font-size: clamp(27px, 7.45vw, 34px);
  }
}


/* ==========================================================================
   v2.7.0 — alignment, listing parity, navigation and legibility
   --------------------------------------------------------------------------
   Everything below is additive. No title font, size, weight or line height is
   changed, and the slider, WebGL background, logo/INDEX mobile insets, media
   handling and existing links behave exactly as in 2.6.1.
   ========================================================================== */

/* --- (4) One desktop grid for the logo and INDEX on every template ---------
   Until now only .home and .single were pinned to the 1380px content grid.
   Category, tag, ARTIST, WRITER, date, search, blog and page templates used a
   1440px-based formula, so the logo sat about 30px outside the card edge and
   INDEX about 44px inside it. These two rules put every template on the same
   column as the cards. Mobile insets (28px) are untouched. */
@media (min-width: 981px) {
  .site-logo {
    left: max(24px, calc((100vw - 1380px) / 2));
  }

  .site-index-link {
    right: max(24px, calc((100vw - 1380px) / 2));
  }
}

/* --- (6) Removed in 2.7.2 ------------------------------------------------
   2.7.0 turned the slider category into a link to its category archive. 2.7.2
   reverts that: the home slider now carries exactly one destination, the
   article itself. The label is still rendered, just as plain text. To bring the
   link back, restore the markup in front-page.php and add:
       .home a.slide-category { position: relative; width: fit-content;
                                pointer-events: auto; }
   ------------------------------------------------------------------------- */

/* --- (8) Slide counter and arrow legibility on desktop --------------------
   The 01 / 05 counter already existed but was only shown below 981px, so
   desktop visitors had no way of knowing how many slides there were. The
   arrows themselves are unchanged in size, position and behaviour; they only
   gain a soft halo so the 1.15px stroke survives the red area of the
   background. */
@media (min-width: 981px) {
  .slider-status {
    display: flex;
  }

  .slider-next svg,
  .slider-prev svg {
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, .55));
  }
}

.slider-status {
  text-shadow: 0 0 10px rgba(255, 255, 255, .6);
}

/* Enlarge the arrow hit area to 48px without changing the drawn glyph. */
.slider-next::before,
.slider-prev::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(48px, 100%);
  height: max(48px, 100%);
  transform: translate(-50%, -50%);
}

/* --- (9) Mobile slider copy shares the 28px text column -------------------
   Logo, INDEX and card copy all sit 28px from the screen edge. The slider text
   sat at 30px (12px stage margin + 18px inset). 16px restores the shared
   column. The image edge stays at 12px; see README for the optional 8px
   variant. */
@media (max-width: 720px) {
  .slide-copy {
    left: 16px;
  }
}

/* --- (10) Legibility over bright images ------------------------------------
   ARTIST now renders at title size, so the copy block is roughly twice as tall
   as it was in 2.5.x and covers more of the photograph. The left shade reaches
   slightly further across the image at both breakpoints. Font size, weight and
   line height are unchanged. */
.image-shade {
  background:
    linear-gradient(90deg, rgba(3, 13, 11, .60) 0%, rgba(3, 13, 11, .30) 34%, transparent 70%),
    linear-gradient(0deg, rgba(3, 13, 11, .20), transparent 40%);
}

/* No line clamp is applied. -webkit-line-clamp requires overflow: hidden, and
   overflow: hidden clips ink, not just overflowing lines: the 18px blurred
   text-shadow that keeps the copy readable over photographs would be cut off at
   the edge of the text block on every slide, not only on long titles. Measured
   worst cases still fit (a 40-character title is three lines of 590px on
   desktop and four lines of 271px on a 390px phone), so the guard costs more
   than it returns. README documents an opt-in snippet if a title ever needs it. */

@media (max-width: 720px) {
  .image-shade {
    background:
      linear-gradient(90deg, rgba(3, 13, 11, .64) 0%, rgba(3, 13, 11, .32) 40%, transparent 76%),
      linear-gradient(0deg, rgba(3, 13, 11, .16), transparent 42%);
  }
}

/* --- (11) The featured-image letterbox now reads as paper, not as a box ----
   object-fit: contain leaves bands beside portrait images. The dark tint made
   those bands look like a separate element inside the sheet. max-height is
   deliberately left at 82svh: lowering it would shrink wide 16:9 images and
   create horizontal letterboxing instead. */
.article-feature {
  background: rgba(17, 19, 18, .035);
}

/* --- (12) Focus, tap targets, search form --------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  max-width: 520px;
  margin-top: 26px;
}

.search-form label {
  flex: 1 1 220px;
  min-width: 0;
  margin: 0;
}

.search-form .search-field {
  width: 100%;
  min-height: 44px;
  padding: 11px 16px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: rgba(255, 255, 255, .52);
  color: inherit;
  font-size: 14px;
  letter-spacing: .02em;
}

.search-form .search-field::placeholder {
  color: var(--muted);
}

.search-form .search-submit {
  min-height: 44px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
}

.search-form .search-submit:hover {
  background: #2b312f;
}

.archive-eyebrow .archive-count {
  margin-left: .9em;
  color: var(--muted);
}

.error-404-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  align-items: center;
  margin-top: 30px;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.error-404-actions a {
  position: relative;
}

.error-404-actions a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -3px;
  left: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s var(--ease);
}

.error-404-actions a:hover::after,
.error-404-actions a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

@media (max-width: 720px) {
  .page-numbers {
    min-width: 44px;
    height: 44px;
  }

  .search-form {
    margin-top: 20px;
  }
}


/* ==========================================================================
   v2.7.1 — slider ARTIST fixes
   ========================================================================== */

/* The shared .article-artist hover underline is right for the article masthead
   and the listing cards, where ARTIST sits on a quiet paper background. On the
   slider it lands on top of a photograph, at title size, directly above an
   un-underlined title, so it read as an error rather than as an affordance.
   The link itself is unchanged; only the rule disappears. */
.home .slide-artist::after {
  content: none;
}


/* ==========================================================================
   v2.7.2 — one background everywhere, single-destination cards, masthead
            alignment
   ========================================================================== */

/* --- Article title and body now start on the same vertical line -----------
   .article-masthead and .article-content-grid were built with different first
   columns and different gaps: 185px + clamp(28px, 4vw, 74px) against 180px +
   clamp(30px, 5vw, 86px). On a 1380px sheet that put the title 7px left of the
   body, and between 981px and 1080px the gap widened to about 20px. Both
   grids now use the column and gap of the content grid, so the headline, the
   body text, and any full-width body image share one edge. Column widths of
   the rails, paddings, type and the mobile block layout are unchanged. */
@media (min-width: 721px) {
  .article-masthead {
    grid-template-columns: minmax(130px, 180px) minmax(0, 1fr);
    gap: clamp(30px, 5vw, 86px);
  }
}

@media (min-width: 721px) and (max-width: 1080px) {
  .article-masthead {
    grid-template-columns: 130px minmax(0, 1fr);
  }
}

/* --- The home slider has one destination: the article ---------------------
   ARTIST is still shown above the title, but as plain text. Pointer events
   pass straight through it to the full-slide article link underneath, so a tap
   anywhere on the copy opens the story. Swipe and the arrows are unaffected. */
.home .slide-artist {
  pointer-events: none;
}

/* Any ARTIST rendered as plain text - the slider, and the cards on ARTIST and
   category archives - drops the hover rule that marks a link. */
span.article-artist::after {
  content: none;
}


/* ==========================================================================
   v2.7.3 — wider slider copy, reference-matched background
   ========================================================================== */

/* --- Slider titles wrap as little as possible above the mobile breakpoint --
   The copy column was min(48%, 590px) on desktop, so a 42px headline broke
   after roughly 14 Japanese characters. Type size, weight and line height are
   untouched; the column is simply given the room it needs. Mobile keeps its
   narrow column, where the 4:5 card leaves no horizontal space to spare. */
@media (min-width: 721px) {
  .slide-copy {
    width: min(88%, 1080px);
    max-width: calc(100% - 68px);
  }

  /* Long headlines now reach further across the photograph, so the shade
     keeps a light tail instead of clearing at 70%. The left end, where most
     titles sit, is essentially unchanged. */
  .image-shade {
    background:
      linear-gradient(90deg, rgba(3, 13, 11, .62) 0%, rgba(3, 13, 11, .34) 34%, rgba(3, 13, 11, .18) 64%, rgba(3, 13, 11, .07) 84%, transparent 96%),
      linear-gradient(0deg, rgba(3, 13, 11, .20), transparent 40%);
  }
}

@media (min-width: 721px) and (max-width: 980px) {
  .slide-copy {
    width: min(86%, 760px);
    max-width: calc(100% - 60px);
  }
}


/* ==========================================================================
   v2.7.4 — justified body text
   ========================================================================== */

/* Body copy is set flush on both edges. Three things have to be right for that
   to read well in a bilingual article rather than just look tidy:

   1. Justification opportunities. text-justify is deliberately left at its
      default. inter-word would do nothing at all to a Japanese line, which has
      no spaces, and inter-character would letterspace English words. The
      default lets the browser expand at ideographic boundaries and at word
      spaces in the same line, which is what mixed Japanese and Latin needs.
   2. Line breaking. line-break: strict keeps small kana and the prolonged sound
      mark off the start of a line; kinsoku for the closing punctuation is
      applied by the browser. word-break: normal makes sure Latin words are
      never chopped mid-word to fill a line.
   3. The right edge itself. hanging-punctuation: allow-end lets a comma or a
      full stop hang past the margin instead of forcing the edge inward.

   Paragraphs the editor has explicitly aligned are excluded, so centre- and
   right-aligned blocks keep their alignment. */
.entry-content p:not([class*="has-text-align"]),
.entry-content li,
.entry-content dd {
  text-align: justify;
  word-break: normal;
  line-break: strict;
  hanging-punctuation: allow-end;
}

/* Progressive enhancement. text-spacing-trim removes the built-in side bearing
   of full-width punctuation at a line start, and text-autospace inserts the
   quarter-em that belongs between Japanese and Latin. Both are ignored by
   browsers that do not implement them, with no fallback needed. */
.entry-content {
  text-spacing-trim: trim-start;
  text-autospace: normal;
}

/* Display type keeps a ragged edge: a pull quote set at 44px would open visible
   gaps if it were forced flush. */
.entry-content blockquote p:not([class*="has-text-align"]),
.entry-content .wp-block-pullquote p:not([class*="has-text-align"]) {
  text-align: left;
}


/* ==========================================================================
   v2.7.5 — the featured image is an ordinary body image
   ========================================================================== */

/* The featured image used to sit between the masthead and the content grid as a
   full-bleed band with its own letterbox background and an 82svh cap. It now
   lives inside .entry-content as the first figure, so it inherits the column,
   the left edge, the corner radius, the rhythm below it, and the caption style
   of any image placed in the body.

   These rules undo the band treatment. Everything that makes a body image look
   the way it does is inherited, not restated: the 3px radius comes from
   .entry-content img and the 1.75em space below from .entry-content figure. */
.entry-content .article-feature {
  display: block;
  width: auto;
  min-height: 0;
  margin: 0 0 1.75em;
  background: none;
}

.entry-content .article-feature img,
.entry-content .entry-featured-image {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: none;
  margin: 0;
  object-fit: fill;
}


/* ==========================================================================
   v2.7.6 — note only
   --------------------------------------------------------------------------
   The featured image is no longer printed inside the article, so .article-feature
   and .entry-featured-image no longer match anything. Their rules are left in
   place, unused, so that restoring the markup in single.php is all that is
   needed to bring either presentation back:

     - the v2.7.5 rules give it the body-image treatment inside .entry-content
     - the original rules give it the full-bleed band above .article-content-grid

   Nothing else in this release touches CSS.
   ========================================================================== */


/* ==========================================================================
   v2.7.10 — the gradient is generated again
   --------------------------------------------------------------------------
   2.7.9 shipped the supplied JPEG and sampled it as a texture. That was exact
   but carried the file's compression noise, which showed once it was stretched
   across a screen. The shader draws the gradient again, from a composition
   fitted numerically to that same file, so it is clean at any size.

   The image override on body::before is therefore withdrawn: the CSS layer goes
   back to the radial-gradient stack defined in the base rule above, which is
   the fallback for browsers without WebGL. The one rule kept from 2.7.9 is
   below.
   ========================================================================== */

/* Nothing is laid over the artwork once the shader is running. This layer used
   to keep a soft white bloom at 12% while WebGL was active, which lightened two
   areas of the picture. */
.vapor-webgl-ready::after {
  opacity: 0;
}


/* ==========================================================================
   v2.8.0 — the background is a still gradient
   ========================================================================== */

/* No layer of the background moves any more. The shader draws once; these two
   rules stop the CSS fallback drifting, so a browser without WebGL sees the
   same still picture rather than a moving approximation of one. */
body::before {
  inset: 0;
  transform: none;
  animation: none;
}

/* The soft white bloom is off in every case now, not only once the shader has
   started. It lightened two areas of the artwork. */
body::after {
  opacity: 0;
}


/* ==========================================================================
   v2.8.1 — primary navigation
   --------------------------------------------------------------------------
   The single INDEX link becomes a row of items on desktop and a full-screen
   sheet on mobile. Type, tracking and the hover underline are carried over from
   .site-index-link unchanged, so this reads as the same element grown rather
   than a new one added. .site-header is pointer-events: none, so both the row
   and the button have to opt back in.
   ========================================================================== */

.site-nav-list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  position: relative;
  display: inline-block;
  color: inherit;
  text-decoration: none;
}

.site-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s var(--ease);
}

/* Every item behaves identically: one hairline wiping in from the left on
   hover, and nothing at rest. The current page is still announced through
   aria-current for screen readers, but carries no mark of its own. */
.site-nav a:hover::after,
.site-nav a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.site-nav-toggle {
  display: none;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

/* --- Desktop: a row on the same grid line as the logo -------------------- */
@media (min-width: 981px) {
  .site-nav {
    position: absolute;
    top: 58px;
    right: max(24px, calc((100vw - 1380px) / 2));
    pointer-events: auto;
  }

  .site-nav-list {
    align-items: center;
    gap: 30px;
  }

  .site-nav a {
    padding: 8px 0;
    font-size: 12px;
    line-height: 1;
    letter-spacing: .18em;
    text-transform: uppercase;
  }
}

/* --- Mobile: three lines, and a sheet ------------------------------------ */
@media (max-width: 980px) {
  /* A 44px target centred on the 20px rule, so the drawn lines land on the
     same inset the INDEX link used and the tappable area is still full size. */
  .site-nav-toggle {
    position: absolute;
    top: 23px;
    right: 5px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    pointer-events: auto;
  }

  .site-nav-toggle-lines,
  .site-nav-toggle-lines::before,
  .site-nav-toggle-lines::after {
    width: 20px;
    height: 1px;
    background: currentColor;
    transition: transform .32s var(--ease), background-color .2s var(--ease);
  }

  .site-nav-toggle-lines {
    position: relative;
    display: block;
  }

  .site-nav-toggle-lines::before,
  .site-nav-toggle-lines::after {
    content: "";
    position: absolute;
    left: 0;
  }

  .site-nav-toggle-lines::before { top: -5px; }
  .site-nav-toggle-lines::after  { top: 5px; }

  /* The same paper as the article sheet and the cards, so this reads as a
     sheet of the site slid over the screen rather than an interface panel. */
  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 140px 28px 80px;
    overflow-y: auto;
    background: rgba(250, 250, 247, .94);
    backdrop-filter: blur(20px) saturate(1.12);
    -webkit-backdrop-filter: blur(20px) saturate(1.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .38s var(--ease), transform .38s var(--ease), visibility .38s;
    pointer-events: auto;
  }

  .site-nav-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .site-nav a {
    padding: 9px 0;
    font-size: clamp(26px, 7vw, 34px);
    line-height: 1.15;
    letter-spacing: -.03em;
  }

  .site-nav a::after {
    bottom: 4px;
  }

  /* The logo stays above the sheet. The site does not disappear behind its
     own menu. */
  .site-logo {
    z-index: 2;
  }
}

@media (max-width: 720px) {
  .site-nav-toggle {
    right: 16px;
  }
}

/* --- Open state ---------------------------------------------------------- */
body.is-nav-open {
  overflow: hidden;
}

body.is-nav-open .site-nav {
  opacity: 1;
  visibility: visible;
  transform: none;
}

body.is-nav-open .site-nav-toggle-lines {
  background: transparent;
}

body.is-nav-open .site-nav-toggle-lines::before {
  transform: translateY(5px) rotate(45deg);
}

body.is-nav-open .site-nav-toggle-lines::after {
  transform: translateY(-5px) rotate(-45deg);
}


/* ==========================================================================
   v2.8.4 — header position under the admin bar
   --------------------------------------------------------------------------
   The header sat 32px lower on every template except the front page, but only
   while logged in. Two different positioning schemes were being given the same
   offset:

     front page : .home .site-header is position: fixed, anchored to the
                  viewport, so it does need the height of the admin bar added.
     everywhere : .site-header is position: absolute against body, and
     else       WordPress has already pushed body down by the height of the bar
                  through html { margin-top }. Adding it again double-counted.

   Below 981px the header is in normal document flow, where the browser has
   already accounted for the bar and any offset is simply wrong. The rule is now
   applied only to the one case that is anchored to the viewport.
   ========================================================================== */

.admin-bar .site-header {
  top: 0;
}

@media (max-width: 980px) {
  .admin-bar .site-header {
    top: auto;
  }
}

@media (min-width: 981px) {
  .admin-bar.home .site-header {
    top: 32px;
  }
}


/* ==========================================================================
   v2.8.5 — the header shares the content grid instead of measuring the window
   --------------------------------------------------------------------------
   The logo and the navigation were placed with viewport maths, while the cards
   below them are placed with a percentage of their parent:

     content   width: min(1380px, calc(100% - 48px))   excludes the scrollbar
     header    calc((100vw - 1380px) / 2)              includes the scrollbar

   The front page sets overflow: hidden and has no scrollbar, so there the two
   agreed. Every other template scrolls, so 100vw was around 15px wider than the
   column the cards actually occupy, and the header edges landed inside them.
   Five different formulas had accumulated across templates and breakpoints -
   3.62vw, 4.1vw, max(42px, 50vw - 720px), calc(50vw - 720px) and
   max(24px, (100vw - 1380px) / 2) - layered by specificity, so which one won
   depended on the page.

   All of it is replaced by one box declared identically to .content-shell. The
   logo sits at its left edge and the navigation at its right edge, so they line
   up with the cards on every template, with or without a scrollbar, at every
   width. No vw units are involved.
   ========================================================================== */

@media (min-width: 981px) {
  .site-header-inner {
    position: relative;
    width: min(1380px, calc(100% - 48px));
    height: 100%;
    margin: 0 auto;
  }

  /* The per-template overrides are all collapsed into this one edge. */
  .site-logo,
  .home .site-logo,
  .single .site-logo {
    left: 0;
  }

  .site-nav {
    right: 0;
  }
}

/* Below 981px the header is in normal document flow and the wrapper stays out
   of the way, so the menu button keeps resolving against .site-header and the
   28px column is untouched. */
@media (max-width: 980px) {
  .site-header-inner {
    position: static;
  }
}


/* ==========================================================================
   v2.8.6 — the front page reserves the scrollbar it does not have
   --------------------------------------------------------------------------
   Measured on a 1920px window: the logo and the menu sit at 263px on every
   template that scrolls, and at 270px on the front page. The cards, the intro
   panel and the header all agree with each other on those pages, so the header
   grid from 2.8.5 is correct; the remaining 7px is the front page disagreeing
   with the rest of the site.

   The cause is body.home { overflow: hidden }. Without a scrollbar the usable
   width is the full 1920px and a centred 1380px column starts at 270px. With
   one it is 1905px and the column starts at 262.5px. Nothing in the CSS is
   wrong: the window is a different size.

   Reserving the gutter on every page makes the usable width the same
   everywhere, so the column lands in the same place whether or not the page
   happens to scroll.
   ========================================================================== */

html {
  scrollbar-gutter: stable;
}

/* Applied to the front page as well, since its overflow is what propagates to
   the viewport there. */
body.home {
  scrollbar-gutter: stable;
}

/* The reserved gutter would otherwise cut the gradient short of the window
   edge. 100vw includes it, so the background still bleeds to the edge on both
   layers while the content column keeps measuring the scrollport. */
.vapor-webgl-bg,
body::before,
body::after {
  right: auto;
  width: 100vw;
}


/* ==========================================================================
   v2.8.7 — the gutter reservation actually takes effect
   --------------------------------------------------------------------------
   2.8.6 reserved the scrollbar gutter but changed nothing: the logo still
   measured 270px on the front page against 263px everywhere else. The rule was
   correct and inert. scrollbar-gutter only creates a gutter when overflow is
   scroll or auto; the front page is overflow: hidden, which is neither, so
   there was nothing for stable to stabilise.

   The front page is switched to overflow-y: auto. Its content is exactly one
   viewport tall, so no scrollbar is drawn and the page still cannot be
   scrolled, but the gutter is now reserved and the usable width matches every
   other template. The horizontal axis stays clipped, as before.
   ========================================================================== */

body.home {
  overflow-x: hidden;
  overflow-y: auto;
}

/* Reserved on every template, so a page too short to scroll does not widen and
   shift the column the way the front page was doing. */
html,
body {
  scrollbar-gutter: stable;
}


/* ==========================================================================
   v2.9.0 — the front page continues into the story list
   ========================================================================== */

/* The same column the cards use everywhere else, so the grid below the slider
   lines up with the header above it and with the index and the archives. */
.home-stories {
  width: min(1380px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(32px, 6vh, 72px) 0 clamp(72px, 10vh, 120px);
}

.home-stories-more {
  margin: clamp(28px, 4vh, 44px) 0 0;
}

/* Set like a navigation item rather than a button, since the theme has no
   filled controls anywhere else. */
.home-stories-more a {
  position: relative;
  display: inline-block;
  padding: 8px 0;
  color: inherit;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
}

.home-stories-more a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s var(--ease);
}

.home-stories-more a:hover::after,
.home-stories-more a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* The front page header was fixed, which was harmless while the page could not
   scroll. Now that it can, a pinned header would sit over the cards for the
   whole scroll. It behaves like every other template again: it scrolls away.
   Below 981px it was already in normal flow, so that rule is left alone. */
@media (min-width: 981px) {
  .home .site-header {
    position: absolute;
  }

  /* No longer anchored to the viewport, so it no longer needs the admin bar
     added on top of the offset the browser has already applied. */
  .admin-bar.home .site-header {
    top: 0;
  }
}


/* ==========================================================================
   v2.9.2 — Bandcamp embeds fill their frame
   --------------------------------------------------------------------------
   Measured from the article: the frame was the full 760px of the text column
   while the player laid itself out at exactly 700px, leaving 60px of the
   player's own white background showing at the right edge. The theme was not
   stretching anything; it only ever set max-width. The frame simply came in
   wider than the player is built for.

   Capping the frame at the width the player is designed for makes it fill edge
   to edge. Below 700px the player is fluid, so max-width keeps a phone correct.
   ========================================================================== */

/* v2.9.3: Bandcamp writes style="width: 100%" into the iframe tag itself, and
   an inline style outranks every selector. That is why the rule below changed
   nothing on the page in 2.9.2 despite being correct. Overriding a third
   party's inline style is what !important is for.

   width is forced; max-width is deliberately left ordinary, so the frame still
   shrinks to the column on a phone rather than overflowing at 700px. */
.entry-content iframe[src*="bandcamp.com"],
.entry-content iframe[src*="EmbeddedPlayer"] {
  width: 700px !important;
  max-width: 100%;
}


/* ==========================================================================
   v2.9.4 — related stories under every article
   --------------------------------------------------------------------------
   The cards are the shared listing card, in the shared two-column grid, so the
   artist line, the links, the image priority and the spacing are the ones used
   on the index and the archives rather than a copy of them. An article with no
   artist assigned simply prints the title, which is how the card has always
   behaved.
   ========================================================================== */

.article-related {
  width: 100%;
  margin-top: clamp(40px, 6vh, 76px);
}

.article-related-label {
  margin: 0 0 18px;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: .18em;
  text-transform: uppercase;
}

@media (max-width: 720px) {
  .article-related {
    margin-top: clamp(32px, 5vh, 48px);
    padding: 0 8px;
  }
}