/* Einhar's light editorial system: paper, ink, quiet type and original prints. */
:root {
  color-scheme: light;
  --einhar-canvas: #fff;
  --einhar-paper: #fff;
  --einhar-ink: #171717;
  --einhar-copy: #777;
  --einhar-muted: #898989;
  --einhar-soft: #f5f5f3;
  --einhar-pixel-field: url('assets/pixel-texture.9ea05d251302.webp');
  --einhar-pixel-size: 256px 256px;
  --surface-page: #fff;
  --surface-raised: #f5f5f3;
  --surface-hover: #ececea;
  --ink-primary: #171717;
  --ink-secondary: #6e6e6e;
  --ink-muted: #737373;
  --ink-soft: #c9c9c6;
  --page-edge: clamp(15px, 1vw, 19px);
  --black: var(--surface-page);
  --text: var(--ink-primary);
  --body: var(--ink-secondary);
  --soft: var(--ink-muted);
  --dim: var(--ink-muted);
  --paper: var(--surface-page);
  --paperink: var(--ink-primary);
}

html,
body {
  background: var(--surface-page) !important;
  color: var(--ink-primary) !important;
}

/* Every page surface resolves to the same paper token, including generated legal pages. */
html body :is(main,.site-header,.header-shell,.nav-stage,.journal-page,.journal-layout,.journal-center,.journal-sidebar,.journal-index,.journal-feed,.journal-article,.journal-article-head,.journal-article-body,.opening,.opening-continuation,.essay,.paired-passage,.recent-posts,.decision-sequence,.decision-sticky,.site-footer,.site-footer .footer-identity,.site-footer .particle-title,.legal-layout) {
  background-color: var(--surface-page) !important;
  color: var(--ink-primary) !important;
}

html body :is(h1,h2,h3,h4,.journal-entry-title,.journal-back-link,.journal-return,.journal-article-end,.recent-more,.footer-copyright,.footer-bottom a,.site-header .wordmark,.site-header .site-nav a,.site-header .site-nav button,.site-header .menu-mobile-toggle,.site-header .mobile-direct a,.page-legal .legal-layout a) {
  color: var(--ink-primary) !important;
}

html body :is(.opening p,.opening-continuation p,.essay p,.paired-text p,.globe-text p,.journal-intro p,.journal-entry-summary,.journal-article-deck,.journal-article-body p,.journal-article-body ul,.journal-article-body ol,.journal-article-body blockquote,.page-legal .legal-layout p) {
  color: var(--ink-secondary) !important;
}

html body :is(.journal-entry-meta,.journal-article-meta,.journal-entry-kind,.journal-entry-date,.recent-metadata,.journal-index-link,.footer-founder) {
  color: var(--ink-muted) !important;
}

html body .journal-article-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 14px;
}

html body .journal-article-meta time {
  font-variant-numeric: tabular-nums;
}

html body.journal-page-article .journal-sidebar-desktop {
  max-height: none;
  overflow: visible;
  align-self: start;
}

html body.journal-page-article .journal-return {
  display: none;
}

html body.journal-page-article .journal-index-heading {
  margin: -10px 0 -18px;
  padding-left: 10px;
  color: var(--ink-secondary);
  font: 500 12px/1.4 var(--font-einhar, Arial, sans-serif);
}

html body.journal-page-article .journal-index {
  align-items: stretch;
  gap: 2px;
}

html body.journal-page-article .journal-index-link {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  padding: 7px 10px;
  border-radius: 8px;
  color: var(--ink-secondary) !important;
  font-size: 12.5px;
  line-height: 1.42;
  transition: color .18s ease, background-color .18s ease;
}

html body.journal-page-article .journal-index-link:hover,
html body.journal-page-article .journal-index-link:focus-visible,
html body.journal-page-article .journal-index-link[aria-current="location"] {
  color: var(--ink-primary) !important;
  background: var(--surface-raised);
}

html body.journal-page-article .journal-index-link[aria-current="location"] {
  font-weight: 550;
}

/* The Thoughts landing page reads as an open publication, with its topic filter
   under the introduction instead of in a separate navigation rail. */
html body.journal-page:not(.journal-page-article) .journal-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  max-width: none;
  min-height: 0;
  padding: clamp(76px, 8.5vw, 128px) var(--page-edge) clamp(95px, 12vw, 170px) !important;
}

html body.journal-page:not(.journal-page-article) .journal-center {
  display: contents;
}

html body.journal-page:not(.journal-page-article) .journal-intro {
  grid-row: 1;
  max-width: 720px;
  margin: 0 0 clamp(32px, 4.8vw, 66px);
}

html body.journal-page:not(.journal-page-article) .journal-intro h1 {
  margin-bottom: 22px;
  font-size: clamp(48px, 5.4vw, 76px);
}

html body.journal-page:not(.journal-page-article) .journal-intro p {
  max-width: 560px;
  font-size: clamp(16px, 1.35vw, 19px);
}

html body.journal-page:not(.journal-page-article) .journal-sidebar {
  grid-row: 2;
  min-width: 0;
  margin: 0 0 clamp(44px, 5.5vw, 76px);
}

html body.journal-page:not(.journal-page-article) .journal-sidebar-desktop {
  position: static;
  display: block;
  max-height: none;
  overflow: visible;
}

html body.journal-page:not(.journal-page-article) .journal-mobile-browse {
  display: none;
}

html body.journal-page:not(.journal-page-article) .journal-index {
  flex-flow: row wrap;
  align-items: center;
  gap: 5px;
}

html body.journal-page:not(.journal-page-article) .journal-index-link[data-topic] {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 8px 12px;
  border-radius: 9px;
}

html body.journal-page:not(.journal-page-article) .journal-feed {
  grid-row: 3;
  max-width: 1160px;
}

html body.journal-page:not(.journal-page-article) .journal-feature {
  max-width: 100%;
}

/* The mark and its name need the same ink value at rest. */
html body .site-header .wordmark,
html body .site-header .wordmark .einhar-header-name,
html body .site-header .wordmark .einhar-header-symbol,
html body .site-header .wordmark .brand-mark {
  color: var(--ink-primary) !important;
  -webkit-text-fill-color: var(--ink-primary);
}

html body .site-header .site-nav .nav-symbol,
html body .site-header .mobile-direct .nav-symbol {
  color: var(--ink-primary) !important;
}

.site-header .wordmark .einhar-header-name {
  background: none !important;
  background-clip: border-box !important;
}

/* Keep the opening calm and aligned like an editorial studio page. */
.page-home .opening.reading {
  align-items: flex-start !important;
  padding: clamp(38px, 4vw, 60px) var(--page-edge) 0 !important;
  text-align: left !important;
}

.page-home .opening h1 {
  max-width: 560px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #737373 !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  letter-spacing: -.018em !important;
}

.page-home .opening > p {
  max-width: 560px !important;
  margin: 19px 0 0 !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
}

/* Artwork stays image-led, but its ground now meets the white page cleanly. */
.page-home .visual-interlude .grain-frame,
.page-home .decision-visual,
.page-home .decision-sticky {
  background: var(--surface-page) !important;
}

.page-home .visual-interlude .grain-frame::after,
.page-home .decision-visual::after {
  content: none !important;
  background: none !important;
}

.page-home .visual-interlude .grain-frame img,
.page-home .decision-image {
  filter: none !important;
}

.page-home #decision-statement,
.page-home #thinking .independence-heading,
.page-home .grain-letter {
  color: var(--ink-primary) !important;
  -webkit-text-fill-color: var(--ink-primary);
}

/* Inline expanders use a quiet tonal cue in place of an underline or rule. */
html body.page-home .inline-link.expand-trigger {
  color: var(--ink-primary) !important;
  -webkit-text-fill-color: var(--ink-primary);
  background: rgba(0,0,0,.045) !important;
  border: 0 !important;
}

html body.page-home .inline-link .plus {
  color: var(--ink-primary) !important;
}

html body.page-home .inline-link.expand-trigger:hover,
html body.page-home .inline-link.expand-trigger[aria-expanded="true"] {
  background: rgba(0,0,0,.085) !important;
}

html body.page-home .inline-link.expand-trigger:focus-visible,
html body :is(.back-to-top:focus-visible,.footer-bottom a:focus-visible,.page-legal .legal-layout a:focus-visible) {
  outline: 2px solid var(--ink-primary) !important;
  outline-offset: 4px;
}

html body .journal-inline-link,
html body .journal-inline-link:focus-visible {
  color: var(--ink-primary) !important;
  outline-color: var(--ink-primary) !important;
}

/* Menus and filters use open spacing and a soft active wash, without dark panels. */
html body :is(.signin-menu,.journal-index-link[aria-current="page"],.journal-index-link[aria-current="location"],.journal-mobile-browse summary,.journal-article-body blockquote,.journal-article-body pre,.grain-frame,.journal-entry-art,.recent-media,.inline-link[aria-expanded="true"]) {
  background-color: var(--surface-raised) !important;
  color: var(--ink-primary) !important;
}

html body .site-header .signin-menu {
  background-color: rgba(255,255,255,.84) !important;
  border: 0 !important;
  box-shadow: 0 14px 38px rgba(20,20,20,.12) !important;
  backdrop-filter: blur(18px) saturate(1.08);
}

html body .journal-index-link[aria-current="page"],
html body .journal-index-link[aria-current="location"] {
  border: 0 !important;
  border-radius: 7px !important;
}

/* Article imagery and prose share the same quiet editorial treatment. */
html body .journal-entry-art,
html body .journal-article-figure,
html body .journal-article-body blockquote,
html body .journal-article-body pre {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html body .journal-entry-image,
html body .journal-article-figure img,
html body .journal-article-body img {
  filter: none !important;
}

html body .journal-article-body a,
html body .page-legal .legal-layout a {
  color: var(--ink-primary) !important;
  text-decoration-color: var(--ink-soft) !important;
  text-underline-offset: 3px;
}

html body .journal-article-body a:hover,
html body .page-legal .legal-layout a:hover {
  text-decoration-color: var(--ink-primary) !important;
}

html body .journal-article-body blockquote strong {
  color: var(--ink-primary) !important;
}

html body .journal-article-body pre {
  background: var(--surface-raised) !important;
  color: var(--ink-primary) !important;
}

/* Founder credit belongs with the publisher details in the footer. */
.footer-identity-copy {
  display: grid;
  justify-items: start;
  gap: 7px;
}

.footer-founder {
  font: 400 11px/1.35 var(--font-einhar, Arial, sans-serif);
}

html body .site-footer .footer-bottom,
html body .site-footer .footer-identity,
html body .site-footer .particle-title {
  background: var(--surface-page) !important;
}

html body .site-footer .footer-bottom,
html body .site-footer .footer-bottom a,
html body .site-footer .footer-copyright,
html body .site-footer .footer-word-fallback {
  color: var(--ink-primary) !important;
}

html body .site-footer .footer-word-fallback {
  -webkit-text-fill-color: var(--ink-primary) !important;
}

html body .site-footer .footer-copyright .brand-mark,
html body .site-footer .footer-copyright .footer-brand-name,
html body .site-footer .footer-copyright > span:not(.footer-brand-name) {
  color: var(--ink-primary) !important;
  -webkit-text-fill-color: var(--ink-primary) !important;
  background: none !important;
  opacity: 1 !important;
}

html body .site-footer .footer-bottom a:hover {
  color: var(--ink-secondary) !important;
}

@media (max-width: 760px) {
  html body.journal-page-article .journal-return {
    display: inline-flex;
  }
}

@media (max-width: 700px) {
  .page-home .opening.reading {
    padding: 44px var(--page-edge) 0 !important;
  }

  .page-home .opening h1 {
    font-size: 15px !important;
    max-width: 34ch !important;
  }

  .page-home .opening > p {
    font-size: 15px !important;
  }

  .page-home .visual-interlude--field .grain-frame {
    aspect-ratio: 1.15;
  }

  .site-footer .footer-bottom {
    grid-template-columns: 1fr auto !important;
  }

  .site-footer .footer-bottom nav {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .site-footer .back-to-top {
    grid-column: 2;
    grid-row: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header .wordmark:hover .brand-grain-text,
  .site-header .site-nav .nav-direct-link:hover {
    animation: none !important;
  }
}

/* Keep labels legible on paper while a short pixel echo animates the actual letters. */
html body .site-header .wordmark,
html body .site-header .wordmark:hover,
html body .site-header .wordmark:focus-visible,
html body .site-header .wordmark .brand-grain-text,
html body .site-header .wordmark:hover .brand-grain-text,
html body .site-header .wordmark:focus-visible .brand-grain-text,
html body .site-header .site-nav .nav-direct-link:is(:hover,:focus-visible),
html body .site-footer .footer-brand-name:hover {
  color: var(--ink-primary) !important;
  -webkit-text-fill-color: var(--ink-primary) !important;
  background-image: none !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  opacity: 1 !important;
}

html body .site-header .site-nav .nav-direct-link:is(:hover,:focus-visible) {
  transition: color .16s ease !important;
}

/* Topic filters and the article contents rail use a quiet, consistent active wash. */
html body .journal-index-link,
html body .journal-index-link:hover,
html body .journal-index-link:focus-visible,
html body .journal-index-link[aria-current="page"],
html body .journal-index-link[aria-current="location"] {
  opacity: 1 !important;
}

html body .journal-index-link[data-topic]:is(:hover,:focus-visible),
html body.journal-page-article .journal-index-link:is(:hover,:focus-visible),
html body .journal-index-link[data-topic][aria-current="page"],
html body.journal-page-article .journal-index-link[aria-current="location"] {
  background-color: var(--surface-raised) !important;
  color: var(--ink-primary) !important;
}

html body .journal-topic-count {
  color: var(--ink-muted) !important;
  opacity: 1 !important;
}

html body .journal-index-link:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(23,23,23,.16) !important;
}

html body .site-header .site-nav .nav-direct-link:focus-visible {
  outline: none !important;
  border-radius: 9px !important;
  background: var(--surface-raised) !important;
  box-shadow: none !important;
}

html body.journal-page-article .journal-index-heading {
  color: var(--ink-secondary) !important;
  font-size: 13px !important;
  font-weight: 550 !important;
  opacity: 1 !important;
}

html body.journal-page-article .journal-article-body h2[id] {
  scroll-margin-top: 104px;
}

/* Recent writing still inherited white hover text and dark image overlays. */
html body .recent-card-title,
html body .recent-card:hover .recent-card-title,
html body .recent-entry:hover .recent-title,
html body .recent-more:hover {
  color: var(--ink-primary) !important;
  -webkit-text-fill-color: var(--ink-primary) !important;
  opacity: 1 !important;
}

html body .recent-media {
  border: 0 !important;
}

html body .recent-media::after {
  content: none !important;
  background: none !important;
}

html body .recent-thumbnail,
html body .recent-card:hover .recent-thumbnail {
  filter: none !important;
}

html body.page-home .recent-arrow,
html body.page-home .recent-arrow:hover:not(:disabled) {
  background: var(--surface-raised) !important;
  color: var(--ink-primary) !important;
  opacity: 1 !important;
}

html body.page-home .recent-arrow:focus-visible {
  outline: 2px solid var(--ink-primary) !important;
  outline-offset: 3px !important;
}

html body.page-home .recent-arrow:disabled {
  color: var(--ink-muted) !important;
  opacity: .5 !important;
}

/* Section headings stay solid ink; pixel motion is reserved for interactive labels. */
html body.page-home .grain-letter:hover,
html body.page-home #thinking .independence-heading span {
  color: var(--ink-primary) !important;
  -webkit-text-fill-color: var(--ink-primary) !important;
  background-image: none !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  opacity: 1 !important;
  animation: none !important;
}

html body .journal-inline-link:hover,
html body .journal-inline-link:focus-visible {
  color: var(--ink-primary) !important;
  -webkit-text-fill-color: var(--ink-primary) !important;
  opacity: 1 !important;
  outline-color: var(--ink-primary) !important;
}

html body .site-footer .footer-bottom a:hover,
html body .site-footer .footer-bottom a:focus-visible,
html body .site-footer .particle-title:hover .footer-word-fallback {
  color: var(--ink-primary) !important;
  -webkit-text-fill-color: var(--ink-primary) !important;
  opacity: 1 !important;
}

@keyframes einhar-pixel-echo {
  0%, 100% { filter: none; text-shadow: none; }
  24% { filter: contrast(1.08); text-shadow: 1px 0 rgba(23,23,23,.42), -1px 1px rgba(110,110,110,.3); }
  52% { filter: contrast(1.04); text-shadow: -1px 0 rgba(23,23,23,.36), 1px -1px rgba(110,110,110,.26); }
  78% { filter: none; text-shadow: 0 1px rgba(23,23,23,.34), 1px 0 rgba(110,110,110,.22); }
}

html body .is-pixel-active {
  animation: einhar-pixel-echo .32s steps(4, end) both;
}

@media (prefers-reduced-motion: reduce) {
  html body .is-pixel-active { animation: none !important; filter: none !important; text-shadow: none !important; }
}

/* A final state rule catches the older dark-theme fades on shared controls. */
html body a:is(:hover,:focus-visible):not(.skip),
html body button:is(:hover,:focus-visible):not(:disabled),
html body summary:is(:hover,:focus-visible) {
  color: var(--ink-primary) !important;
  -webkit-text-fill-color: var(--ink-primary) !important;
  opacity: 1 !important;
}

html body a:is(:hover,:focus-visible):not(.skip) *,
html body button:is(:hover,:focus-visible):not(:disabled) *,
html body summary:is(:hover,:focus-visible) * {
  -webkit-text-fill-color: currentColor !important;
}

html body ::selection {
  background: var(--ink-primary);
  color: #fff;
}

/* Keep the navigation edge-to-edge like the rest of the editorial frame. */
html body .site-header {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  height: 60px !important;
  position: relative !important;
  top: auto !important;
}

html body .site-header .header-shell {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding-inline: clamp(15px, 1vw, 19px) !important;
  box-sizing: border-box !important;
  height: 60px !important;
}

/* Einhar's mark resolves into square pixels on hover and keyboard focus. */
@keyframes einhar-header-pixels {
  to { background-position: 48px -36px; }
}

.site-header .wordmark { position: relative; isolation: isolate; }
.site-header .wordmark::before {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 0;
  width: 34px;
  height: 24px;
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
  background-image: var(--einhar-pixel-field);
  background-size: var(--einhar-pixel-size);
  background-repeat: repeat;
  -webkit-mask: url("assets/einhar-mark-white.svg") center / 100% 100% no-repeat;
  mask: url("assets/einhar-mark-white.svg") center / 100% 100% no-repeat;
  transition: opacity .18s ease;
}
.site-header .wordmark:hover .einhar-header-symbol,
.site-header .wordmark:focus-visible .einhar-header-symbol { opacity: 0; }
.site-header .wordmark:hover::before,
.site-header .wordmark:focus-visible::before { opacity: 1; animation: einhar-header-pixels .58s steps(5,end) infinite; }
.site-header .wordmark .einhar-header-name { font-size: 18px !important; }
.site-header .site-nav .nav-direct-link { font-size: 14.5px !important; }

@media(max-width:760px) {
  html body .site-header .header-shell { padding-inline: 15px !important; }
  html body .site-header .site-nav { display: flex !important; }
  html body .site-header .site-nav .nav-direct-link { display: inline-flex !important; }
  .site-header .wordmark::before { width: 30px; height: 22px; }
  .site-header .wordmark .einhar-header-name { font-size: 17px !important; }
}

@media(prefers-reduced-motion:reduce) {
  .site-header .wordmark::before,
  .site-header .site-nav .nav-direct-link { transition: none !important; animation: none !important; }
}

/* The header, gallery and editorial sections share one page gutter. */
html { scroll-padding-top: 0 !important; scroll-behavior: auto !important; }
html body .site-header .header-shell { padding-inline: var(--page-edge) !important; }
html body.page-home main#main { width: 100%; max-width: none; margin-inline: 0; padding-inline: 0; box-sizing: border-box; }
html body.page-home .opening.reading { width: 100% !important; max-width: none !important; padding-inline: var(--page-edge) !important; box-sizing: border-box; }
html body.page-home .opening-continuation,
html body.page-home .essay,
html body.page-home .paired-passage,
html body.page-home .recent-posts {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding-inline: var(--page-edge) !important;
  box-sizing: border-box !important;
}
html body.page-home .opening-continuation > p,
html body.page-home .essay > p,
html body.page-home .paired-text,
html body.page-home .essay .unfold-content { max-width: 780px; }
html body.page-home #working-method { width: 100% !important; max-width: none !important; padding-inline: 0 !important; }
html body.page-home .home-visual-gallery { width: 100%; max-width: none; }
html body.page-home .home-work-heading { padding-inline: 0; }
html body.page-home .recent-entries { padding-inline: 0 !important; scroll-padding-inline: 0 !important; }
html body.page-home .opening h1,
html body.page-home .opening > p,
html body.page-home .opening .visual-interlude--field { animation: none !important; }
html body.page-home .visual-interlude--evidence { width: 100%; padding-inline: var(--page-edge); box-sizing: border-box; }

html body.journal-page .journal-layout {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: var(--page-edge) !important;
  box-sizing: border-box;
}
html body.journal-page .journal-center { width: 100%; max-width: none; }
html body.journal-page:not(.journal-page-article) .journal-feed { width: 100%; max-width: none; }
html body.journal-page:not(.journal-page-article) :is(.journal-feature,.journal-entry) { max-width: none; }
html body.journal-page-article .journal-article { width: 100%; max-width: none; }
html body.journal-page-article .journal-article h1 { max-width: 850px; }
html body.page-legal .legal-layout {
  width: 100%;
  max-width: none;
  padding-inline: var(--page-edge);
  box-sizing: border-box;
}
html body .site-footer .footer-bottom { padding-inline: var(--page-edge) !important; }