/* The supplied MONOLOG reference uses four display lines and a 1:2 grid.
   Keep the existing palette, fonts, navigation and project sections. */
.hero-editorial {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  align-items: start;
  column-gap: 32px;
  width: calc(100% - 48px);
  max-width: none;
  min-height: 0;
  margin: 0 auto;
  padding: 54px 0 96px;
  isolation: isolate;
}
/* Sparse construction lines inspired by the reference, behind all hero content.
   The decorative layer stays still and fades out before the next section. */
.hero-backdrop {
  position: absolute;
  inset: 0 -24px;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  background:
    radial-gradient(ellipse at 100% 8%, color-mix(in srgb, var(--accent) 17%, transparent), transparent 54%),
    radial-gradient(ellipse at 0% 74%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 43%);
  mask-image: linear-gradient(to bottom, transparent, #000 7%, #000 74%, transparent 99%);
}
.hero-backdrop::before,
.hero-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
}
.hero-backdrop::before {
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--text) 9%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--text) 9%, transparent) 1px, transparent 1px);
  background-size: 33.333333% 100%, 100% 220px;
  background-position: 0 0, 0 38px;
  mask-image: linear-gradient(110deg, #000, rgb(0 0 0 / .35) 52%, #000);
}
.hero-backdrop::after {
  background:
    linear-gradient(135deg, transparent calc(50% - .6px), color-mix(in srgb, var(--accent) 28%, transparent) 50%, transparent calc(50% + .6px)) -160px -100px / 650px 650px,
    linear-gradient(135deg, transparent calc(50% - .6px), color-mix(in srgb, var(--text) 15%, transparent) 50%, transparent calc(50% + .6px)) 35% 100% / 640px 640px;
  background-repeat: no-repeat;
}
.hero-sidebar {
  position: static;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: max(480px, calc(100dvh - 158px));
  padding: 5px 0 8px;
}
.hero-sidebar-intro { max-width: 320px; }
.hero-sidebar-intro p {
  font-size: clamp(18px, 1.3vw, 25px);
  font-weight: 500;
  line-height: 1.24;
  letter-spacing: -.045em;
  text-wrap: pretty;
}
.hero-cta {
  margin-top: 30px;
  min-height: 44px;
  padding: 10px 14px;
  gap: 24px;
  font-size: 16px;
}
.hero-signature {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 4px;
  width: fit-content;
  margin-top: 80px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--muted);
}
.hero-signature > span:last-child { color: var(--text); }
.hero-signature:hover > span { color: var(--accent); }
.hero-signature > span:last-child > span { margin-left: 7px; }
.hero-editorial-main { min-width: 0; }
.hero-editorial h1 {
  width: 100%;
  margin: 0;
  font-family: var(--font);
  font-size: clamp(70px, 8vw, 192px);
  font-weight: 800;
  line-height: .99;
  letter-spacing: -.075em;
}
.hero-editorial h1 > span {
  display: block;
  width: auto;
  max-width: none;
  white-space: nowrap;
}
.hero-photo {
  overflow: hidden;
  margin: 72px 0 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--surface);
  border-radius: 8px;
}
.hero-photo picture { display: block; width: 100%; height: 100%; }
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: none;
}
@media (min-width: 1600px) {
  .hero-sidebar-intro { max-width: 350px; }
}
@media (max-width: 1100px) and (min-width: 768px) {
  .hero-editorial { column-gap: 28px; padding-top: 40px; }
  .hero-sidebar-intro { max-width: 240px; padding-right: 16px; }
  .hero-sidebar-intro p { font-size: 18px; }
  .hero-editorial h1 { font-size: 7.8vw; }
  .hero-cta { font-size: 14px; gap: 14px; padding-inline: 12px; }
  .hero-signature { font-size: 13px; }
  .hero-photo { margin-top: 50px; }
}
@media (max-width: 767px) {
  .hero-backdrop { inset-inline: -20px; }
  .hero-backdrop::before { background-size: 50% 100%, 100% 180px; opacity: .75; }
  .hero-backdrop::after { background-size: 380px 380px, 420px 420px; background-position: -130px 30px, 60px 70%; opacity: .7; }
  .hero-editorial {
    display: flex;
    flex-direction: column;
    width: calc(100% - 40px);
    min-height: 0;
    gap: 32px;
    padding: 38px 0 52px;
  }
  .hero-sidebar { position: static; min-height: 0; padding: 0; }
  .hero-sidebar-intro { max-width: 360px; }
  .hero-sidebar-intro p { font-size: 18px; line-height: 1.4; letter-spacing: -.025em; }
  .hero-cta { margin-top: 22px; font-size: 15px; }
  .hero-signature { display: none; }
  .hero-editorial-main { width: 100%; }
  .hero-editorial h1 { font-size: 11.1vw; font-weight: 800; line-height: 1.06; letter-spacing: -.075em; }
  .hero-photo { margin-top: 30px; aspect-ratio: 1.18; }
  .hero-photo img { object-position: center; }
}