/* The launch article is an editorial spread inside the existing Journal.
   journal/launch.html uses these scoped classes; journal_index.html uses only
   launch-index-art. System fonts, local images and native video/disclosures keep
   the page independent of external embeds, JavaScript or a frontend build. */

/* Strong typesetting and generous whitespace establish the launch's hierarchy.
   Existing shared brand variables keep contrast consistent with the live site. */
.launch-story { padding-block: 30px 80px; }
.launch-story h1, .launch-story h2, .launch-story h3 { color: var(--ink); font-weight: 400; }
.launch-story h2 { font: 400 clamp(34px, 3.7vw, 52px)/1.12 var(--serif); letter-spacing: -1.5px; }
.launch-story h2 em, .launch-story h1 em { color: var(--teal-strong); font-weight: 400; }
.launch-story section { scroll-margin-top: 28px; }
.launch-story a:focus-visible, .launch-story summary:focus-visible { outline: 2px solid var(--teal-strong); outline-offset: 5px; }
.launch-hero > .journal-back-link { margin-bottom: 38px; }
.launch-edition { display: flex; justify-content: space-between; align-items: center; gap: 18px; border-top: 1px solid var(--line-strong); padding-top: 24px; }
.launch-edition .landing-kicker { margin: 0; }
.launch-edition > span { color: var(--muted); font-size: 11px; }
.launch-hero h1 { font: 400 clamp(48px, 6.6vw, 88px)/1.03 var(--serif); letter-spacing: -3.8px; margin: 36px 0 28px; }
.launch-deck { max-width: 720px; color: var(--body-text); font-size: 19px; line-height: 1.65; margin-bottom: 26px; }
.launch-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 26px; }
.launch-text-link { display: inline-flex; align-items: center; gap: 9px; color: var(--teal-strong); font-size: 13px; min-height: 44px; }
.launch-text-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.launch-byline { color: var(--muted); font-size: 11px; margin: 25px 0 36px; }
.launch-byline strong { color: var(--ink); font-weight: 500; }

/* Preserve the generated artwork's composition. The image is responsive with
   known dimensions; it cannot overlap the heading or cause a loading jump. */
.launch-opening { margin-block: 0; }
.launch-opening img { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
.launch-opening figcaption { display: flex; justify-content: space-between; gap: 20px; padding-block: 14px; font-size: 11px; color: var(--muted); }
.launch-opening figcaption span:last-child { font-size: 9px; letter-spacing: 1.5px; }
.launch-contents { display: flex; flex-wrap: wrap; gap: 16px 28px; padding-block: 28px; border-bottom: 1px solid var(--line-strong); }
.launch-contents a { display: inline-flex; align-items: center; gap: 10px; min-height: 30px; font-size: 11px; color: var(--ink); }
.launch-contents a span { color: var(--teal-strong); font: italic 15px var(--serif); }
.launch-contents a:hover { color: var(--teal-strong); text-decoration: underline; text-underline-offset: 4px; }

/* A navy cinema frame makes the actual UI film the second visual anchor.
   Playback remains opt-in. Its controls and 16:9 ratio are never obscured. */
.launch-film { margin-block: 60px 0; background: var(--ink); color: var(--paper); padding: 44px; }
.launch-film-heading { display: flex; justify-content: space-between; gap: 28px; align-items: end; margin-bottom: 30px; }
.launch-film .landing-kicker { color: #A8D6CB; font-size: 9px; }
.launch-film h2 { margin: 0; color: var(--paper); font-size: clamp(30px, 3vw, 42px); }
.launch-film h2 em { color: #A8D6CB; }
.launch-film-heading > p { font-size: 12px; line-height: 1.8; color: #D2D6D2; margin: 0; }
.launch-film-heading > p span { color: #A8D6CB; }
.launch-film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; border: 1px solid #ffffff24; }
.launch-transcript { border-top: 1px solid #ffffff30; margin-top: 24px; }
.launch-transcript summary { display: flex; justify-content: space-between; gap: 14px; cursor: pointer; padding-block: 18px; font-size: 12px; list-style: none; }
.launch-transcript summary::-webkit-details-marker { display: none; }
.launch-transcript[open] summary span { transform: rotate(45deg); }
.launch-transcript > div { max-width: 720px; color: #E0E2DC; font-size: 15px; line-height: 1.8; padding-bottom: 15px; }
.launch-transcript a { color: #A8D6CB; text-decoration: underline; text-underline-offset: 4px; }
.launch-film a:focus-visible, .launch-film summary:focus-visible { outline-color: #A8D6CB; }

/* Long-form sections align a quiet margin note with a comfortable reading line.
   Wider full-bleed figures punctuate the prose without narrowing mobile text. */
.launch-chapter { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(0, 720px); column-gap: 70px; padding-block: 88px; }
.launch-margin { border-top: 1px solid var(--line-strong); padding-top: 15px; }
.launch-margin > span { font-size: 9px; letter-spacing: 1.2px; color: var(--muted); }
.launch-margin > p { font: italic 22px/1.4 var(--serif); color: var(--teal-strong); margin-top: 18px; }
.launch-prose { font-size: 17px; line-height: 1.85; color: var(--body-text); }
.launch-prose h2 { margin: 0 0 30px; }
.launch-prose p { margin-bottom: 22px; }
.launch-prose .launch-lead { font: 26px/1.5 var(--serif); letter-spacing: -.3px; color: var(--ink); }
.launch-prose h3 { font: 29px/1.25 var(--serif); margin: 40px 0 22px; letter-spacing: -.5px; }
.launch-prose a { color: var(--teal-strong); text-decoration: underline; text-underline-offset: 4px; }
.launch-prose strong { color: var(--ink); font-weight: 600; }
.launch-prose blockquote { margin: 36px 0 0; padding: 22px 0 0; border-top: 2px solid var(--teal-strong); font: italic 34px/1.3 var(--serif); color: var(--teal-strong); letter-spacing: -.8px; }
/* Match both earlier essays: only the author's name uses the locally served
   Allura handwriting font; the role remains small, plain and readable. The
   launch uses a different prose wrapper, so its selectors repeat that treatment. */
.launch-prose .journal-signature { margin: 0; color: var(--teal-strong); font: 400 clamp(34px, 4vw, 46px)/1.3 "Allura", "Snell Roundhand", "Apple Chancery", cursive; }
.launch-prose .journal-signature-role { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }

/* Two concrete examples make the educational distinction visible. The nine
   circles are an illustration only; the real interactive sample is linked. */
.launch-discovery { border-block: 1px solid var(--line-strong); background: var(--surface-soft); padding: 50px; }
.launch-discovery > header { text-align: center; }
.launch-discovery h2 { margin-bottom: 20px; }
.launch-discovery > header > p:last-child { font-size: 15px; color: var(--body-text); }
.launch-coin-question { display: flex; align-items: center; justify-content: center; gap: 40px; padding-block: 25px 12px; }
.launch-nine-coins { display: grid; grid-template-columns: repeat(3, 32px); gap: 9px; transform: rotate(-7deg); }
.launch-nine-coins > span { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #B69A65; border-radius: 50%; background: #E7D9AF; color: #6B502B; font: 14px var(--serif); box-shadow: 2px 3px 0 #CBB787; }
.launch-small-label { display: block; font-size: 9px; letter-spacing: 1.2px; color: var(--muted); }
.launch-coin-question p { font-size: 16px; line-height: 1.7; margin: 9px 0 0; }
.launch-think-pause { text-align: center; font-size: 12px; color: var(--muted); margin: 18px 0 32px; }
.launch-two-minds { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.launch-mind { padding: 32px; background: var(--surface); border: 1px solid var(--line-strong); }
.launch-mind h3 { font: italic 44px/1.1 var(--serif); letter-spacing: -1.5px; margin: 18px 0 20px; }
.launch-mind > p { font: 20px/1.55 var(--serif); margin-bottom: 24px; }
.launch-next { border-top: 1px solid var(--teal-line); padding-top: 18px; }
.launch-next > span { color: var(--teal-strong); font-size: 9px; letter-spacing: 1px; }
.launch-next p { font-size: 14px; line-height: 1.6; margin: 8px 0 0; }
.launch-discovery-note { max-width: 680px; margin: 30px auto 0; text-align: center; }
.launch-discovery-note p { font-size: 15px; line-height: 1.8; margin-bottom: 10px; }
.launch-discovery-note p:last-child { font: italic 25px/1.35 var(--serif); color: var(--teal-strong); }
.launch-small-reveal { max-width: 680px; margin: 25px auto 0; border-top: 1px solid var(--line-strong); }
.launch-small-reveal summary { padding-top: 18px; cursor: pointer; color: var(--teal-strong); font-size: 13px; }
.launch-small-reveal > p { font-size: 15px; line-height: 1.8; margin: 18px 0 0; }

/* Three clear subject doors use original, lightweight geometry instead of a
   stock icon library. These are ordinary links with a generous pointer target. */
.launch-room { padding-block: 48px; border-block: 1px solid var(--line-strong); }
.launch-section-heading { display: flex; justify-content: space-between; gap: 30px; align-items: end; margin-bottom: 36px; }
.launch-section-heading h2 { margin-bottom: 0; }
.launch-section-heading > p { color: var(--body-text); font-size: 14px; line-height: 1.8; margin: 0; }
.launch-subjects { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.launch-subject { display: block; border: 1px solid var(--line-strong); padding: 20px 25px 25px; color: var(--ink); background: var(--surface); transition: border-color .18s ease, background-color .18s ease; }
.launch-subject:hover { border-color: var(--teal-strong); background: var(--teal-soft); }
.launch-subject svg { display: block; width: 100%; height: 150px; stroke: var(--teal-strong); stroke-width: 1.5; fill: none; margin-bottom: 20px; }
.launch-subject .launch-svg-dot { fill: var(--teal-strong); }
.launch-subject .launch-svg-faint { opacity: .5; stroke-dasharray: 3 6; }
.launch-physics svg { stroke: #906326; }
.launch-physics .launch-svg-dot { fill: #906326; }
.launch-code svg { stroke: #3C6580; }
.launch-code .launch-svg-dot { fill: #3C6580; }
.launch-subject > span { color: var(--muted); font-size: 9px; letter-spacing: 1px; }
.launch-subject h3 { display: flex; align-items: center; justify-content: space-between; font: 34px var(--serif); margin: 15px 0; }
.launch-subject h3 span { font: 22px sans-serif; color: var(--teal-strong); }
.launch-subject > p { font-size: 14px; line-height: 1.65; margin: 0; color: var(--body-text); }
.launch-room-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 38px; margin-top: 35px; font-size: 16px; line-height: 1.85; color: var(--body-text); }
.launch-details { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; padding-top: 20px; }
.launch-details > div { border-top: 1px solid var(--teal-line); padding-top: 18px; }
.launch-details dt { font: 21px/1.3 var(--serif); color: var(--ink); margin-bottom: 12px; }
.launch-details dd { font-size: 13px; line-height: 1.8; margin: 0; color: var(--body-text); }

/* The final invitation preserves the film's exact closing line. Share links
   have no background network activity and only open when the reader chooses. */
.launch-finale { background: var(--ink); color: var(--paper); padding: 60px 44px 30px; text-align: center; }
.launch-finale > img { display: block; margin: 0 auto 25px; }
.launch-finale .landing-kicker { color: #A8D6CB; }
.launch-finale h2 { color: var(--paper); font-size: clamp(36px,4.5vw,62px); max-width: 800px; margin: 20px auto; }
.launch-finale h2 em { color: #A8D6CB; }
.launch-availability { font: italic 28px var(--serif); margin: 0 0 30px; }
.launch-finale .landing-button { background: #A8D6CB; color: var(--ink); border-color: #A8D6CB; }
.launch-finale .landing-button:hover { background: var(--paper); }
.launch-finale-note { color: #D2D6D2; font-size: 11px; margin-top: 15px; }
.launch-share { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 22px; margin-top: 42px; padding-top: 25px; border-top: 1px solid #ffffff30; color: #D2D6D2; font-size: 11px; }
.launch-share a { color: #A8D6CB; min-height: 35px; display: inline-flex; align-items: center; text-decoration: underline; text-underline-offset: 4px; }
.launch-finale a:focus-visible { outline-color: #A8D6CB; }

/* The newest Journal entry gets the same original cover, not an unrelated
   placeholder. The existing essays keep their original vector illustrations. */
.launch-index-art { position: relative; display: flex; flex-direction: column; justify-content: center; background: #EDE5D5; overflow: hidden; min-width: 0; }
.launch-index-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.launch-index-art > span { position: absolute; bottom: 0; inset-inline: 0; display: flex; justify-content: space-between; gap: 12px; background: var(--ink); color: var(--paper); padding: 19px 23px; font-size: 9px; letter-spacing: 1.5px; }

/* Tablet layouts give the article its full reading width. Phones stack visual
   comparisons and subject doors; no content depends on hover or tiny controls. */
@media (max-width: 950px) {
  .launch-chapter { grid-template-columns: minmax(0,1fr); padding-block: 58px; }
  .launch-margin { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
  .launch-margin > p { font-size: 18px; margin: 0; }
  .launch-film, .launch-discovery { padding: 30px; }
  .launch-subject { padding-inline: 18px; }
  .launch-subject > span { font-size: 8px; }
  .launch-room-copy { gap: 24px; }
}
@media (max-width: 650px) {
  .launch-story { padding-block: 22px 45px; }
  .launch-hero > .journal-back-link { margin-bottom: 25px; }
  .launch-edition { align-items: start; flex-direction: column; gap: 9px; padding-top: 20px; }
  .launch-hero h1 { font-size: clamp(40px,10.7vw,58px); letter-spacing: -1.8px; margin-block: 26px 22px; }
  .launch-wide-break { display: none; }
  .launch-deck { font-size: 16px; }
  .launch-byline { line-height: 1.7; margin-bottom: 26px; }
  .launch-opening figcaption { font-size: 10px; }
  .launch-opening figcaption span:last-child { display: none; }
  .launch-contents { gap: 6px 18px; padding-block: 20px; }
  .launch-contents a { font-size: 10px; }
  .launch-film { padding: 22px 16px 5px; margin-top: 34px; }
  .launch-film-heading, .launch-section-heading { display: block; }
  .launch-film-heading > p, .launch-section-heading > p { margin-top: 20px; }
  .launch-film h2 { font-size: 31px; }
  .launch-transcript > div { font-size: 14px; }
  .launch-chapter { padding-block: 44px; }
  .launch-margin > p { display: none; }
  .launch-prose { font-size: 16px; line-height: 1.8; }
  .launch-prose .launch-lead { font-size: 23px; }
  .launch-story h2 { font-size: 33px; letter-spacing: -.9px; }
  .launch-prose blockquote { font-size: 29px; }
  .launch-discovery { padding: 30px 18px; }
  .launch-discovery > header { text-align: left; }
  .launch-coin-question { align-items: start; justify-content: start; gap: 22px; }
  .launch-nine-coins { grid-template-columns: repeat(3,21px); gap: 6px; margin-top: 14px; }
  .launch-nine-coins > span { width: 21px; height: 21px; font-size: 10px; }
  .launch-coin-question p { font-size: 14px; }
  .launch-small-label { font-size: 8px; }
  .launch-think-pause { text-align: left; line-height: 1.7; }
  .launch-two-minds { grid-template-columns: minmax(0,1fr); gap: 14px; }
  .launch-mind { padding: 25px; }
  .launch-mind h3 { font-size: 38px; }
  .launch-mind > p { font-size: 19px; }
  .launch-discovery-note { text-align: left; }
  .launch-discovery-note p:last-child { font-size: 23px; }
  .launch-room { padding-block: 35px; }
  .launch-subjects, .launch-room-copy, .launch-details { grid-template-columns: minmax(0,1fr); }
  .launch-subject { padding: 20px 25px; }
  .launch-subject svg { height: 110px; margin-bottom: 10px; }
  .launch-subject > span { font-size: 9px; }
  .launch-room-copy { gap: 0; font-size: 16px; }
  .launch-details { gap: 25px; }
  .launch-finale { padding: 38px 22px 20px; }
  .launch-availability { font-size: 24px; }
  .launch-share { gap: 8px 20px; }
  .launch-share > span { flex-basis: 100%; line-height: 1.7; }
  .launch-index-art { min-height: 290px; }
}
/* Motion is limited to a subtle hover colour, and is removed when requested. */
@media (prefers-reduced-motion: reduce) {
  .launch-subject { transition: none; }
}