/* Homepage only. Content pages continue to use site-v10.css unchanged. */
.home-main {
  grid-template-columns: minmax(15rem, 0.78fr) minmax(0, 1.4fr);
  gap: clamp(3rem, 5vw, 5rem);
}

.home-page .language-switch > * {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.home-page .home-about-link { min-height: 44px; }

.typesetting-field {
  --artifact-paper: #f1e4cf;
  --terminal: #0d1511;
  min-height: 0;
  width: 100%;
  aspect-ratio: 1.22;
  container-type: inline-size;
}

.type-art,
.type-routes {
  position: absolute;
  inset: 0;
}

.type-art {
  overflow: hidden;
  background: var(--artifact-paper);
  border-radius: 0.25rem;
  box-shadow: 0 20px 28px -12px rgb(23 35 29 / 28%);
}

.type-art::before {
  position: absolute;
  inset: 0 0 0 50%;
  background: var(--terminal);
  content: "";
}

.type-art__print {
  position: absolute;
  inset: 0;
}

.type-art__rules {
  position: absolute;
  inset: 26% 50% 24% 7%;
  border-block: 1px solid rgb(23 35 29 / 18%);
  background: repeating-linear-gradient(to bottom, transparent 0 39px, rgb(23 35 29 / 9%) 39px 40px);
}

.type-art__letter {
  position: absolute;
  top: 12%;
  left: 9%;
  width: 82%;
  text-align: center;
  font-size: 76cqw;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
}

/* Each copy inherits the same text box, so the light crosses the seam in sync. */
.type-art__letter::after {
  position: absolute;
  inset: 0;
  content: "&";
  color: transparent;
  background: linear-gradient(110deg, transparent 46%, rgb(244 241 233 / 55%) 50%, transparent 54%) 100% 0 / 300% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  pointer-events: none;
}

.type-art__letter--ink {
  color: var(--ink);
  clip-path: inset(0 50% 0 0);
}

/* The same letter continues across the seam at a lower print resolution. */
.type-art__letter--cut {
  color: var(--artifact-paper);
  clip-path: inset(0 0 0 50%);
  mask-image: repeating-linear-gradient(to bottom, #000 0 2px, transparent 2px 6px);
  opacity: 0.72;
}

.type-art__syntax {
  position: absolute;
  top: 35%;
  left: 82%;
  right: 3%;
  padding: 0;
  color: var(--page-background);
  font: 1.65cqw/1.85 ui-monospace, SFMono-Regular, Consolas, monospace;
  transform: translateX(0);
}

.type-art__syntax--mobile { display: none; }

.type-art__syntax span { display: block; white-space: pre; }
.type-art__syntax b { color: var(--accent-terminal); font-weight: 400; }
.type-art__syntax i { color: var(--artifact-paper); font-style: normal; }

.type-art__pixels {
  position: absolute;
  top: 30%;
  left: 48%;
  width: 9%;
  height: 40%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  color: var(--accent-terminal);
  font: 2cqw/1 ui-monospace, monospace;
}

.type-art__pixels span:nth-child(3n) { align-self: end; }
.type-art__pixels span:nth-child(2n) { align-self: start; }

.type-art__sentence {
  position: absolute;
  left: 7%;
  bottom: 5%;
  margin: 0;
  font-size: 3.8cqw;
  line-height: 1.1;
}

.type-art__end {
  position: absolute;
  left: 57%;
  bottom: 5%;
  color: var(--page-background);
  font: 1.8cqw/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.type-art__cursor {
  display: inline-block;
  width: 0.55em;
  height: 1em;
  margin-left: 0.65em;
  vertical-align: -0.15em;
  background: var(--accent-terminal);
}

.type-routes { pointer-events: none; }

.type-route {
  position: absolute;
  top: 7%;
  padding-block: 0.5rem;
  min-height: 44px;
  text-decoration: none;
  pointer-events: auto;
}

.type-route--essays { left: 7%; }
.type-route--projects { left: 57%; color: var(--page-background); }
.type-route .field-link-title { font-size: clamp(1.8rem, 5cqw, 2.6rem); }
.type-route--projects .field-link-title { color: var(--accent-terminal); }
.type-route:hover .field-link-title,
.type-route:focus-visible .field-link-title { color: currentColor; }
.type-route:focus-visible { outline-offset: 5px; }

.typesetting-field:has(.type-route--essays:is(:hover, :focus-visible)) .type-art__letter--ink {
  color: var(--accent-text);
}

.typesetting-field:has(.type-route--projects:is(:hover, :focus-visible)) .type-art__letter--cut {
  opacity: 1;
  color: var(--accent-terminal);
}

@media (prefers-reduced-motion: no-preference) {
  .type-art__letter { transition: color 240ms ease-out, opacity 240ms ease-out; }
  .type-art__letter::after { animation: typeset-light 12s linear infinite; }
  .type-art__pixels { animation: typeset-breathe 7s ease-in-out infinite alternate; }
  .type-art__cursor { animation: terminal-cursor 1200ms step-end infinite; }
  .is-motion-paused .type-art__letter::after,
  .is-motion-paused .type-art__pixels,
  .is-motion-paused .type-art__cursor { animation-play-state: paused; }
}

@keyframes typeset-light {
  from { background-position: 100% 0; }
  to { background-position: 0% 0; }
}

@keyframes typeset-breathe {
  from { transform: translateY(-3px); opacity: 0.65; }
  to { transform: translateY(3px); opacity: 1; }
}

@media (max-width: 58rem) {
  .home-main { grid-template-columns: 1fr; gap: 3rem; }
  .home-introduction { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; }
  .home-introduction h1 { grid-row: span 2; }
  .home-introduction p { margin: 0; align-self: end; }
  .home-about-link { justify-self: start; align-self: start; }
  .typesetting-field { max-width: 44rem; justify-self: center; }
}

@media (max-width: 40rem) {
  .home-main { gap: 2rem; }
  .home-introduction { display: block; }
  .home-introduction p { margin-top: 1.5rem; max-width: 32ch; }
  .home-about-link { margin-top: 0.5rem; }
  .typesetting-field { aspect-ratio: 0.7; }
  .type-art::before { inset: 50% 0 0; }
  .type-art__rules { inset: 18% 8% 50%; }
  .type-art__letter { top: 16%; left: 0; width: 100%; font-size: 96cqw; }
  /* Seam within the letter: (50% - 16%) / (0.7 * 96%) = 50.595%. */
  .type-art__letter--ink { clip-path: inset(0 0 49.405%); }
  .type-art__letter--cut { clip-path: inset(50.595% 0 0 0); }
  .type-art__syntax { top: 74%; left: 8%; right: 8%; padding: 0; font-size: 12px; line-height: 1.65; }
  .type-art__syntax--desktop { display: none; }
  .type-art__syntax--mobile { display: block; }
  .type-art__pixels { top: 46%; left: 19%; width: 64%; height: 8%; flex-direction: row; font-size: 3cqw; }
  .type-art__sentence { top: 20%; left: 8%; bottom: auto; font-size: 4.5cqw; }
  .type-art__end { left: 8%; top: 80%; bottom: auto; font-size: 12px; }
  .type-route { top: 5%; }
  .type-route--essays { left: 8%; }
  .type-route--projects { top: auto; bottom: 2%; left: 8%; }
  .type-route .field-link-title { font-size: clamp(1.65rem, 7cqw, 2.1rem); }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .field-link-title,
  .home-page .field-link-title::after { transition: none; }
  .home-page .home-about-link:is(:hover, :focus-visible) .field-link-title { transform: none; }
}