/* TOP width revision: live kakumagumi.com measurements, 2026-09-13.
   Keep full-bleed surfaces independent from the reading containers. */
.home .service-intro::before {
  /* Six equal tracks: every second line meets a three-column card border. */
  inset: 0;
  width: auto;
  border: 0;
  transform: none;
  opacity: .65;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 calc(100% / 6 - 1px),
    var(--line) calc(100% / 6 - 1px) calc(100% / 6)
  );
}
.home .service-card__phrase {
  display: inline-block;
  max-width: 100%;
}

.home .works {
  padding-block: clamp(80px, 8.75vw, 132px) 80px;
}
.home .works__layout {
  display: grid;
  grid-template-columns: minmax(0, 30%) minmax(0, 61.2%);
  justify-content: space-between;
  align-items: start;
}
.home .works__body {
  min-width: 0;
}
.home .works-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid #a58a5d;
}
.home .works-list__item {
  border-bottom: 1px solid var(--line);
}
.home .works-list__link {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) 44px;
  gap: clamp(16px, 1.7vw, 28px);
  align-items: center;
  min-height: 116px;
  padding-block: 28px;
  transition: background-color .25s, color .25s;
}
.home .works-list__number {
  align-self: start;
  padding-top: 5px;
  color: var(--gold-ink);
  font: 1.125rem/1.8 Georgia, serif;
  letter-spacing: .08em;
}
.home .works-list__copy {
  min-width: 0;
}
.home .works-list__copy h3 {
  font-size: clamp(1.125rem, 1rem + .4vw, 1.5rem);
  font-weight: 500;
  line-height: 1.85;
  letter-spacing: .06em;
  overflow-wrap: anywhere;
}
.home .works-list__copy p {
  margin-top: 12px;
  font-size: .875rem;
  line-height: 1.9;
}
.home .works-list__phrase {
  display: inline-block;
  max-width: 100%;
}
.home .works-list__arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid #ad926366;
  border-radius: 50%;
  color: var(--gold-ink);
  font-size: 1rem;
  line-height: 1;
  transition: background-color .25s, color .25s, transform .25s;
}
.home .works-list__link:is(:hover, :focus-visible) {
  background-color: #bd96550b;
  color: var(--gold-ink);
}
.home .works-list__link:is(:hover, :focus-visible) .works-list__arrow {
  background: var(--gold-ink);
  color: var(--paper);
  transform: translate(2px, -2px);
}
.home .works-about-divider {
  position: relative;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
}
.home .works-about-divider::before {
  content: '';
  position: absolute;
  inset: 0;
  height: 1px;
  background: #a58a5d80;
}

@media (min-width: 700px) {
  .home .about {
    padding-block: clamp(80px, 8.75vw, 132px) 64px;
  }
  .home .about__grid {
    align-items: start;
  }
  .home .about-collage {
    margin-block: 0;
  }
  .home:not(.type-expanded) .recruit__inner {
    min-height: clamp(640px, 46vw, 680px);
    padding-block: clamp(88px, 8.04vw, 120px) clamp(64px, 6.09vw, 90px);
  }
  .home:not(.type-expanded) .recruit__portrait {
    width: 21%;
    max-width: 190px;
    bottom: 4%;
  }
  .home .news {
    padding-block: clamp(80px, 8.75vw, 132px) 80px;
  }
  .home .news-item {
    padding-block: 20px;
  }
  .home .news .align-end {
    margin-top: 40px;
  }
  .home .service-intro {
    /* Reference at 1440: 126px above, 101px below. Keep height content-led. */
    padding-block: clamp(80px, 8.75vw, 132px) clamp(64px, 7vw, 110px);
  }
}
@media (min-width: 1100px) {
  .home .service-card__content {
    /* Reference card paragraphs: 330px at 1440, 442px at 1920. */
    padding-inline: max(5vw, calc((100% - 448px) / 2));
    padding-block: 32px 56px;
  }
  .home .about__grid {
    grid-template-columns: minmax(0, 36%) minmax(0, 49.4%);
    justify-content: space-between;
    gap: 0;
  }
  .home .news__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 61.2%);
  }
}
@media (max-width: 1099px) {
  .home .works__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .home .service-intro::before {
    /* Stacked cards share these outer edges; use three equal tracks inside. */
    inset-inline: var(--content-gutter);
    border-inline-start: 1px solid var(--line);
    background: repeating-linear-gradient(
      90deg,
      transparent 0 calc(100% / 3 - 1px),
      var(--line) calc(100% / 3 - 1px) calc(100% / 3)
    );
  }
  .home .service-cards {
    padding-inline: var(--content-gutter);
  }
}
@media (max-width: 699px) {
  .home .service-intro::before {
    opacity: .3;
  }
  .home .works {
    padding-block: 62px 56px;
  }
  .home .about {
    padding-top: 48px;
  }
  .home .about-collage {
    margin-bottom: 0;
  }
  .home .works__layout {
    gap: 32px;
  }
  .home .works-list__link {
    grid-template-columns: 1.5rem minmax(0, 1fr) 32px;
    gap: 12px;
    min-height: 108px;
    padding-block: 22px;
  }
  .home .works-list__number {
    padding-top: 3px;
    font-size: .875rem;
  }
  .home .works-list__arrow {
    width: 32px;
    height: 32px;
    font-size: .875rem;
  }
  .home .works__body .align-end {
    margin-top: 32px;
  }
  .home .service-intro__copy {
    width: 100%;
    margin-inline: auto;
  }
  .home .service-intro__copy .lead {
    text-wrap: balance;
  }
  .home .service-intro__copy .lead br {
    display: none;
  }
  .home .service-cards {
    padding: 0;
    gap: 0;
  }
  .home .service-card,
  .home .service-card:last-child {
    border: 0;
  }
  .home .service-card + .service-card {
    border-top: 1px solid #b3925255;
  }
  .home .service-card__content {
    /* Full-width photographs, with one inset for readable copy and actions. */
    padding: 32px clamp(24px, 6.4vw, 30px) 56px;
  }
  .home.type-expanded .service-intro__copy {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .home .works-list__link,
  .home .works-list__arrow {
    transition: none;
  }
}

/* The supplied silent film sits in the existing photographic layer. */
.hero__photo { z-index: 0; }
.hero::after { z-index: 1; }
.hero__plane { z-index: 2; }
.hero__copy, .hero__detail, .scroll-cue { z-index: 3; }
/* Keep the masked vertical copy on its own layer above the decoded video. */
.hero__copy { transform: translateZ(0); }
.hero__video { opacity: 0; pointer-events: none; transition: opacity .45s ease; object-position: 52% top; }
.hero__video.is-ready { opacity: 1; }
.hero__video.is-finished { opacity: 0; transition: none; }
.hero__video-curtain {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #080908;
  opacity: 0;
  pointer-events: none;
}
/* Move the still's subject toward the film's final position without enlarging it. */
.hero picture .hero__photo { object-position: 12% 10%; }
@media (max-width: 699px), (max-aspect-ratio: 1/1) {
  .hero__video { object-position: 56% top; }
  .hero picture .hero__photo { object-position: 18% center; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__video { transition: none; }
  .hero__video-curtain { display: none; }
}
@media print { .hero__video, .hero__video-curtain { display: none; } }

/* A gold wash travels along the white scroll rule, then softly returns to white. */
.hero .scroll-cue > span:last-child { position: relative; overflow: hidden; background: #fff; }
.hero .scroll-cue > span:last-child::after {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  animation: scroll-rule-paint 2.4s ease-in-out infinite;
}
@keyframes scroll-rule-paint {
  0%, 12% { transform: scaleX(0); opacity: 1; }
  70%, 84% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}
html[data-opening-hold] .hero .scroll-cue > span:last-child::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .hero .scroll-cue > span:last-child::after { animation: none; transform: scaleX(1); opacity: 1; }
}