/* The homepage is about Einhar's way of working. Projects live in the navigation. */
.page-home { --einhar-section-gap: clamp(170px, 16vw, 250px); }
body.page-home { min-width: 0; }
.page-home .nav-stage { width: 100%; }
.page-home #recent-posts { width: 100% !important; max-width: 100% !important; }
.page-home .opening { margin-bottom: 0 !important; }
.page-home #approach,
.page-home #working-method,
.page-home #thinking,
.page-home #research-note,
.page-home #recent-posts,
.page-home #horizon { margin-top: var(--einhar-section-gap) !important; margin-bottom: 0 !important; }
.page-home #horizon { margin-bottom: var(--einhar-section-gap) !important; }

.page-home .opening.reading {
  width: 100% !important;
  max-width: none !important;
  margin-inline: auto !important;
  padding-top: clamp(118px, 9.5vw, 150px) !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  text-align: center;
}
.page-home .opening h1 {
  max-width: 13ch !important;
  margin: 0 auto !important;
  font-size: clamp(50px, 5vw, 72px) !important;
  font-weight: 500 !important;
  line-height: 1.035 !important;
  letter-spacing: -.065em !important;
  text-wrap: balance;
}
.page-home .opening p { max-width: 585px; margin: clamp(8px, 2.3vw, 30px) 20px 0 !important; font-size: 16px !important; line-height: 1.62 !important; }
.page-home .opening-continuation.reading { width: min(780px, calc(100% - 104px)); max-width: none; margin: clamp(140px, 15vw, 225px) auto 0; }
.page-home .opening-continuation p { font-size: clamp(18px, 1.8vw, 23px); line-height: 1.55; }
.page-home .visual-interlude { display: block; margin-bottom: 0; }
.page-home .visual-interlude--field {
  width: min(1600px, 100%);
  margin: clamp(0px, 1.7vw, 26px) auto 0;
}
.page-home .visual-interlude .grain-frame {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  background: #050505;
  border-radius: 4px;
}
.page-home .visual-interlude--field .grain-frame { aspect-ratio: 2.44; max-height: 630px; border-radius: 0; -webkit-mask-image: none; mask-image: none; }
.page-home .visual-interlude--field .grain-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(to bottom,#000 0%,transparent 31%,transparent 70%,#000 100%),
    linear-gradient(to right,#000 0%,transparent 16%,transparent 84%,#000 100%);
}
.page-home .visual-interlude--field .grain-frame img { object-position: center 59%; filter: grayscale(1) contrast(1.13) brightness(.72) !important; }
.page-home .visual-interlude .grain-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.28) brightness(.84);
}
.page-home .visual-interlude .grain-frame canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  image-rendering: pixelated;
  filter: contrast(1.12);
  transform: scale(1.006);
}
.page-home .visual-interlude.grain-ready .grain-frame img { opacity: 0; }
.page-home .visual-interlude.grain-ready.is-in-view .grain-frame img {
  opacity: 1;
  transition: opacity 1.15s ease .55s;
}
.page-home .visual-interlude.grain-ready.is-in-view .grain-frame canvas {
  opacity: 0;
  filter: contrast(1);
  transform: none;
  transition: opacity .86s ease .78s, filter 1.2s ease, transform 1.7s ease;
}
.page-home .visual-interlude--branch .grain-frame img { filter: grayscale(1) contrast(1.3) brightness(.86); }
.page-home .visual-interlude--evidence .grain-frame img { filter: grayscale(1) contrast(1.25) brightness(.94); }
@keyframes einhar-hero-title { from { opacity: 0; filter: blur(12px); transform: translateY(12px); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes einhar-hero-art { from { opacity: 0; filter: blur(13px); transform: translateY(22px) scale(1.025); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes einhar-hero-copy { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.page-home .opening h1 { animation: einhar-hero-title 1.15s cubic-bezier(.2,.7,.2,1) .1s both; }
.page-home .opening .visual-interlude--field { animation: einhar-hero-art 1.5s cubic-bezier(.2,.7,.2,1) .57s both; }
.page-home .opening > p { animation: einhar-hero-copy .8s ease 1.35s both; }
.page-home #working-method { width: 100% !important; max-width: none !important; margin-inline: 0 !important; }
.page-home #thinking { margin-top: 0 !important; }
.page-home .decision-sticky {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 6vw, 90px);
  width: min(1380px, calc(100% - 104px));
  margin: 0 auto;
  isolation: isolate;
}
.page-home #decision-statement {
  order: 0;
  max-width: 13ch;
  margin: 0;
  color: #f7f7f4;
  font: 500 clamp(52px, 7.4vw, 116px)/.99 var(--font-einhar,Arial),sans-serif;
  letter-spacing: -.073em;
}
.page-home .decision-visual { position: relative; z-index: 0; order: 1; width: 100%; aspect-ratio: 1.72; overflow: hidden; background: var(--einhar-canvas); }
.page-home .decision-image { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.12) brightness(.82); }
.page-home .decision-visual::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 71% 77% at 50% 51%,transparent 32%,rgba(0,0,0,.38) 63%,#000 100%),
    linear-gradient(to bottom,#000 0%,#000 12%,transparent 38%,transparent 66%,#000 100%),
    linear-gradient(to right,#000 0%,transparent 16%,transparent 84%,#000 100%);
}
.page-home .decision-window { display: none; }
html.decision-enabled .page-home #working-method { height: 270svh; }
html.decision-enabled .page-home .decision-sticky { position: sticky; top: 0; width: 100%; height: 100svh; overflow: hidden; background: var(--einhar-canvas); }
html.decision-enabled .page-home .decision-visual { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
html.decision-enabled .page-home .decision-image { opacity: var(--photo-opacity, 0); }
html.decision-enabled .page-home .decision-particles { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; pointer-events: none; }
html.decision-enabled .page-home .decision-visual::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  opacity: var(--grain-opacity, 0);
  background-image: var(--einhar-pixel-field, linear-gradient(#f5f4f0, #f5f4f0));
  background-size: var(--einhar-pixel-size);
  background-position: 0 0;
  -webkit-mask: url('assets/einhar-mark-white.svg') var(--mark-x, 82%) var(--mark-y, 50%) / var(--mark-size, 50vw) auto no-repeat;
  mask: url('assets/einhar-mark-white.svg') var(--mark-x, 82%) var(--mark-y, 50%) / var(--mark-size, 50vw) auto no-repeat;
  animation: einhar-pixel-shift .68s steps(4,end) infinite;
}
html.decision-enabled .page-home .decision-window {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  background: url('assets/decision-paper.c6951152ba69.webp') center / cover no-repeat;
  filter: grayscale(1) contrast(1.12) brightness(.82) blur(.65px);
  opacity: var(--window-opacity, 0);
  -webkit-mask: url('assets/einhar-mark-white.svg') var(--mark-x, 82%) var(--mark-y, 50%) / var(--mark-size, 50vw) auto no-repeat;
  mask: url('assets/einhar-mark-white.svg') var(--mark-x, 82%) var(--mark-y, 50%) / var(--mark-size, 50vw) auto no-repeat;
}
html.decision-enabled .page-home #decision-statement {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: clamp(24px, 5.2vw, 100px);
  width: min(44vw, 600px);
  max-width: 8ch;
  transform: translateY(-50%);
  opacity: var(--copy-opacity, 1);
}

/* Small annotations can be opened without putting lines under the prose. */
.page-home .inline-link.expand-trigger {
  display: inline !important;
  padding: 4px 8px 5px !important;
  margin-inline: 1px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.09) !important;
  box-shadow: none !important;
  color: #f5f5f2 !important;
  line-height: inherit !important;
  text-decoration: none !important;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  white-space: nowrap;
  transition: background-color .2s ease;
}
.page-home .inline-link.expand-trigger:hover,
.page-home .inline-link.expand-trigger[aria-expanded="true"] { background: rgba(255,255,255,.16) !important; }
.page-home .inline-link.expand-trigger:focus-visible { outline: 2px solid #fff !important; outline-offset: 3px !important; }
.page-home .inline-link.expand-trigger::before,
.page-home .inline-link.expand-trigger::after { border: 0 !important; box-shadow: none !important; }
.page-home .inline-link .plus {
  position: relative;
  top: -5px;
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-left: 6px;
  font-size: 0;
  vertical-align: -.01em;
}
.page-home .inline-link .plus::before,
.page-home .inline-link .plus::after { content: ""; position: absolute; background: currentColor; border-radius: 1px; }
.page-home .inline-link .plus::before { width: 11px; height: 1.5px; left: 0; top: 4.75px; }
.page-home .inline-link .plus::after { width: 1.5px; height: 11px; left: 4.75px; top: 0; }
.page-home .margin-note { padding-left: 0; border-left: 0; }
.journal-inline-link { display: inline-flex; align-items: baseline; gap: 4px; color: #fff !important; text-decoration: none; white-space: nowrap; }
.journal-inline-link svg { width: 14px; height: 14px; align-self: center; }
.journal-inline-link:hover { opacity: .75; }
.journal-inline-link:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* A botanical image gives the shared-foundation passage a visual counterpart. */
.page-home #thinking.paired-passage {
  display: grid !important;
  width: min(1150px, calc(100% - 104px)) !important;
  max-width: none !important;
  padding: 0 !important;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr) !important;
  align-items: center !important;
  column-gap: clamp(70px, 9vw, 145px) !important;
  row-gap: clamp(75px, 9vw, 125px) !important;
}
.page-home #thinking .independence-heading { grid-column: 1 / -1; max-width: 900px; margin: 0; color: #f2f2ee; font: 500 clamp(44px,5.8vw,80px)/1.02 var(--font-einhar,Arial),sans-serif; letter-spacing: -.063em; }
.page-home #thinking .independence-heading span { display: block; margin-top: .16em; }
.page-home #thinking .visual-interlude--branch { grid-column: 1; grid-row: 2; width: 100%; margin: 0; }
.page-home #thinking .visual-interlude--branch .grain-frame { aspect-ratio: 1.16; }
.page-home #thinking .paired-text { grid-column: 2; grid-row: 2; width: 100% !important; max-width: 510px !important; }
.page-home #thinking .paired-text p:first-child { margin-top: 0 !important; }
.page-home .visual-interlude--evidence {
  width: min(930px, calc(100% - 104px));
  margin: clamp(85px, 10vw, 145px) max(52px, calc((100% - 1150px) / 2)) 0 auto;
}
.page-home .visual-interlude--evidence .grain-frame { aspect-ratio: 1.6; }

.page-home .grain-letter { width: fit-content; max-width: 100%; }
.page-home #approach h2,
.page-home #research-note h2,
.page-home #horizon h2 { font-size: clamp(30px,3.3vw,44px) !important; line-height: 1.1 !important; letter-spacing: -.05em !important; margin-bottom: 29px !important; }
.page-home .grain-letter:hover,
.page-home #thinking .independence-heading span {
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  background-image: var(--einhar-pixel-field, linear-gradient(#f5f4f0, #f5f4f0));
  background-size: var(--einhar-pixel-size);
  background-position: 0 0;
  background-repeat: repeat;
  -webkit-background-clip: text;
  background-clip: text;
  animation: einhar-pixel-shift .68s steps(4,end) infinite;
}
.page-home #thinking .independence-heading span { background-size: var(--einhar-pixel-size); }
.page-home #recent-posts .recent-topline h2 { font-size: clamp(24px,2.7vw,35px) !important; letter-spacing: -.048em !important; }
.page-home .recent-arrow { width: 36px; height: 36px; border-radius: 9px !important; background: rgba(255,255,255,.075) !important; color: #fff; transition: background-color .2s ease; }
.page-home .recent-arrow:hover:not(:disabled) { background: rgba(255,255,255,.16) !important; }
.page-home .recent-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.page-home .recent-arrow:disabled { opacity: .3; }

@media (max-width: 700px) {
  .page-home { --einhar-section-gap: clamp(125px, 21vw, 165px); }
  .page-home .opening.reading { width: 100% !important; padding-top: clamp(126px, 27vw, 165px) !important; }
  .page-home .opening h1 { max-width: 11ch !important; font-size: clamp(46px,11.7vw,65px) !important; line-height: 1.02 !important; padding: 0 15px; }
  .page-home .opening p { font-size: 15px !important; line-height: 1.65 !important; }
  .page-home .opening .visual-interlude--field { width: 100%; margin-top: 22px; }
  .page-home .visual-interlude--field .grain-frame { aspect-ratio: 1.15; max-height: none; }
  .page-home .visual-interlude--field .grain-frame::after {
    background:
      linear-gradient(to bottom,#000 0%,transparent 23%,transparent 77%,#000 100%),
      linear-gradient(to right,#000 0%,transparent 11%,transparent 89%,#000 100%);
  }
  .page-home .visual-interlude--field .grain-frame img { object-position: 48% center; }
  .page-home .opening-continuation.reading { width: calc(100% - 40px); margin-top: 128px; }
  .page-home .decision-sticky { width: calc(100% - 40px); gap: 42px; }
  .page-home #decision-statement { font-size: clamp(44px, 11vw, 68px); max-width: 12ch; }
  .page-home .decision-visual { aspect-ratio: .95; }
  html.decision-enabled .page-home .decision-sticky { width: 100%; }
  html.decision-enabled .page-home #decision-statement { top: 26svh; left: 20px; width: calc(100% - 40px); max-width: 12ch; font-size: clamp(42px, 10.9vw, 66px); }
  .page-home #thinking.paired-passage { display: block !important; width: calc(100% - 40px) !important; }
  .page-home #thinking .independence-heading { font-size: clamp(36px,9.2vw,54px); margin-bottom: 0; }
  .page-home #thinking .independence-heading span { max-width: 14ch; }
  .page-home #thinking .visual-interlude--branch { margin-top: 65px; }
  .page-home #thinking .visual-interlude--branch .grain-frame { aspect-ratio: 1.03; }
  .page-home #thinking .paired-text { margin-top: 56px; }
  .page-home .visual-interlude--evidence { width: calc(100% - 20px); margin: 78px 10px 0; }
  .page-home .visual-interlude--evidence .grain-frame { aspect-ratio: .98; }
  .page-home #recent-posts .recent-topline h2 { font-size: 23px !important; }
  .page-home .recent-arrow { width: 32px; height: 32px; }
}
@media (max-width: 360px) {
  .page-home #recent-posts .recent-topline { flex-wrap: wrap; }
  .page-home #recent-posts .recent-topline h2 { width: 100%; }
  .page-home #recent-posts .recent-controls { width: 100%; justify-content: flex-end; }
  .page-home #recent-posts .recent-more { margin-right: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .page-home .opening h1,
  .page-home .opening .visual-interlude--field,
  .page-home .opening > p { animation: none; }
  .page-home .grain-letter:hover,
  .page-home #thinking .independence-heading span { animation: none; }
  .page-home .visual-interlude.grain-ready .grain-frame img { opacity: 1; transition: none; }
  .page-home .visual-interlude .grain-frame canvas { display: none; }
  .page-home .recent-arrow { transition: none; }
}