/* Approved homepage. Header, menu, and footer live in chrome.css. */

body.home {
  --bold-blue: #234bff;
  --bold-ink: #071124;
  --bold-paper: #f0f0ed;
  background: var(--bold-blue);
  color: var(--bold-ink);
  font-family: Manrope, sans-serif;
  overflow-x: clip;
  scrollbar-color: #234bff #edf0f7;
}
.home ::selection {
  background: #071124;
  color: #fff;
}
/* Held until home.js starts the entrance (see the inline script). */
.motion-pending .bold-introduction,
.motion-pending .bold-hero-foot > * {
  visibility: hidden;
}

.bold-home {
  position: relative;
}
.bold-home h1,
.bold-home h2,
.bold-home h3 {
  font-family: Manrope, sans-serif;
  font-weight: 800;
  letter-spacing: -0.065em;
}

/* Hero */
.bold-opening {
  position: relative;
  isolation: isolate;
  overflow: clip;
  min-height: 100svh;
  padding: 150px 5% 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.bold-introduction {
  font-size: clamp(56px, 7.6vw, 132px);
  line-height: 1.04;
  color: white;
  margin: 0;
  max-width: 16ch;
}
.hero-line-mask {
  display: block;
  overflow: clip;
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
}
.hero-line {
  display: block;
}
.hero-ja {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: min(76vw, 1100px);
  height: auto;
  aspect-ratio: 939.06/961;
  right: -8%;
  top: 3%;
  color: #071124;
  opacity: 0.095;
}
.hero-ja svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: currentColor;
}
.hero-ja path {
  transform-box: fill-box;
  transform-origin: center;
}
.bold-hero-foot {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 35px;
  margin-top: 65px;
  color: white;
  font-size: 15px;
  line-height: 1.6;
}
.bold-hero-foot > p {
  margin: 0;
  max-width: 48ch;
}
.bold-hero-foot > a {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 15px;
  font-weight: 600;
}
.bold-hero-foot > a > span {
  display: inline-block;
  font-size: 25px;
}

/* Portrait and perspective */
.bold-perspective {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 12%;
  align-items: center;
  padding: 80px 5%;
  background: #e2e4e1;
  color: var(--bold-ink);
}
.bold-person {
  max-width: 340px;
}
.bold-person img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  object-position: center 25%;
  display: block;
  filter: grayscale(1);
}
.bold-person > a {
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 20px;
}
.reveal-paragraph {
  font-size: clamp(25px, 2.7vw, 42px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.035em;
  margin: 0;
}
.bold-phrase {
  position: relative;
  display: inline;
  text-decoration: underline;
  text-decoration-thickness: 0.045em;
  text-underline-offset: 0.1em;
}
.bold-person-note {
  font-size: 17px;
  line-height: 1.6;
  max-width: 44ch;
  margin: 28px 0 0;
}
.bold-person-note strong {
  margin-right: 10px;
  color: var(--bold-blue);
  font-weight: 800;
}
@media (hover: hover) {
  .bold-phrase:hover {
    color: var(--bold-blue);
  }
}

/* Stories */
.bold-thinking {
  padding: 105px 5% 70px;
  background: var(--bold-paper);
}
.bold-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 35px;
  margin-bottom: 65px;
}
.bold-section-heading h2 {
  font-size: clamp(44px, 6vw, 100px);
  line-height: 1.04;
  margin: 0;
}
.bold-section-heading > a {
  font-size: 16px;
  padding: 12px 0;
  text-decoration: underline;
  text-underline-offset: 5px;
}
.bold-story-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 90px 9%;
}
.bold-story {
  display: block;
  min-width: 0;
}
.bold-story-layout:has(> :only-child) {
  grid-template-columns: 1fr;
}
.bold-story-layout > .bold-story:only-child {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 9%;
  align-items: center;
}
@media (max-width: 700px) {
  .bold-story-layout > .bold-story:only-child {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}
.bold-story.story-small {
  padding-top: 150px;
}
.bold-image-block {
  aspect-ratio: 1.4;
  background: #d4d5d3;
  display: flex;
  align-items: end;
  justify-content: space-between;
  padding: 24px;
  font-size: 13px;
  gap: 15px;
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
.story-small .bold-image-block {
  background: #bfc3c4;
  aspect-ratio: 1.15;
}
.bold-image-block > span:last-child {
  font-size: 30px;
}
/* Story art fills the block; the arrow stays a separate SVG on top. */
.bold-image-block.has-art {
  position: relative;
  padding: 0;
  overflow: hidden;
  background: #dbe1df;
}
.bold-image-block.has-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The corner arrow sits over the art, as on the placeholders. */
.bold-image-block.has-art > span:last-child {
  position: absolute;
  right: 24px;
  bottom: 24px;
  line-height: 0;
}
.bold-image-block .bold-arrow {
  width: 28px;
  height: 28px;
}
.bold-story h3 {
  font-size: clamp(30px, 3.4vw, 56px);
  line-height: 1.08;
  margin: 26px 0 18px;
}
.bold-story p {
  font-size: 17px;
  line-height: 1.6;
  max-width: 40ch;
  margin: 0 0 22px;
}
.bold-story-url {
  font-size: 14px;
  font-weight: 700;
}
.story-wide {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 9%;
  align-items: center;
}
.story-wide h3 {
  margin-top: 0;
}
.story-wide .bold-image-block {
  aspect-ratio: 1.8;
  background: #c9ccca;
}
.bold-preview-note {
  font-size: 14px;
  margin: 55px 0 0;
  line-height: 1.6;
}
@media (hover: hover) {
  .bold-story:hover .bold-image-block {
    transform: translateY(-7px);
  }
  .bold-story:hover h3 {
    color: var(--bold-blue);
  }
}

/* Project showcase: scroll-driven scale and fades come from home.js. */
.project-showcase {
  position: relative;
  z-index: 2;
  background: #fff;
  color: #071124;
  padding: 90px 5% 75px;
}
.project-showcase > h2 {
  position: sticky;
  top: var(--header-offset, 0px);
  transition: top 320ms cubic-bezier(0.32, 0.72, 0, 1);
  z-index: 2;
  font-size: clamp(32px, 5vw, 80px);
  line-height: 1.05;
  letter-spacing: -0.065em;
  margin: 0 0 45px;
  padding: 20px 0;
  pointer-events: none;
}
.showcase-project {
  display: grid;
  grid-template-columns: 0.7fr 1.6fr;
  gap: 7%;
  align-items: stretch;
  margin: 0 0 100px;
  min-height: 65svh;
}
.showcase-project:last-child {
  margin-bottom: 0;
}
.showcase-description {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 45px;
  padding: 50px 0 35px;
}
.showcase-project:first-child .showcase-description {
  padding-top: 70px;
}
.showcase-description h3 {
  font-size: clamp(29px, 3.1vw, 52px);
  line-height: 1.08;
  margin: 0;
  letter-spacing: -0.05em;
}
.showcase-details p {
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 22px;
  max-width: 31ch;
}
.showcase-details > a {
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 10px 0;
  text-decoration: underline;
  text-underline-offset: 6px;
}
.showcase-details > a .bold-arrow {
  width: 1.15em;
  height: 1.15em;
  transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
@media (hover: hover) {
  .showcase-description a:hover {
    color: #234bff;
  }
  .showcase-details > a:hover .bold-arrow {
    transform: translate(3px, -3px);
  }
}
.showcase-visual {
  position: relative;
  display: grid;
  align-items: center;
  align-content: center;
  transform-origin: right center;
  min-width: 0;
}
.showcase-visual img {
  display: block;
  width: 100%;
  height: auto;
}
/* Desktop shows the cover; pointer movement or focus reveals the website. */
.showcase-visual img.project-cover,
.showcase-visual img.project-interface {
  grid-area: 1/1;
  aspect-ratio: 16/10;
}
.showcase-visual img.project-cover {
  object-fit: cover;
  transition: opacity 260ms ease;
}
.showcase-visual img.project-interface {
  object-fit: contain;
  background: #fff;
  opacity: 0;
  transition: opacity 260ms ease;
}
.showcase-visual:focus-visible img.project-interface {
  opacity: 1;
}
.showcase-visual:focus-visible img.project-cover {
  opacity: 0;
}
@media (hover: hover) and (pointer: fine) {
  .showcase-visual.is-previewing .project-interface {
    opacity: 1;
  }
  .showcase-visual.is-previewing .project-cover {
    opacity: 0;
  }
}
/* Motion cards invert the pattern: the interface poster shows first, and the loop
   plays over it on intentional hover or keyboard focus. */
.showcase-visual.has-motion img.project-interface {
  opacity: 1;
}
.showcase-visual video.project-motion {
  grid-area: 1/1;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/10;
  object-fit: contain;
  background: #fff;
  opacity: 0;
  transition: opacity 160ms ease;
}
.showcase-visual.is-playing video.project-motion {
  opacity: 1;
}
@media (hover: none), (pointer: coarse), (max-width: 700px) {
  .showcase-visual video.project-motion {
    display: none;
  }
  .showcase-visual img.project-cover {
    display: none;
  }
  .showcase-visual img.project-interface {
    opacity: 1;
    aspect-ratio: auto;
  }
}

@media (max-width: 700px) {
  .bold-opening {
    padding: 125px 6% 30px;
    min-height: 92svh;
  }
  .bold-introduction {
    font-size: clamp(39px, 10.4vw, 68px);
    line-height: 1.08;
  }
  .hero-ja {
    width: 115vw;
    right: -38%;
    top: 12%;
    opacity: 0.075;
  }
  .bold-hero-foot {
    flex-direction: column;
    align-items: start;
    gap: 28px;
    margin-top: 45px;
    font-size: 14px;
  }
  .bold-hero-foot > a {
    font-size: 14px;
    gap: 15px;
  }
  .bold-perspective {
    padding: 50px 6%;
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .bold-person {
    max-width: none;
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 25px;
    align-items: end;
  }
  .bold-person img {
    height: 135px;
  }
  .bold-person > a {
    padding: 0;
    font-size: 12px;
    line-height: 1.7;
    overflow-wrap: anywhere;
  }
  .reveal-paragraph {
    font-size: 27px;
  }
  .bold-person-note {
    font-size: 16px;
    margin-top: 22px;
  }
  .bold-thinking {
    padding: 65px 6% 45px;
  }
  .bold-section-heading {
    flex-direction: column;
    align-items: start;
    gap: 20px;
    margin-bottom: 35px;
  }
  .bold-section-heading h2 {
    font-size: 43px;
  }
  .bold-story-layout {
    display: block;
  }
  .bold-story {
    margin-bottom: 50px;
  }
  .bold-story.story-small {
    padding-top: 0;
  }
  .bold-story h3 {
    font-size: 35px;
  }
  .bold-story p {
    font-size: 16px;
  }
  .bold-story-url {
    font-size: 12px;
  }
  .bold-image-block {
    padding: 17px;
    font-size: 12px;
  }
  .bold-image-block.has-art > span:last-child {
    right: 17px;
    bottom: 17px;
  }
  .story-wide {
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 25px;
  }
  .bold-preview-note {
    margin-top: 15px;
    font-size: 13px;
  }
  .project-showcase {
    padding: 60px 6%;
  }
  .project-showcase > h2 {
    position: static;
    font-size: 43px;
    margin-bottom: 40px;
    padding: 0;
  }
  .showcase-project {
    display: flex;
    flex-direction: column-reverse;
    min-height: 0;
    gap: 25px;
    margin-bottom: 65px;
  }
  .showcase-description,
  .showcase-project:first-child .showcase-description {
    padding: 0;
    gap: 20px;
  }
  .showcase-description h3 {
    font-size: 33px;
  }
  .showcase-details p {
    max-width: none;
  }
  /* Phones scroll the showcase without scale or fades. */
  .showcase-visual {
    transform: none !important;
  }
  .showcase-description,
  .showcase-details {
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-word,
  .showcase-description,
  .showcase-details {
    opacity: 1 !important;
  }
  .hero-ja path,
  .showcase-visual,
  .showcase-details {
    transform: none !important;
  }
}