:root {
  --home-ink: #090909;
  --home-muted: #606060;
  --home-soft: #f4f4f2;
  --home-line: #d8d8d4;
  --home-paper: #fbfbf9;
  --type-hero: clamp(4.7rem, 7.6vw, 8rem);
  --type-section: .8125rem;
  --type-project: 1.25rem;
  --type-subsection: .9375rem;
  --type-nav: .8125rem;
  --type-meta: .6875rem;
}

.home-page {
  background: var(--home-paper);
  color: var(--home-ink);
  font-family: var(--font-sans);
  line-height: 1.45;
}

.home-page::before { display: none; }
.home-page a { color: inherit; text-decoration: none; }
.home-page p { color: inherit; }
.home-page h1,
.home-page h2,
.home-page h3 { color: inherit; }

.home-page a:focus-visible,
.home-page button:focus-visible {
  outline: 2px solid var(--home-ink);
  outline-offset: 4px;
}

.home-shell {
  display: grid;
  grid-template-columns: 184px minmax(0, 1fr) 264px;
  grid-template-areas: 'left main context';
  width: min(100%, 1536px);
  min-height: 100vh;
  margin: 0 auto;
  border-inline: 1px solid var(--home-line);
}

/*
 * The homepage reuses the shared site header / mobile-nav component
 * (includes/editorial-header.php) instead of its own markup. Desktop keeps
 * the three-rail layout in place of the horizontal bar, so .site-header is
 * hidden by default and only shown as the mobile-style bar below 1240px —
 * matching the rail's own breakpoint instead of the site-wide 760px, since
 * there is no room for either layout in between. Colors resolve through the
 * shared --page-* tokens because the body also carries the editorial-page
 * class (see includes/editorial-header.php usage in index.php).
 */
:where(.home-page) .site-header { display: none; }

.home-left-rail {
  grid-area: left;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  align-self: start;
  min-height: 100vh;
  padding: 1.75rem 1.35rem 1.5rem;
  border-right: 1px solid var(--home-line);
}

.home-rail-brand {
  width: fit-content;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.035em;
}

.home-primary-nav { margin-top: 3.25rem; }
.home-primary-nav ol { list-style: none; }
.home-primary-nav li + li { margin-top: .15rem; }

.home-primary-nav a {
  position: relative;
  display: grid;
  grid-template-columns: 2rem 1fr;
  align-items: center;
  min-height: 2.55rem;
  font-size: var(--type-nav);
  color: #303030;
}

.home-primary-nav a::before {
  content: '';
  position: absolute;
  left: -1.35rem;
  width: 1px;
  height: 0;
  background: var(--home-ink);
  transition: height .2s ease;
}

.home-primary-nav a:hover::before,
.home-primary-nav a:focus-visible::before { height: 1.65rem; }

.home-nav-index {
  color: #777;
  font-family: var(--font-mono);
  font-size: var(--type-meta);
}

.home-rail-footer {
  margin-top: auto;
  font-size: var(--type-meta);
  color: var(--home-muted);
}

.home-rail-rule {
  display: block;
  width: 2rem;
  height: 1px;
  margin-bottom: 1.25rem;
  background: var(--home-ink);
}

.home-social-links {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 1rem;
}

.home-social-links a {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.home-main {
  grid-area: main;
  min-width: 0;
  padding: 3rem clamp(1.6rem, 3vw, 3.4rem) 0;
}

.home-identity {
  min-height: 430px;
  padding-bottom: 5.25rem;
}

.home-kicker,
.home-context-label {
  margin-bottom: 1.55rem;
  font-family: var(--font-mono);
  font-size: var(--type-meta);
  font-weight: 500;
  letter-spacing: .13em;
}

.home-kicker span { margin-inline: .55rem; color: #999; }

.home-title {
  display: flex;
  flex-wrap: wrap;
  gap: 0 .22em;
  margin: 0;
  font-size: var(--type-hero);
  font-weight: 720;
  letter-spacing: -.06em;
  line-height: .94;
}

.home-title-mask {
  display: inline-block;
  overflow: hidden;
  padding: .04em .04em .1em 0;
}

.home-title-mask > span {
  display: block;
  animation: home-name-reveal .78s cubic-bezier(.2, .8, .2, 1) both;
}

.home-title-mask:nth-child(2) > span { animation-delay: .09s; }

@keyframes home-name-reveal {
  from { opacity: 0; transform: translateY(105%); letter-spacing: -.085em; }
  to { opacity: 1; transform: translateY(0); letter-spacing: -.06em; }
}

.home-intro {
  max-width: 42rem;
  margin-top: 1.45rem;
  font-size: clamp(1.05rem, 1.5vw, 1.32rem);
  line-height: 1.4;
  letter-spacing: -.02em;
}

.home-action {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  min-height: 2.9rem;
  margin-top: 2rem;
  padding: .75rem 1.35rem;
  background: var(--home-ink);
  color: var(--home-paper);
  font-size: var(--type-nav);
  font-weight: 600;
  transition: gap .2s ease, background .2s ease;
}

.home-page .home-action { color: var(--home-paper); }

.home-action:hover { gap: 1.35rem; background: #303030; }

.home-projects,
.home-more { padding-bottom: 2.25rem; }

.home-section-heading {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  margin-bottom: .85rem;
}

.home-section-heading h2 {
  font-size: var(--type-section);
  font-weight: 700;
  letter-spacing: -.01em;
}

.home-section-heading > span { height: 1px; background: var(--home-line); }

.home-section-heading a {
  font-size: var(--type-meta);
  font-weight: 600;
}

.home-project-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--home-line);
  border-left: 1px solid var(--home-line);
}

.home-project-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.15rem;
  border-right: 1px solid var(--home-line);
  border-bottom: 1px solid var(--home-line);
}

.home-project-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  margin-bottom: .8rem;
}

.home-project-number {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.04em;
}

.home-project-status {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-family: var(--font-mono);
  font-size: var(--type-meta);
}

.home-project-status i,
.home-current i {
  display: inline-block;
  width: .48rem;
  height: .48rem;
  flex: 0 0 auto;
  border: 1px solid var(--home-ink);
  border-radius: 50%;
}

.home-project-status i { background: var(--home-ink); }

.home-project-card h3 {
  margin: 0;
  font-size: var(--type-project);
  letter-spacing: -.04em;
}

.home-project-type {
  min-height: 2.2em;
  margin-top: .15rem;
  font-size: .75rem;
  color: var(--home-muted);
}

.home-project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .7rem;
  margin: .65rem 0 .95rem;
  color: #666;
  font-family: var(--font-mono);
  font-size: var(--type-meta);
}

.home-project-tags span + span::before {
  content: '/';
  margin-right: .7rem;
  color: #bbb;
}

.home-project-preview {
  position: relative;
  display: flex;
  min-height: 190px;
  margin-top: auto;
  overflow: hidden;
  border: 1px solid var(--home-line);
  background: var(--home-soft);
}

.home-project-preview--type {
  flex-direction: column;
  justify-content: space-between;
  padding: 1.25rem;
  background:
    linear-gradient(90deg, transparent 49.8%, rgba(255,255,255,.12) 50%, transparent 50.2%),
    linear-gradient(#131313, #050505);
  color: #fff;
  transition: background .2s ease, transform .2s ease;
}

.home-project-card:hover .home-project-preview--type,
.home-project-card:focus-within .home-project-preview--type {
  background:
    linear-gradient(90deg, transparent 49.8%, rgba(255,255,255,.16) 50%, transparent 50.2%),
    linear-gradient(#1a1a1a, #080808);
  transform: translateY(-2px);
}

.home-project-preview--type::after {
  content: '';
  position: absolute;
  inset: .55rem;
  border: 1px solid rgba(255,255,255,.15);
  pointer-events: none;
}

.home-project-preview--type > span {
  position: relative;
  z-index: 1;
  font-size: clamp(1.25rem, 2vw, 2rem);
  font-weight: 600;
  letter-spacing: -.055em;
}

.home-project-preview--type small {
  position: relative;
  z-index: 1;
  max-width: 20rem;
  color: #c8c8c8;
  font-size: var(--type-meta);
  line-height: 1.45;
}

.home-project-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: .85rem;
  padding-top: .7rem;
  border-top: 1px solid var(--home-line);
  font-size: var(--type-meta);
  font-weight: 600;
}

.home-project-link span,
.home-system-row > a span,
.home-text-link span { transition: transform .2s ease; }

.home-project-link:hover span,
.home-system-row > a:hover span,
.home-text-link:hover span { transform: translateX(.25rem); }

.home-more { padding-top: .25rem; }

.home-system-row {
  display: grid;
  grid-template-columns: 2rem 5.5rem minmax(10rem, 1.4fr) minmax(9rem, 1fr) auto;
  align-items: center;
  gap: 1.1rem;
  min-height: 5rem;
  padding: .75rem 1rem;
  border: 1px solid var(--home-line);
}

.home-system-number { font-size: 1rem; font-weight: 600; }

.home-system-row img {
  width: 5.5rem;
  height: 3.5rem;
  object-fit: cover;
  object-position: top;
  filter: grayscale(1);
  border: 1px solid var(--home-line);
}

.home-system-copy h3 { font-size: var(--type-subsection); letter-spacing: -.03em; }
.home-system-copy p { margin-top: .12rem; font-size: var(--type-meta); color: var(--home-muted); }

.home-system-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .6rem;
  color: #666;
  font-family: var(--font-mono);
  font-size: var(--type-meta);
}

.home-system-tags span + span::before { content: '/'; margin-right: .6rem; color: #bbb; }
.home-system-row > a { display: inline-flex; gap: .8rem; font-size: var(--type-meta); font-weight: 600; white-space: nowrap; }

.home-context {
  grid-area: context;
  min-width: 0;
  padding: 3rem 2rem;
  border-left: 1px solid var(--home-line);
}

.home-context section {
  padding-bottom: 2.1rem;
  border-bottom: 1px solid var(--home-line);
}

.home-context section + section { padding-top: 2rem; }

.home-context h2 {
  margin-bottom: 1.2rem;
  font-size: var(--type-section);
  font-weight: 700;
  letter-spacing: -.01em;
}

.home-current ul { list-style: none; }
.home-current li { display: grid; grid-template-columns: .55rem 1fr; gap: .85rem; }
.home-current li + li { margin-top: 1.35rem; }
.home-current i { margin-top: .2rem; }
.home-current i.is-solid { background: var(--home-ink); }

.home-current strong {
  display: block;
  margin-bottom: .2rem;
  font-family: var(--font-mono);
  font-size: var(--type-meta);
  font-weight: 600;
  letter-spacing: .04em;
}

.home-current li span { font-size: .75rem; line-height: 1.4; }

.home-text-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.4rem;
  padding-bottom: .25rem;
  border-bottom: 1px solid var(--home-ink);
  font-size: var(--type-meta);
  font-weight: 600;
}

.home-build h2 {
  max-width: 10ch;
  margin: 0;
  font-size: 1.65rem;
  line-height: .98;
  letter-spacing: -.055em;
}

.home-about p { font-size: .8125rem; line-height: 1.45; }
.home-about p + p { margin-top: .7rem; color: var(--home-muted); }

.home-impact {
  padding-top: 2.1rem;
  font-size: clamp(1.9rem, 2.4vw, 2.55rem);
  font-weight: 700;
  letter-spacing: -.065em;
  line-height: .95;
}

.home-site-footer {
  width: min(100%, 1536px);
  margin: 0 auto;
  padding: 1.2rem 2rem 1.35rem;
  border: 1px solid var(--home-line);
  background: var(--home-paper);
  color: var(--home-muted);
}

.home-footer-inner {
  display: flex;
  align-items: center;
  gap: 1rem 2rem;
  font-size: var(--type-meta);
}

.home-footer-inner > span:nth-child(2) { color: #666; }
.home-footer-inner nav { display: flex; flex-wrap: wrap; gap: 1rem; margin-left: auto; }
.home-footer-inner a { color: var(--home-muted); }
.home-footer-inner a:hover { color: var(--home-ink); }

@media (max-width: 1240px) {
  .home-shell {
    grid-template-columns: minmax(0, 1fr) 254px;
    grid-template-areas:
      'header header'
      'main context';
  }

  .home-left-rail { display: none; }

  :where(.home-page) .site-header {
    display: flex;
    grid-area: header;
  }

  :where(.home-page) .site-desktop-nav { display: none; }

  :where(.home-page) .site-menu-toggle {
    display: grid;
    width: 2.8rem;
    height: 2.8rem;
    place-content: center;
    gap: .28rem;
    border: 0;
    background: transparent;
  }
  :where(.home-page) .site-menu-toggle span { width: 1.45rem; height: 1px; background: var(--page-ink); }

  :where(.home-page) .site-mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    padding: 1.35rem 1.25rem 2rem;
    background: var(--page-paper);
  }
  :where(.home-page) .site-mobile-menu-header { display: flex; align-items: center; justify-content: space-between; }
  :where(.home-page) .site-menu-close {
    position: relative;
    display: block;
    width: 2.8rem;
    height: 2.8rem;
    border: 0;
    background: transparent;
  }
  :where(.home-page) .site-menu-close span { position: absolute; left: .65rem; top: 1.35rem; width: 1.5rem; height: 1px; background: var(--page-ink); transform: rotate(45deg); }
  :where(.home-page) .site-menu-close span + span { transform: rotate(-45deg); }
  :where(.home-page) .site-mobile-menu ul { margin-top: 3rem; list-style: none; border-top: 1px solid var(--page-ink); }
  :where(.home-page) .site-mobile-menu li { border-bottom: 1px solid var(--page-line); }
  :where(.home-page) .site-mobile-menu li a { display: block; padding: 1rem 0; color: inherit; font-size: 1.3rem; text-decoration: none; }

  .home-main { padding-top: 2.6rem; }
}

@media (max-width: 1020px) {
  .home-project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-project-card:last-child { grid-column: 1 / -1; }
  .home-project-card:last-child .home-project-preview { min-height: 230px; }

  .home-system-row {
    grid-template-columns: 2rem 4.5rem minmax(10rem, 1fr) auto;
  }

  .home-system-row img { width: 4.5rem; }
  .home-system-tags { display: none; }
}

@media (max-width: 760px) {
  .home-shell {
    display: block;
    width: 100%;
    border-inline: 0;
  }

  :where(.home-page) .site-header {
    min-height: 3.8rem;
    padding-inline: 1.2rem;
  }

  .home-main { padding: 2.4rem 1.2rem 0; }
  .home-identity { min-height: 0; padding-bottom: 4.5rem; }
  .home-kicker { margin-bottom: 1.2rem; font-size: var(--type-meta); }
  .home-kicker span { margin-inline: .3rem; }

  .home-title {
    display: block;
    font-size: clamp(3.45rem, 17vw, 5.5rem);
    line-height: .9;
  }

  .home-title-mask { display: block; width: fit-content; }
  .home-intro { margin-top: 1.25rem; font-size: 1.05rem; }

  .home-action { margin-top: 1.5rem; }
  .home-section-heading { gap: .7rem; }

  .home-project-grid { grid-template-columns: 1fr; }
  .home-project-card:last-child { grid-column: auto; }
  .home-project-preview,
  .home-project-card:last-child .home-project-preview { min-height: 220px; }

  .home-more { padding-top: .5rem; }

  .home-system-row {
    grid-template-columns: 2rem 4.75rem 1fr;
    gap: .8rem;
  }

  .home-system-row img { width: 4.75rem; }
  .home-system-copy p { display: none; }
  .home-system-row > a { grid-column: 2 / -1; padding-top: .7rem; border-top: 1px solid var(--home-line); }

  .home-context {
    display: flex;
    flex-direction: column;
    padding: 3.5rem 1.2rem 1rem;
    border-top: 1px solid var(--home-line);
    border-left: 0;
  }

  .home-context section { padding-bottom: 2.5rem; }
  .home-context section + section { padding-top: 2.5rem; }
  .home-build h2 { max-width: 14ch; font-size: 2rem; }
  .home-about p { max-width: 34rem; font-size: .82rem; }

  .home-site-footer {
    width: 100%;
    padding: 1.3rem 1.2rem;
    border-inline: 0;
  }

  .home-footer-inner { align-items: flex-start; flex-direction: column; gap: .65rem; }
  .home-footer-inner nav { margin-left: 0; }
}

@media (max-width: 390px) {
  .home-section-heading > a { display: none; }
  .home-project-card { padding: 1rem; }
  .home-project-preview,
  .home-project-card:last-child .home-project-preview { min-height: 190px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-title-mask > span {
    opacity: 1;
    transform: none;
    animation: none;
    letter-spacing: -.06em;
  }

  .home-project-preview--type,
  .home-project-link span,
  .home-system-row > a span,
  .home-text-link span { transition: none; }
}