/* Final landing-page details. Keep motion and decoration out of the reading path. */
body[data-home="true"] { color-scheme: dark; }
body[data-home="true"] :is(a,button,summary):focus-visible {
  outline: 2px solid var(--lime); outline-offset: 5px;
}
body[data-home="true"] ::selection { background: var(--lime); color: #142006; }
body[data-home="true"] :is(h1,h2,h3) { text-wrap: balance; }
body[data-home="true"] .hero { background: #070907; }
body[data-home="true"] .hero h1 > span:last-child { color: #d0ff65; }
.kun-intro { position: relative; }
.kun-intro::before {
  content: ''; display: block; width: 1px; height: 44px; margin: 0 auto 30px;
  background: linear-gradient(transparent,#c9ff4c85);
}
.kun-intro .romance-heading > p { max-width: 680px; margin-inline: auto; }
.kun-ribbon-controls { display: flex; direction: ltr; justify-content: center; align-items: center; gap: 8px; margin: -26px auto 32px; }
.kun-ribbon-controls > button { position: static; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #ffffff2e; border-radius: 50%; background: #10140d; color: #eef1e6; cursor: pointer; transition: background 200ms,color 200ms; }
.kun-ribbon-controls > button:hover { background: var(--lime); color: #152007; }
.kun-ribbon-controls [data-ribbon-direction] { font: 22px Arial,sans-serif; }

/* Keep the phone clear of the fixed header and mobile browser chrome. */
body[data-home="true"] #features { scroll-margin-top: var(--kun-header-height,80px); }
.kun-feature-device { height: min(80svh,840px,calc(100svh - 128px)); box-shadow: 0 0 0 1px #ffffff29,0 30px 100px #9cd73609; }

body[data-home="true"] .romance-continuation {
  border-block: 1px solid #ffffff0b;
  background: radial-gradient(ellipse at 85% 45%,#1b2b163d,transparent 60%),#050704;
}
.kun-section-cta { max-width: 100%; text-align: center; white-space: normal; }
.romance-continuation .kun-section-cta { margin-top: 30px; }
.kun-voice .kun-section-cta { margin-top: 16px; }
.romance-chat { transition: border-color 250ms ease; }
.romance-chat:focus-within { border-color: #c9ff4c66; }

/* Three editorial covers finish the content section with a quieter rhythm. */
.kun-journal-meta { margin-bottom: 12px; font-size: 11px; line-height: 1.4; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: #b3bdab; }
body[data-home="true"] [data-journal-article] .related-article-media { background: #11150f; }
body[data-home="true"] [data-journal-article] .related-article-media img { object-fit: contain; object-position: center; }
@media(max-width:600px) { .kun-journal-meta { margin-bottom: 6px; font-size: 10px; } }
@media(min-width:901px) {
  body[data-home="true"] .related-articles-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
  body[data-home="true"] .related-article-card { border: 1px solid #ffffff17; border-radius: 22px; background: #0d110c; overflow: hidden; transition: border-color 250ms ease,transform 250ms var(--kun-ease); }
  body[data-home="true"] .related-article-card > a { display: flex; flex-direction: column; align-items: stretch; padding: 0; gap: 0; height: 100%; }
  body[data-home="true"] .related-article-media { aspect-ratio: 16/10; border-radius: 0; }
  body[data-home="true"] .related-article-copy { padding: 24px; }
  body[data-home="true"] .related-article-copy h3 { font-size: clamp(22px,2vw,28px); }
  body[data-home="true"] .related-article-copy p { font-size: 15px; line-height: 1.55; }
  body[data-home="true"] .related-article-card:hover { border: 1px solid #c9ff4c66; background: #11170d; border-radius: 22px; transform: translateY(-4px); }
}
@media(max-width:1100px) {
  body[data-home="true"] { --kun-header-height: calc(68px + env(safe-area-inset-top,0px)); }
  body[data-home="true"] .kun-header { height: var(--kun-header-height); padding-top: calc(10px + env(safe-area-inset-top,0px)); padding-left: max(16px,env(safe-area-inset-left,0px)); padding-right: max(16px,env(safe-area-inset-right,0px)); }
}
@media(max-width:900px) and (orientation:portrait) {
  .kun-feature-sticky { padding-bottom: calc(20px + env(safe-area-inset-bottom,0px)); }
  .kun-feature-device { height: 100%; max-height: 68svh; min-height: 0; }
}
@media(max-width:760px) {
  body[data-home="true"] { --kun-header-height: calc(64px + env(safe-area-inset-top,0px)); }
  .kun-feature-ribbon > h2 { padding-inline: 24px; }
  .kun-ribbon-controls { margin: 0 auto 24px; }
  .kun-intro::before { height: 28px; margin-bottom: 24px; }
  .kun-feature-titles h3 { font-size: clamp(23px,6.3vw,30px); }
}
@media(max-width:760px) and (orientation:portrait) {
  .kun-short-viewport .kun-feature-sticky {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr); grid-template-rows: auto minmax(0,1fr);
    align-content: center; align-items: center; column-gap: 16px;
    padding: 18px 16px calc(20px + env(safe-area-inset-bottom,0px));
  }
  .kun-short-viewport .kun-feature-device { grid-column: 1; grid-row: 1 / 3; width: 100%; height: auto; max-height: 100%; max-width: calc((var(--kun-usable-height) - var(--kun-header-height) - 46px - env(safe-area-inset-bottom,0px)) * .46); border-radius: 22px; border-width: 3px; }
  .kun-short-viewport .kun-feature-screen { border-radius: 18px; }
  .kun-short-viewport .kun-feature-titles { grid-column: 2; grid-row: 1; align-self: end; }
  .kun-short-viewport .kun-feature-descriptions { grid-column: 2; grid-row: 2; align-self: start; }
  .kun-short-viewport .kun-feature-titles h3 { font-size: 21px; text-align: start; }
  .kun-short-viewport .kun-feature-descriptions p { font-size: 13px; line-height: 1.45; text-align: start; }
}
@media(max-width:1100px) and (max-height:540px) and (orientation:landscape) {
  .kun-feature-sticky { padding-bottom: 12px; padding-left: max(28px,env(safe-area-inset-left,0px)); padding-right: max(28px,env(safe-area-inset-right,0px)); }
  .kun-feature-device { height: calc(var(--kun-usable-height) - var(--kun-header-height) - 32px - env(safe-area-inset-bottom,0px)); }
}
@media(prefers-reduced-motion:reduce) {
  body[data-home="true"] .related-article-card:hover { transform: none; }
}
