/* Norn polish (2026-10-05), loaded after the build's stylesheet on the landing page and the
   pages with an entry image (projects, people, impact, support, writing, impetus, longevity-nexus,
   talent-bridge, resource-deep-view). Landing rules are scoped to .immersive-landing.
   Addresses #website feedback: scroll from landing to "Our projects" too long (Effie),
   cards too small on big monitors (Effie), phone card size (Martin),
   tighter and consistent padding inside the cards (Sufal). */

/* Natural line breaks: no one-word last lines, balanced headings */
.immersive-landing .chapter-copy :is(h1, h2) { text-wrap: balance; }
.immersive-landing .chapter-copy p,
.immersive-landing .chapter-copy li { text-wrap: pretty; }

/* Keyboard focus moves to the chapter heading; keep the ring off the artwork card */
.immersive-landing .chapter-copy :is(h1, h2):focus:not(:focus-visible),
.immersive-landing .journey-chapter:focus:not(:focus-visible) { outline: none; }

/* ---------- Laptop, desktop and larger ---------- */
@media screen and (min-width: 701px) {
  /* Shorter scroll between chapters: less time parked on each card, shorter hand-off */
  body .immersive-landing .journey-chapter::after { height: calc(var(--reading-hold, 100svh) * .12) !important; }
  body .immersive-landing .journey-chapter { padding-bottom: calc(var(--departure-space, 65svh) * .45) !important; }

  /* One padding for every card */
  body .immersive-landing .journey-chapter .chapter-copy,
  body .immersive-landing .journey-chapter:first-child .chapter-copy,
  body .immersive-landing .journey-chapter#chapter-whole .chapter-copy { padding: 22px 26px !important; }

  /* Tighter, consistent vertical rhythm inside the cards */
  body .immersive-landing .chapter-copy h1 { margin-bottom: 16px !important; }
  body .immersive-landing .chapter-copy h2 { margin-bottom: 12px !important; }
  body .immersive-landing .chapter-copy :is(.work-highlight, .impetus-examples) { margin-top: 14px !important; padding-top: 12px !important; }
  body .immersive-landing .chapter-copy :is(.work-highlight, .impetus-examples) h3 { margin-bottom: 6px !important; }
  body .immersive-landing .chapter-copy .impetus-examples li + li { margin-top: 6px; }
  body .immersive-landing .chapter-copy .actions { margin-top: 16px !important; }
}

/* ---------- Big monitors: scale cards with the screen instead of a fixed 150% ---------- */
@media screen and (min-width: 2300px) and (min-height: 1250px) {
  body .immersive-landing .journey-chapter .chapter-copy {
    transform: scale(1.8) !important;
    max-height: calc((100svh - var(--scene-top, 74px) - 64px) / 1.8) !important;
    margin-bottom: calc(var(--desktop-card-extra, 0px) * 1.6) !important;
  }
}
@media screen and (min-width: 3000px) and (min-height: 1900px) {
  body .immersive-landing .journey-chapter .chapter-copy {
    transform: scale(2.2) !important;
    max-height: calc((100svh - var(--scene-top, 74px) - 64px) / 2.2) !important;
    margin-bottom: calc(var(--desktop-card-extra, 0px) * 2.4) !important;
  }
}

/* ---------- Phone landing: cards 40% bigger than the build's 50% (Martin, #website 2026-10-04) ---------- */
@media screen and (max-width: 700px) {
  body .immersive-landing .journey-chapter .chapter-copy { transform: scale(.7) !important; transform-origin: center bottom !important; }
}

/* ---------- Phone, other pages: text boxes over the entry images shrink to the landing card size (70%) ---------- */
@media screen and (max-width: 700px) {
  body main .room-entry__card,
  body[data-page="impetus"].impetus-reference-layout .impetus-reference-content .hero .hero-copy { transform: scale(.7); transform-origin: center bottom; }
  /* Impact centres its card on a point in the picture: keep that centre */
  body[data-page="impact"] main .room-entry__card { transform-origin: center center; }
  /* Writing sits at the top of its picture: shrink toward the top */
  body[data-page="library"] main .room-entry__card { transform-origin: center top; }

  /* Support: the page script measures the card to centre it on the picture, so a transform would
     feed back into that measurement. Same 70% result, done with a 70% width and zoomed contents. */
  body[data-style][data-page="support"] .destination-hero .hero-copy {
    padding: 14px 17px !important;
    border-radius: 5px 29px 5px 25px;
  }
  body[data-style][data-page="support"] .destination-hero:not([data-support-card-positioned]) .hero-copy { width: 70%; }
  body[data-style][data-page="support"] .destination-hero .hero-copy > * { zoom: .7; }
}

/* ---------- Landing footer: bring back the bark edge over the last scene ---------- */
body:has(.immersive-landing) #footer { position: relative; z-index: 1; }

/* ---------- Home card ("Make more time possible"): more prominent, room to breathe (Sufal 2026-10-05) ---------- */
@media screen and (min-width: 701px) {
  body .immersive-landing .journey-chapter#chapter-arrival .chapter-copy {
    width: clamp(440px, 34vw, 540px) !important;
    max-width: calc(100vw - 48px) !important;
    padding: 36px 40px 38px !important;
  }
  body .immersive-landing #chapter-arrival .chapter-copy h1 {
    font-size: clamp(56px, 4.6vw, 74px) !important;
    line-height: 1.02 !important;
    margin-bottom: 22px !important;
  }
  body .immersive-landing #chapter-arrival .chapter-copy > p:not(.eyebrow) {
    font-size: clamp(17px, 1.3vw, 19px) !important;
    line-height: 1.6 !important;
  }
}
@media screen and (min-width: 701px) and (max-width: 1100px) {
  body .immersive-landing .journey-chapter#chapter-arrival .chapter-copy { width: min(54%, 500px) !important; padding: 30px 32px 32px !important; }
  body .immersive-landing #chapter-arrival .chapter-copy h1 { font-size: 52px !important; }
}
@media screen and (max-width: 700px) {
  body .immersive-landing .journey-chapter#chapter-arrival .chapter-copy { transform: scale(.85) !important; }
}

/* ---------- Phone: no scrolling inside the landing cards ---------- */
/* The build caps the card at the stage height in layout pixels, but the card is drawn at 70% (85% for the
   home card), so long cards scrolled inside while there was room left on screen. Cap the drawn size instead. */
@media screen and (max-width: 700px) {
  body .immersive-landing .journey-chapter .chapter-copy { max-height: calc((var(--mobile-stage-height, 70svh) - 40px) / .7) !important; }
  body .immersive-landing .journey-chapter#chapter-arrival .chapter-copy { max-height: calc((var(--mobile-stage-height, 70svh) - 40px) / .85) !important; }
}
/* ---------- Phone: entry-image cards on the other pages use the landing card's type and spacing ---------- */
/* Same 70% drawing size as the landing cards, so these numbers match the landing card one for one. */
@media screen and (max-width: 700px) {
  body main .room-entry__card,
  body[data-page="impetus"].impetus-reference-layout .impetus-reference-content .hero .hero-copy { padding: 18px 20px !important; }
  body[data-style][data-page="support"] .destination-hero .hero-copy { padding: 13px 14px !important; }

  body main .room-entry__card h1,
  body[data-page="impetus"].impetus-reference-layout .impetus-reference-content .hero .hero-copy h1,
  body[data-style][data-page="support"] .destination-hero .hero-copy h1 {
    font-size: 39px !important; line-height: 1.04 !important; letter-spacing: -.035em !important; margin: 0 !important;
    text-wrap: balance;
  }
  body main .room-entry__card > p,
  body[data-page="impetus"].impetus-reference-layout .impetus-reference-content .hero .hero-copy > p,
  body[data-style][data-page="support"] .destination-hero .hero-copy > p {
    font-size: 16px !important; line-height: 1.6 !important; margin-top: 18px !important; text-wrap: pretty;
  }
  body main .room-entry__card .room-entry__actions,
  body[data-page="impetus"].impetus-reference-layout .impetus-reference-content .hero .hero-copy > a,
  body[data-style][data-page="support"] .destination-hero .hero-copy > a.button { margin-top: 20px !important; }
  body main .room-entry__card .button,
  body[data-style][data-page="support"] .destination-hero .hero-copy .button {
    font-size: 14px !important; padding: 12px 22px !important; min-height: 0 !important; line-height: 1.3 !important;
  }
  body main .room-entry__card .room-entry__next,
  body[data-page="impetus"].impetus-reference-layout .impetus-reference-content .hero .hero-copy > a { font-size: 14px !important; }
}

/* ---------- Phone: footer centred (mission line, Support button, subscribe form) ---------- */
@media screen and (max-width: 700px) {
  body #footer { justify-items: center; text-align: center; }
  body #footer .footer-mission { text-align: center; margin-inline: auto; max-width: 32ch; }
  body #footer .footer-actions { align-items: center; width: 100%; }
  body #footer .footer-support { align-self: center; }
  body #footer .footer-signup { width: 100%; text-align: center; }
}

/* ---------- Phone: every entry card sits at the bottom of its picture ---------- */
@media screen and (max-width: 700px) {
  body[data-page="impact"] main .room-entry__card,
  body[data-page="library"] main .room-entry__card {
    top: auto !important;
    bottom: 24px !important;
    left: 18px !important;
    right: 18px !important;
    transform-origin: center bottom !important;
  }
  body[data-style][data-page="support"] .destination-hero[data-support-card-positioned] .hero-copy {
    top: auto !important;
    bottom: 24px !important;
  }
}

/* ---------- Biomarker essay: industry stakeholder quotes as separate quotes with attribution ---------- */
.resource-document .norn-quotes { margin: 18px 0 34px; }
.resource-document .norn-quotes blockquote { margin: 0 0 22px; }
.resource-document .norn-quotes blockquote p { margin: 0; }
.resource-document .norn-quotes blockquote p + p { margin-top: 10px; }
.resource-document .norn-quotes .norn-quote-by { margin-top: 8px !important; font-size: .86em; opacity: .75; }

/* ---------- Support, phone: the autumn-forest backdrop behind "Three paths of patronage" ---------- */
/* On desktop it sits behind the three cards. Stacked on a phone the cards hid all of it except thin,
   blurry slivers between them (a landscape picture stretched to the full stack height). On phones it
   becomes a short band under the heading, with the first card overlapping its lower edge. */
@media screen and (max-width: 700px) {
  body .support-patronage .support-patronage-art {
    inset: 108px 0 auto 0 !important;
    height: 280px !important;
  }
  body .support-patronage .support-patronage-art img {
    width: 100% !important; height: 100% !important; margin: 0 !important;
    object-fit: cover !important; object-position: 50% 40% !important;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 70px, #000 100%) !important;
    mask-image: linear-gradient(to bottom, transparent 0, #000 70px, #000 100%) !important;
  }
  body .support-patronage .support-paths { margin-top: 150px !important; }
}

/* ---------- Phone: every landing card the same width on screen ---------- */
/* Drawn width = 85% of the screen minus the 18px gutters (95% on short phones). The home card is drawn
   at 85% and the rest at 70%, so their layout widths differ to land on the same drawn width. */
@media screen and (max-width: 700px) {
  body .immersive-landing .journey-chapter .chapter-copy {
    width: calc((100% - 36px) * .85 / .7) !important;
    left: calc((100% - (100% - 36px) * .85 / .7) / 2) !important;
  }
  body .immersive-landing .journey-chapter#chapter-arrival .chapter-copy {
    width: calc(100% - 36px) !important;
    left: 18px !important;
  }
}
@media screen and (max-width: 700px) and (max-height: 620px) {
  body .immersive-landing .journey-chapter .chapter-copy {
    width: calc((100% - 36px) * .95 / .7) !important;
    left: calc((100% - (100% - 36px) * .95 / .7) / 2) !important;
  }
  body .immersive-landing .journey-chapter#chapter-arrival .chapter-copy {
    width: calc((100% - 36px) * .95 / .85) !important;
    left: calc((100% - (100% - 36px) * .95 / .85) / 2) !important;
  }
}

/* ---------- Desktop landing: smaller card titles on one line, so the cards are more compact ---------- */
@media screen and (min-width: 701px) {
  body .immersive-landing .journey-chapter .chapter-copy h2 {
    font-size: clamp(34px, 3.05vw, 46px) !important;
    line-height: 1.06 !important;
  }
  body .immersive-landing .journey-chapter .chapter-copy h2 br { display: none; }
}