/* The Fellowship page in black: what main's Fellowship page has that the bootcamps don't. Loaded after the bootcamps' black.css, which does the rest.
   Copied to origin/css/lunartech-fellowship.css by build.mjs. */

/* Main's wrapper is 100vw at some widths, wider than the page beside a scrollbar. clip rather than hidden, so it isn't a scroll container. */
body .page-wrapper { width: 100%; overflow: clip; background-color: #000; }
html { scroll-padding-top: 6rem; }

/* ---------- The moving header ---------- */

/* The home page's large words: Inter 200, white. */
body .about-1-heading { font-weight: 200; letter-spacing: -0.01em; color: #fff; }
body .about-hero-grid .caps,
body .about-hero-grid .caps.text-weight-medium { --t-font: Geist; font-size: 12.5px !important; line-height: 1.6 !important; font-weight: 300 !important; letter-spacing: 1px; color: #fff; }
body .about-hero-grid .caps.text-weight-regular { color: #8a8a8a; }
/* A ghost on main's white page; at main's 10% it all but disappears on black. */
body .hero-year { opacity: 0.22; font-weight: 200; letter-spacing: -0.01em; }

/* ---------- The trailer ---------- */

/* 100vw counts the scrollbar and pushes the picture off centre. Main also holds 120vh for a picture about 90vh tall, which on black is a long empty band. */
body .about-hero-image { height: auto; }
body .lt-player { --t-font: Geist; width: 100%; right: auto; left: 0; margin-right: 0; margin-left: 0; }

/* ---------- Words inside titles ---------- */

/* black.css shrinks .text-color-grey to small print, which is right on its own and wrong for the dim words in the middle of a title. */
body .heading-3 .text-color-grey,
body .intro-text .text-color-grey { font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; letter-spacing: inherit; color: var(--t-muted); }

/* ---------- Section heads ---------- */

/* Main centres the two buttons under a paragraph set to the left, 100px off its edge. */
body .double-button.align-left { align-self: flex-start; }

/* ---------- The open programs ---------- */

body :is(#roles, #programs) p { --t-font: Geist; font-size: 15px; line-height: 1.6; font-weight: 300; color: #9a9a9a; }
/* Main dims this paragraph again on top of its grey, and leaves it to the left under a centred title on a phone. */
body :is(#roles, #programs) .opacity-60 { opacity: 1; }
body :is(#roles, #programs) .jobs-heading p { text-align: center; }
/* Main lights a row in near-white when you point at it, which with white words here leaves nothing to read. */
body .job-card-wrapper:hover { background-color: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.14); }

/* ---------- How fellows join ---------- */

/* These rows take main's page colour, which black.css turns white so main's text follows. */
body .row-info,
body .row-info.lt-current { background-color: transparent; }
body .row-info .text-size-small { --t-font: Geist; font-size: 13px; font-weight: 300; color: #8a8a8a; }
body .row-info .text-weight-medium { --t-font: Geist; font-size: 13.5px; font-weight: 400; color: rgba(255, 255, 255, 0.86); }
body .button-icon img[src*="Arrow.svg"] { filter: invert(1); }

/* ---------- The fellows' slider: the same treatment as Success Stories ---------- */

body {
  --lt-fellows-section-bg: #000;
  --lt-fellows-black: #fff;
  --lt-fellows-white: #fff;
  --lt-fellows-card-bg: #000;
}
body .lt-fellows-section { --t-font: Geist; font-weight: 300; }
/* Main pads only the right of this block, and the row, centred on it, ends up 20px left of the screen: a gap down the right edge and a first card off the text's line. */
body .lt-fellows-section .slider-component.wrapper { padding-right: 0; }
/* the home page's arrows (.lt-prog-arrow) */
body [data-lt-slider] [data-lt-slider-prev],
body [data-lt-slider] [data-lt-slider-next] { width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, 0.16); background: transparent; color: #e6e6e6; }
body [data-lt-slider] [data-lt-slider-next] { left: calc(44px + 0.6rem); }
body [data-lt-slider] .slider-arrow-icon { width: 16px; height: 16px; }
body [data-lt-slider] [data-lt-slider-prev]:hover,
body [data-lt-slider] [data-lt-slider-next]:hover { border-color: rgba(255, 255, 255, 0.34); background: rgba(255, 255, 255, 0.08); }
body [data-lt-slider] [data-lt-slider-prev]:focus-visible,
body [data-lt-slider] [data-lt-slider-next]:focus-visible { box-shadow: none; outline: 1px solid rgba(255, 255, 255, 0.6); outline-offset: 3px; }
body .fellow-card-media { background: #000; }
/* a little shade at the top, so the pill stays readable on the portraits with white walls */
body .fellow-card-media::after { content: ''; position: absolute; inset: 0 0 auto 0; z-index: 1; height: 30%; background: linear-gradient(180deg, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0)); pointer-events: none; transition: opacity 180ms ease; }
body .fellow-card.is-playing .fellow-card-media::after { opacity: 0; }
/* opened wide, a portrait crops to its forehead at the original 20%: slide to the face as the card opens. --open-y is each fellow's own, from the build */
body .fellow-card-thumb { transition: transform 2200ms var(--lt-ease-prestige), opacity 620ms ease, object-position 1500ms var(--lt-ease-prestige); }
body .fellow-card.is-expanded .fellow-card-thumb { object-position: center var(--open-y, 38%); }
body .fellow-card-rank { font-weight: 400; }
body .fellow-card-rank span { font-weight: 400; }
/* text-align: end in the original puts the name under the pill at the top; this starts it at the bottom, on the card's shade */
body .fellow-card-name-vertical { text-align: start; font-weight: 400; }
body .fellow-card-name { --t-font: Inter; font-weight: 300; letter-spacing: -0.01em; color: #fff; }
body .fellow-card-role { font-weight: 300; }
body .fellow-card-tag { font-weight: 300; }
@media (max-width: 767px) {
  /* an opened card is wider than a phone and centred on it, so the name moves in from the card's edge to the screen's */
  body .fellow-card-meta { right: calc(50% - 50vw + 6vw); left: calc(50% - 50vw + 6vw); }
  /* the same for the playing video: the whole picture and its controls on the screen, not running off its edges */
  body .fellow-card.is-playing .fellow-card-media video { right: auto; left: calc(50% - 50vw); width: 100vw; }
}

/* ---------- What fellows build: the gallery ---------- */

body .ltg-systems-gallery { --t-font: Geist; --marble: #000; --black: #f5f5f5; --smoke: #0b0b0c; --white: #fff; --grey: #8a8a8a; background: #000; color: #f5f5f5; }
body .ltg-card-content { border-color: rgba(255, 255, 255, 0.16); background: rgba(0, 0, 0, 0.52); box-shadow: none; }
body .ltg-card-title { --t-font: Inter; font-size: 18px; line-height: 1.25; font-weight: 300; letter-spacing: -0.01em; }
body .ltg-card-copy { font-size: 13.5px; line-height: 1.55; font-weight: 300; color: rgba(255, 255, 255, 0.78); }
body .ltg-card-content span { font-size: 11px; font-weight: 400; letter-spacing: 0.08em; }
body .ltg-gallery-arrow { width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, 0.16); background: transparent; color: #e6e6e6; }
body .ltg-gallery-arrow:hover { border-color: rgba(255, 255, 255, 0.34); background-color: rgba(255, 255, 255, 0.08); }

/* ---------- The perks ---------- */

/* The rules that name colours directly are swapped at build (PERKS_DARK in build.mjs); these are the ones that use the embed's own variables. */
body .ltp-perks {
  --t-font: Geist;
  --marble: #000;
  --black: #f5f5f5;
  --smoke: #0b0b0c;
  --grey: #8a8a8a;
  --ink: #e6e6e6;
  --accent-soft: rgba(214, 60, 74, 0.14);
  --silver: #6f7480;
  --silver-light: rgba(255, 255, 255, 0.12);
  --silver-soft: rgba(255, 255, 255, 0.06);
  background: #000;
}
/* Main's lines between the cards are the grid's own colour showing through a 1px gap, and it fills the empty cells too, which on black is a grey block. The lines belong to the cards here. */
body .ltp-perks .ltp-bento { background: #000; border-color: #1f1f1f !important; box-shadow: none; }
body .ltp-perks .ltp-bento > .ltp-perk-card { box-shadow: 0 0 0 1px #1f1f1f; }
body .ltp-perks .ltp-title { --t-font: Inter; font-size: 20px; line-height: 1.25; font-weight: 300; letter-spacing: -0.01em; color: #f5f5f5; }
body .ltp-perks .ltp-perk-card:hover .ltp-title { color: #fff; }
body .ltp-perks .ltp-copy { font-size: 14px; line-height: 1.6; font-weight: 300; color: #8a8a8a; }
body .ltp-perks .ltp-meta { font-size: 11px; font-weight: 400; letter-spacing: 0.08em; }
/* The pretend terminals and code stay in a typewriter face. */
body .ltp-perks :is(code, .ltp-term-body, .ltp-term-body *, .ltp-rfile) { --t-font: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* Main stops these words at the card's edge with dots. They wrap instead, so nothing is cut. */
body .ltp-perks :is(.ltp-ptitle, .ltp-pmeta, .ltp-feed-body p) { overflow: visible; white-space: normal; text-overflow: clip; }
body .ltp-perks code { overflow: visible !important; min-width: 0; white-space: pre-wrap !important; overflow-wrap: anywhere; text-overflow: clip !important; }
/* Main's red is too dim for words this small on its own tint. */
body .ltp-perks :is(.ltp-tag, .ltp-fund-pill) { color: #f0707b; }
/* Three columns squeeze the little pretend screens below this width; main only goes to two at 991px. */
@media (min-width: 641px) and (max-width: 1199px) {
  body .ltp-perks .ltp-bento { grid-template-columns: repeat(2, 1fr); }
  body .ltp-perks .ltp-span-2 { grid-column: span 2; }
}

/* ---------- Narrower screens: main's fixed widths would otherwise overlap or cut words ---------- */

body .ltg-card-title { overflow: visible; white-space: normal; text-overflow: clip; }
/* Five cards to a screen are too narrow to read below 1280px; main only changes that at 991px. */
@media (min-width: 992px) and (max-width: 1279px) {
  body .ltg-card-track { --lt-card-width: calc((100vw - (var(--lt-card-gap) * 3.5)) / 3.5); }
}
/* The tags' three columns keep main's 8rem gaps until 991px, and at the narrow end they run over the program's name. */
@media (min-width: 992px) {
  body .job-tags { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body .job-title { padding-right: 2rem; }
}
@media (min-width: 992px) and (max-width: 1439px) {
  body .job-tags { column-gap: 2.5rem; }
}
@media (max-width: 991px) {
  /* Main draws these as outlined cards here, in a near-white line. */
  body .job-card-wrapper { border-color: rgba(255, 255, 255, 0.14); }
}
@media (max-width: 767px) {
  /* Main's line breaks suit a wide screen; on a phone they leave a word alone on a line. */
  body .heading-3 br { display: none; }
  body .heading-3 { text-wrap: balance; }
}

/* ---------- The application form, on the Apply page and every program page ---------- */

/* The form is LUNARTECH's own on Fillout, already black, so it sits straight on the page with no box round it. */
body .lt-form-frame { overflow: hidden; border-radius: 16px; background: #000; }
body .lt-form-frame iframe { display: block; width: 100%; height: 720px; border: 0; background: #000; }
body .lt-form-note { --t-font: Geist; margin: 0.9rem 0 0; font-size: 13px; line-height: 1.5; font-weight: 300; color: #8a8a8a; }
body .lt-form-note a { color: #e6e6e6; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.3); text-underline-offset: 3px; }
body .lt-form-note a:hover { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.7); }
@media (max-width: 767px) {
  body .lt-form-frame iframe { height: 660px; }
}

/* ---------- /fellowship/apply ---------- */

/* Clear of the fixed header, as the moving header is on the Fellowship page. */
body .lt-apply-top { padding-top: 9rem; }
body .lt-apply-top .row-tab-heading { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
body .lt-apply-top .row-tab-heading h1 { margin: 0; text-align: left; }
body .lt-apply-top .row-tab-heading .text-size-large { margin: 0; color: rgba(255, 255, 255, 0.74); line-height: 1.6 !important; }
body .lt-apply-top .row-tab-heading .button { width: auto; margin-top: 0.25rem; }

body .lt-apply-form { padding-top: 10rem; }
body .lt-apply-terms { padding-bottom: 5rem; }
body .lt-apply-terms .services { margin-bottom: 0; padding-bottom: 0; }
/* On smaller screens main indents these rows 50px from the page's edge, off the line of everything else here. */
body .lt-apply-terms .top-about-content,
body .lt-apply-terms .services { padding-left: 0; padding-right: 0; }
/* Main's two rows have different gaps, so their second columns miss each other by 24px. */
@media (min-width: 992px) {
  body .lt-apply-terms .top-about-content,
  body .lt-apply-terms .services { grid-template-columns: 2fr 3fr; column-gap: 0; }
}

body #programs { padding-top: 10rem; }
body #programs h2 { text-align: center; }

/* ---------- /fellowship/<program> ---------- */

body .lt-back { --t-font: Geist; display: block; width: fit-content; margin-bottom: 2.25rem; font-size: 13px; line-height: 1.5; font-weight: 300; color: #8a8a8a; text-decoration: none; transition: color 0.2s ease; }
body .lt-back::before { content: "\2190"; margin-right: 0.55em; }
body .lt-back:hover { color: #fff; }
body .job-heading { display: block; }
body .job-heading .heading-3 { font-size: var(--t-title) !important; line-height: 1.1 !important; }
body .job-heading-wrap .max-width-60ch p { --t-font: Geist; font-size: 16px; line-height: 1.65; font-weight: 300; color: rgba(255, 255, 255, 0.74); }
body .job-rich-text .text-style-italic { --t-font: Geist; font-size: 12px !important; line-height: 1.3 !important; font-style: normal; font-weight: 400 !important; letter-spacing: 0.16em; text-transform: uppercase; color: #8a8a8a; }

/* Main's description, in the site's reading text: light, with no bold. */
body .job-rich-text .rich-text { --t-font: Geist; font-size: 16px; line-height: 1.7; font-weight: 300; color: rgba(255, 255, 255, 0.74); }
body .job-rich-text .rich-text h3 { --t-font: Inter; margin: 3.25rem 0 1.1rem; font-size: clamp(1.35rem, 1.8vw, 1.7rem); line-height: 1.2; font-weight: 300; letter-spacing: -0.01em; color: #f5f5f5; }
body .job-rich-text .rich-text h3:first-child { margin-top: 1.5rem; }
body .job-rich-text .rich-text p { margin: 0 0 1.1rem; }
body .job-rich-text .rich-text strong { font-weight: 400; color: #f5f5f5; }
body .job-rich-text .rich-text ul { margin: 0 0 1.25rem; padding-left: 1.15rem; }
body .job-rich-text .rich-text li { margin-bottom: 0.55rem; padding-left: 0.25rem; }
body .job-rich-text .rich-text li::marker { color: #6a6a6a; }

/* Main's column sits left of centre with nothing beside it. */
body .job-wrapper { margin-left: auto; margin-right: auto; }
/* Main's white card round "Apply here": on black the form needs no second box, and it lines up with the text above. */
/* Its space above is padding, not margin: Webflow's anchor scroll stops at the box's top edge, and this keeps "Apply here" clear of the fixed header. */
body .contact-form-wrapper { width: 100%; max-width: 803px; margin: 0 auto; padding: 8rem 0 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
body .contact-form-wrapper .form-heading-wrapper { width: 100%; max-width: none; }
body .contact-form-wrapper .heading-3 { margin: 0 0 0.75rem; font-size: var(--t-title) !important; line-height: 1.1 !important; }
body .contact-form-wrapper .form-heading-wrapper > div { --t-font: Geist; margin-bottom: 2rem; font-size: 15px; line-height: 1.6; font-weight: 300; color: #9a9a9a; }

/* ---------- /fellowship/fellows ---------- */

/* Main opens each section with 432px of space, which beneath the moving header leaves a screen of black. */
body.lt-fw-fellows .stats-main { margin-top: 0; margin-bottom: 4rem; }
body.lt-fw-fellows .stats-main .home-about.margin-top-features { margin-top: 10rem; margin-bottom: 5rem; }
body.lt-fw-fellows .section-16 { margin-top: 10rem; margin-bottom: 10rem; }
body.lt-fw-fellows .section-16 .last-cta { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
body.lt-fw-fellows .section-16 .button { margin-top: 1.5rem; }

/* One short line under the title, not the gap main leaves for a paragraph and two buttons. */
body .lt-writing .home-about { row-gap: 1.25rem; }
body .lt-writing .text-size-medium { margin-bottom: 0; }
body .lt-writing .divider-line { margin-bottom: 3.5rem; }

body .lt-writing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem 0.5rem; }
body .lt-writing-card { display: flex; flex-direction: column; color: #f5f5f5; text-decoration: none; }
body .lt-writing-pic { display: block; overflow: hidden; aspect-ratio: 16 / 10; margin-bottom: 1.1rem; border-radius: 14px; background: #0b0b0c; }
body .lt-writing-pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: filter 0.3s ease; }
body .lt-writing-card:hover .lt-writing-pic img { filter: brightness(1.1); }
body .lt-writing-by { --t-font: Geist; display: block; margin: 0 1rem 0.5rem 0; font-size: 12px; line-height: 1.3; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: #8a8a8a; }
body .lt-writing-title { --t-font: Inter; display: block; margin-right: 1.5rem; font-size: 18px; line-height: 1.3; font-weight: 300; letter-spacing: -0.005em; color: #f5f5f5; }
body .lt-writing-card:hover .lt-writing-title { color: #fff; }
@media (max-width: 991px) {
  body .lt-writing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 559px) {
  body .lt-writing-grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
}