/*
 * Home v2: a quiet, continuous abstract system.
 * Presentation only: the approved manuscript, links and WordPress content stay unchanged.
 */

body:has(.hero-heading),
main:has(.hero-heading) { overflow-x: clip; }

/* An almost imperceptible paper grain keeps the large quiet areas from feeling flat. */
body:has(.hero-heading) {
  background-color: #f7f7f2;
  background-image: url('./assets/paper-grain.svg');
  background-size: 180px 180px;
}

.hero:has(.hero-heading) {
  --qpit-v2-lime: #dfff00;
  display: block;
  max-width: 1440px;
  min-height: 720px;
  padding-top: 82px;
  padding-bottom: 98px;
  overflow: hidden;
  isolation: isolate;
  background-color: #f7f7f2;
  background-image: url('./assets/paper-grain.svg'), url('./assets/illustrations/hero-cutpaper-brand-v1.png');
  background-repeat: repeat, no-repeat;
  background-size: 180px 180px, cover;
  background-position: 0 0, center;
  border-radius: 0;
}

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

/* One quiet, continuous loop begins outside the hero and travels below it. */
.hero:has(.hero-heading)::before {
  width: min(67vw, 940px);
  height: min(31vw, 450px);
  right: -13vw;
  top: 110px;
  border: clamp(38px, 5.8vw, 82px) solid var(--qpit-v2-lime);
  border-radius: 55% 45% 53% 47% / 50% 44% 56% 50%;
  opacity: .08;
  transform: rotate(-29deg);
}

.hero:has(.hero-heading)::after {
  width: min(50vw, 720px);
  height: min(24vw, 350px);
  right: -9vw;
  top: 160px;
  border: clamp(12px, 1.8vw, 24px) solid rgba(53, 57, 49, .035);
  border-radius: 52% 48% 50% 50% / 47% 54% 46% 53%;
  transform: rotate(-29deg);
}

.hero-heading { position: relative; z-index: 2; max-width: 860px; }
.hero-heading .eyebrow { margin-bottom: 30px; letter-spacing: .13em; }
.hero-heading h1 {
  max-width: 830px;
  margin-bottom: 42px;
  font-size: clamp(58px, 7.2vw, 108px);
  line-height: 1.27;
  letter-spacing: -.075em;
}
.hero-heading h1 .qpit-hero-line { display: block; white-space: nowrap; }
.hero-heading h1::after { width: clamp(76px, 10vw, 138px); height: 9px; margin-top: 30px; transform: none; }

.hero-wordmark {
  top: auto;
  right: auto;
  bottom: -4px;
  left: -4px;
  z-index: -1;
  font-size: clamp(130px, 22vw, 330px);
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1px rgba(23, 23, 23, .09);
  opacity: 0;
  transform: none;
}

.hero-lower { display: block; position: relative; z-index: 1; }
.hero-summary { position: relative; z-index: 1; max-width: 590px; }
.hero-summary .copy:first-of-type { font-size: 20px; }
.hero-summary .copy { font-size: 16px; line-height: 2.05; }

/* Option B lives in the hero background, never in the content layer. */
.hero-lower .hero-art {
  display: none;
}

/* The type band becomes a calm transition, not another loud lime block. */
.qpit-type-band {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0 0 112px;
  padding: 29px 0 37px;
  overflow: visible;
  border: 0;
  background: transparent;
  transform: none;
}
.qpit-type-band::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: min(68vw, 900px);
  height: 160px;
  right: -21vw;
  top: 30px;
  border: 28px solid rgba(223, 255, 0, .55);
  border-radius: 60% 40% 55% 45%;
  transform: rotate(12deg);
}
.qpit-type-band > div {
  gap: 0;
  transform: translate3d(var(--band-x, 0px), 0, 0);
  transition: transform .14s linear;
  will-change: transform;
}
.qpit-type-band span { display: none; }
.qpit-type-band span:first-child {
  display: block;
  padding-left: max(24px, calc((100vw - 1280px) / 2));
  color: transparent;
  font-size: clamp(60px, 9vw, 145px);
  font-weight: 800;
  letter-spacing: -.075em;
  -webkit-text-stroke: 1px rgba(23, 23, 23, .38);
}

/* Service words and existing art remain; their containers become a calmer grid. */
.section-03 {
  max-width: 1400px;
  padding-top: 116px;
  padding-bottom: 116px;
  overflow: visible;
  background: transparent;
  border-radius: 0;
}
.section-03::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 340px;
  height: 340px;
  left: -150px;
  top: 0;
  border-radius: 50%;
  background: rgba(223, 255, 0, .15);
}
.section-03 > .section-head { max-width: 710px; margin-bottom: 50px; }
.section-03 .section-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.section-03 .section-body > .copy { grid-column: 1 / -1; max-width: 730px; margin-bottom: 18px; }
.section-03 .detail-block,
.section-03 .detail-block:nth-of-type(2),
.section-03 .detail-block:nth-of-type(3) {
  min-height: 370px;
  margin: 0;
  padding: 34px 34px 30px;
  overflow: hidden;
  border: 1px solid #e2e5da;
  border-top: 1px solid var(--ink);
  border-radius: 10px;
  background: rgba(255, 255, 255, .64);
  box-shadow: none;
}
.section-03 .item-number {
  width: auto;
  height: auto;
  margin-bottom: 18px;
  color: var(--ink);
  background: transparent;
  border-radius: 0;
  font-size: 48px;
  line-height: 1;
}
.section-03 .detail-block h3,
.section-03 .detail-block .copy { position: relative; z-index: 2; max-width: 62%; }
.section-03 .detail-block h3 { margin-bottom: 20px; font-size: clamp(22px, 2.1vw, 31px); }
.section-03 .detail-block .qpit-art-card {
  width: 43%;
  margin: 0 -7% 4px 20px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  transform: none !important;
}
.section-03 .detail-block .qpit-art-card .qpit-unique-art { mix-blend-mode: multiply; }
.section-03 .detail-block .text-link { position: relative; z-index: 2; clear: none; }

/* One very light continuation of the same language behind the current works. */
.section-06 {
  max-width: 1400px;
  margin-top: 62px;
  margin-bottom: 100px;
  padding: 96px 7%;
  overflow: hidden;
  background-color: #f0f1e8;
  background-image: url('./assets/paper-grain.svg');
  background-size: 180px 180px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.section-06::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: min(66vw, 850px);
  height: 220px;
  right: -180px;
  bottom: -102px;
  border: 42px solid rgba(223, 255, 0, .5);
  border-radius: 50% 50% 48% 52%;
  transform: rotate(-13deg);
}
.section-06 .section-head,
.section-06 .home-work-grid { position: relative; z-index: 1; }
.section-06 .home-work-grid { gap: 26px; }
.section-06 .home-work:nth-child(2) { padding-top: 42px; }
.section-06 .home-work figure { border-radius: 0; background: #fff; }

.section-09 {
  position: relative;
  max-width: 1400px;
  padding-top: 110px;
  padding-bottom: 110px;
  background: transparent;
}
.section-09::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 280px;
  height: 280px;
  right: 0;
  top: 52px;
  border: 1px solid rgba(23, 23, 23, .14);
  border-radius: 50%;
}
.section-09 .section-head { max-width: 780px; padding: 0; background: transparent; box-shadow: none; transform: none; }
.section-09 .section-head > * { transform: none; }
.section-09 .qpit-art-body { width: min(32vw, 400px); margin: 0 0 22px 46px; background: transparent; transform: none; }

/* Keep the existing wording, but decide its line break intentionally on small screens. */
.section-02 .section-head .qpit-heading-line { display: inline; }

@media (max-width: 1050px) {
  .hero:has(.hero-heading) { min-height: 650px; padding-top: 68px; }
  .section-03 .detail-block,
  .section-03 .detail-block:nth-of-type(2),
  .section-03 .detail-block:nth-of-type(3) { padding: 28px 25px; }
}

@media (max-width: 760px) {
  .hero:has(.hero-heading) {
    min-height: 0;
    padding: 26px 24px 66px;
    background-image: url('./assets/paper-grain.svg');
    background-repeat: repeat;
    background-size: 180px 180px;
    background-position: 0 0;
  }
  /* Mobile stays deliberately quiet: no decorative layer may cross the copy. */
  .hero:has(.hero-heading)::before,
  .hero:has(.hero-heading)::after {
    display: none;
  }
  .hero-lower {
    min-height: 0;
    padding-top: 0;
  }
  .hero-lower::before {
    display: none;
  }
  .hero-lower .hero-art { display: none; }
  .hero-heading h1 {
    max-width: 100%;
    margin-bottom: 18px;
    font-size: clamp(28px, 8.4vw, 37px);
    line-height: 1.42;
    letter-spacing: -.07em;
  }
  .hero-wordmark { bottom: 0; left: 14px; font-size: 41vw; }
  .hero-summary {
    z-index: 1;
    max-width: 100%;
  }
  .hero-summary .copy:first-of-type { font-size: 17px; }
  .qpit-type-band { margin-bottom: 68px; padding-top: 13px; padding-bottom: 23px; }
  .qpit-type-band::before { width: 116vw; height: 78px; top: 18px; right: -58vw; border-width: 17px; }
  .qpit-type-band span:first-child { padding-left: 24px; font-size: 16.7vw; }
  .section-03 { padding-top: 68px; padding-bottom: 68px; }
  .section-03 .section-body { display: block; }
  .section-03 .section-body > .copy { margin-bottom: 34px; }
  .section-03 .detail-block,
  .section-03 .detail-block:nth-of-type(2),
  .section-03 .detail-block:nth-of-type(3) { min-height: 0; margin-top: 22px; padding: 27px 21px 23px; border-radius: 8px; }
  .section-03 .detail-block h3,
  .section-03 .detail-block .copy { max-width: 100%; }
  .section-03 .detail-block .qpit-art-card { float: none; width: 78%; margin: 0 0 18px auto; }
  .section-03 .item-number { font-size: 39px; }
  .section-06 { margin: 30px 0 58px; padding: 66px 24px; }
  .section-06 .home-work:nth-child(2) { padding-top: 0; }
  .section-06::after { width: 120vw; height: 126px; right: -70vw; bottom: -57px; border-width: 24px; }
  .section-09 { padding-top: 70px; padding-bottom: 70px; }
  .section-09 .qpit-art-body { float: none; width: 76%; margin: 0 0 24px auto; }

  .section-02 .section-head .qpit-heading-line { display: block; }

  /* Mobile journal cards: date first, then title, with one compact vertical rhythm. */
  .section-11 .articles a {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: 'date arrow' 'title arrow';
    gap: 9px 16px;
    align-items: center;
    padding-block: 18px;
  }
  .section-11 .articles .qpit-home-blog-date {
    grid-area: date;
    justify-self: start;
    padding: 5px 8px;
    font-size: 10px;
    line-height: 1;
  }
  .section-11 .articles .qpit-home-blog-title {
    grid-area: title;
    width: 100%;
    font-size: 16px;
    line-height: 1.75;
  }
  .section-11 .articles a > span[aria-hidden='true'] {
    grid-area: arrow;
    align-self: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero:has(.hero-heading)::before,
  .hero:has(.hero-heading)::after,
  .qpit-type-band::before,
  .section-06::after { transform: none; }
  .qpit-type-band > div { transform: none !important; transition: none; }
}