/*
 * QPIT visual system v2.
 * Shared presentation layer for every reference page. It intentionally
 * changes no copy, routes, WordPress data, or page structure.
 */

:root {
  --qpit-v2-paper: #f7f7f2;
  --qpit-v2-lime: #dfff00;
  --qpit-v2-ink: #171817;
  --qpit-v2-line: rgba(23, 23, 23, .12);
}

body {
  background-color: var(--qpit-v2-paper);
  background-image: url('./assets/paper-grain.svg');
  background-size: 180px 180px;
}

/* One 442-byte, cached SVG gives the full site a restrained paper surface. */
body::before {
  content: '';
  position: fixed;
  z-index: 9998;
  inset: 0;
  pointer-events: none;
  background: url('./assets/paper-grain.svg') 0 0 / 150px 150px repeat;
  mix-blend-mode: multiply;
  opacity: .14;
}

/* A restrained, repeated geometry gives each page the same family feeling. */
main:not(:has(.hero-heading)) {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

main:not(:has(.hero-heading))::before,
main:not(:has(.hero-heading))::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

main:not(:has(.hero-heading))::before {
  width: min(72vw, 1080px);
  height: min(24vw, 360px);
  top: clamp(92px, 12vw, 190px);
  right: -29vw;
  border: clamp(12px, 1.8vw, 25px) solid rgba(223, 255, 0, .18);
  border-radius: 58% 42% 54% 46% / 52% 45% 55% 48%;
  transform: rotate(-24deg);
}

main:not(:has(.hero-heading))::after {
  width: min(47vw, 670px);
  height: min(30vw, 420px);
  top: clamp(180px, 26vw, 390px);
  right: -23vw;
  border: clamp(8px, 1.1vw, 16px) solid rgba(23, 24, 23, .045);
  border-radius: 48% 52% 45% 55% / 54% 48% 52% 46%;
  transform: rotate(-24deg);
}

/* The page lead stays deliberately calm so text remains the hero. */
.services-intro,
.works-heading,
.blog-heading,
.company-hero,
.contact-page,
.partner-hero,
.legal-page,
.privacy-page,
.service-hero {
  position: relative;
}

.services-intro::after,
.works-heading::after,
.blog-heading::after,
.company-hero::after,
.contact-page::after,
.partner-hero::after,
.legal-page::after,
.privacy-page::after,
.service-hero::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: clamp(96px, 14vw, 190px);
  height: clamp(96px, 14vw, 190px);
  right: clamp(4px, 8vw, 110px);
  top: -18px;
  border: clamp(8px, 1.1vw, 16px) solid rgba(223, 255, 0, .17);
  border-radius: 52% 48% 55% 45% / 45% 54% 46% 55%;
  transform: rotate(-22deg);
}

/* Preserve the existing rhythm while softening isolated boxes into a family. */
.services-primary,
.services-secondary,
.services-consult,
.works-section,
.blog-archive,
.company-culture,
.service-section,
.works-contact,
.contact-section {
  position: relative;
  border-radius: 10px;
}

.work-card,
.story-card,
.service-directory-card,
.services-support-item,
.company-culture-grid > article,
.contact-panel,
.qpit-line-panel {
  border-radius: 8px;
}

/* Let cut-paper scenes sit on the page instead of reading as square photos. */
.qpit-unique-art {
  background-color: transparent;
  -webkit-mask-image: radial-gradient(ellipse 78% 84% at 50% 50%, #000 52%, rgba(0, 0, 0, .92) 68%, transparent 100%);
  mask-image: radial-gradient(ellipse 78% 84% at 50% 50%, #000 52%, rgba(0, 0, 0, .92) 68%, transparent 100%);
}

.section-03 .detail-block,
.service-directory-card,
.approach-art,
.qpit-art-card {
  background-color: var(--qpit-v2-paper);
}

.section-03 .detail-block .qpit-art-card,
.service-directory-top figure,
.approach-art {
  overflow: visible;
}

/* Japanese headings wrap on deliberate word units instead of awkwardly mid-phrase. */
main h1,
main h2,
main h3 {
  text-wrap: balance;
  word-break: normal;
  overflow-wrap: normal;
}

@media (max-width: 760px) {
  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }

  /* Long Japanese headings must wrap before they can create horizontal overflow. */
  main h1,
  main h2,
  main h3 {
    min-inline-size: 0;
    max-inline-size: 100%;
    white-space: normal;
    text-wrap: pretty;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .qpit-heading-phrase,
  .qpit-copy-phrase {
    max-inline-size: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* Article titles are free to use the full line without hidden intrinsic overflow. */
  .blog-article-heading h1 {
    letter-spacing: 0;
    text-wrap: wrap;
  }

  /* The approved TOP headline has its own intentional two-line composition. */
  .hero-heading h1 .qpit-hero-line {
    white-space: nowrap;
    overflow-wrap: normal;
  }

  main:not(:has(.hero-heading))::before {
    width: 135vw;
    height: 52vw;
    top: 116px;
    right: -69vw;
    border-width: 23px;
  }

  main:not(:has(.hero-heading))::after {
    width: 98vw;
    height: 51vw;
    top: 250px;
    right: -58vw;
    border-width: 13px;
  }

  .services-intro::after,
  .works-heading::after,
  .blog-heading::after,
  .company-hero::after,
  .contact-page::after,
  .partner-hero::after,
  .legal-page::after,
  .privacy-page::after,
  .service-hero::after {
    width: 92px;
    height: 92px;
    top: -4px;
    right: 11px;
    border-width: 12px;
  }

  .services-primary,
  .services-secondary,
  .services-consult,
  .works-section,
  .blog-archive,
  .company-culture,
  .service-section,
  .works-contact,
  .contact-section {
    border-radius: 8px;
  }
}

/* Pair the supplied logo artwork with the legal Japanese company name. */
.brand.qpit-brand-logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: clamp(134px, 13vw, 184px);
  line-height: 1;
}

.brand.qpit-brand-logo img {
  display: block;
  width: 100%;
  height: auto;
}

.qpit-brand-company-name {
  display: block;
  margin-top: 7px;
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .075em;
  white-space: nowrap;
}

.qpit-footer-logo {
  display: inline-block;
  width: min(320px, 100%);
  font: inherit;
  letter-spacing: normal;
}

.qpit-footer-logo > img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 760px) {
  .brand.qpit-brand-logo { width: 138px; }
  .brand.qpit-brand-logo > .qpit-brand-company-name { font-size: 10px; }
  .qpit-footer-logo { width: min(250px, 100%); }
}

@media (prefers-reduced-motion: reduce) {
  main:not(:has(.hero-heading))::before,
  main:not(:has(.hero-heading))::after,
  .services-intro::after,
  .works-heading::after,
  .blog-heading::after,
  .company-hero::after,
  .contact-page::after,
  .partner-hero::after,
  .legal-page::after,
  .privacy-page::after,
  .service-hero::after { transform: none; }
}