/* Responsive presentation for the original Claude Design export.
   !important overrides fixed inline artboard geometry, not the design tokens. */
#top { width: 100% !important; max-width: 1920px; margin-inline: auto; }
#top > header, #top > section, #how-it-works > div { width: 100% !important; }
#top > header { padding-inline: clamp(24px, 6.667vw, 128px) !important; }
#top > section:not([data-screen-label="Hero"]), #how-it-works > div {
  padding-inline: clamp(24px, 6.667vw, 128px) !important;
}
#top > #how-it-works { padding: 0 !important; }
#top [data-screen-label="Hero"] > canvas,
#top [data-screen-label="Hero"] > div:first-of-type { left: calc(50% - 720px) !important; }
#top [data-screen-label="Hero"] > div:last-child { left: clamp(24px, 6.667vw, 128px) !important; }
/* Bricolage Grotesque for titles: 800 for the hero, 700 for section titles, 600 below. */
#top h1, #top h2, #top h3 { font-family: var(--display) !important; font-optical-sizing: auto; letter-spacing: -.03em !important; }
#top h1 { font-weight: 800 !important; letter-spacing: -.035em !important; }
#top h2 { font-weight: 700 !important; }
#top h3 { font-weight: 600 !important; letter-spacing: -.015em !important; }
#top h2 { overflow-wrap: break-word; }
#top > header nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--calce); text-decoration: none; font: 400 15px/1 var(--sans); }
#top > header nav a:hover { color: var(--oro); }
#top > header .nav-invitation { padding-inline: 16px; border: 1px solid rgba(242,238,230,.4); }
.editorial-section { box-sizing: border-box; padding-block: 112px; scroll-margin-top: 72px; border-top: 1px solid rgba(242,238,230,.16); }
.section-kicker { margin: 0 0 24px; font: 13px/1.5 var(--mono); letter-spacing: 0; color: var(--oro); }
.editorial-section h2 { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(40px, 4.5vw, 64px); line-height: 1.04; letter-spacing: -.03em; text-wrap: balance; }
.section-intro { font-size: 18px; line-height: 1.6; max-width: 580px; color: rgba(242,238,230,.84); }
.invitation-links { display: flex; flex-wrap: wrap; gap: 16px 32px; margin-top: 32px; }
.invitation-links a { min-height: 44px; display: inline-flex; align-items: center; gap: 16px; text-decoration: none; border-bottom: 1px solid rgba(242,238,230,.4); }
.site-footer { padding: 40px clamp(24px, 6.667vw, 128px); border-top: 1px solid rgba(242,238,230,.16); display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.site-footer p { font-size: 14px; color: var(--calce-muted); }
.site-footer nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.site-footer nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; text-underline-offset: 5px; }
.section-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; }
.section-heading .section-intro { margin: 0; }
.source-note { font-size: 13px; line-height: 1.6; color: rgba(242,238,230,.68); max-width: 760px; margin: 28px 0 36px; }
.source-note a, .club-photo a { color: inherit; text-underline-offset: 3px; }
.portfolio-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 36px 24px; }
.portfolio-card { min-width: 0; border-top: 1px solid rgba(242,238,230,.25); padding-top: 20px; }
.portfolio-logo { background: var(--nero-2); border-radius: var(--radius); aspect-ratio: 1.55; display: flex; align-items: center; justify-content: center; }
.portfolio-logo img { width: 100%; height: 100%; max-height: 160px; object-fit: contain; }
.portfolio-card h3 { font: 700 20px/1.3 var(--display); letter-spacing: -.015em; margin: 20px 0 10px; }
.portfolio-card h3 a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; min-height: 44px; text-decoration: none; }
.portfolio-card h3 span { color: var(--oro); flex: none; }
.portfolio-card p { font-size: 14.5px; line-height: 1.55; color: rgba(242,238,230,.8); margin: 0; }
.portfolio-card .portfolio-history { margin-top: 12px; font-size: 12px; color: rgba(242,238,230,.62); }
#labs { background: #F2EEE6; color: #151412; }
#labs .section-kicker { color: #5E5A52; }
.labs-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.club-photo { margin: 0; }
.club-photo img { width: 100%; height: auto; aspect-ratio: 1.35; object-fit: cover; object-position: 53% 50%; display: block; }
.club-photo figcaption { font-size: 12px; line-height: 1.5; margin-top: 12px; color: #5E5A52; }
#labs .section-intro, .program-context { color: #3B3833; font-size: 17px; line-height: 1.6; }
.club-name { font: 13px var(--mono); margin-top: 28px; color: var(--ink-muted); }
.club-facts { margin: 24px 0; font-size: 14px; line-height: 1.5; }
.club-facts > div { display: grid; grid-template-columns: 80px 1fr; gap: 20px; padding: 12px 0; border-top: 1px solid rgba(21,20,18,.18); }
.club-facts dt { color: #5E5A52; }
.club-facts dd { margin: 0; }
#labs .source-note { color: #5E5A52; margin: 20px 0; }
.club-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 48px; padding: 8px 20px; box-sizing: border-box; background: var(--nero); color: var(--calce); border-radius: var(--radius); text-decoration: none; font-size: 15px; }
#future-school { padding-block: 64px; background: #F2EEE6; color: #151412; border-top-color: rgba(21,20,18,.2); }
#future-school .section-kicker { color: #5E5A52; }
.school-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.school-layout p { font-size: 17px; line-height: 1.6; max-width: 480px; margin: 12px 0 0; }
.school-layout .planned-label { font: 12px/1.5 var(--mono); color: #5E5A52; margin: 0; }
#top #future-school h2 { font-size: 40px !important; }
#labs a.club-link:hover { background: var(--nero-3); color: var(--calce); }
.standalone main > .operating-support, .standalone main > #labs, .standalone main > #future-school { border-top-color: var(--line); }
@media (max-width: 1100px) { .portfolio-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .labs-layout { gap: 32px; } }
@media (max-width: 900px) {
  .section-heading, .labs-layout, .school-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .club-photo img { aspect-ratio: 1.6; }
  #top > #future-school { padding-block: 48px !important; }
  .site-footer nav { margin-left: 0; }
}
@media (max-width: 480px) { .portfolio-grid { grid-template-columns: minmax(0, 1fr); } .portfolio-logo { aspect-ratio: 2; } .portfolio-logo img { max-height: 156px; } .club-photo img { aspect-ratio: 1.35; } }
#how-it-works .layer-card {
  box-sizing: border-box; padding: 8px; margin: -8px 0 0;
  border: 0; border-radius: var(--radius); background: transparent;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
  opacity: 1; transition: opacity 180ms ease, background-color 180ms ease;
}
#how-it-works .layer-card[data-muted="true"] { opacity: .48; }
#how-it-works .layer-card[data-active="true"] { background: rgba(201,150,46,.14); box-shadow: inset 3px 0 var(--oro); }
#how-it-works .layer-card:focus-visible, #how-it-works .layers-reset:focus-visible { outline: 2px solid #151412; outline-offset: 4px; }
#how-it-works .layers-reset { align-self: flex-start; border: 0; padding: 8px 0; background: transparent; font: inherit; font-size: 14px; color: #151412; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { #how-it-works .layer-card { transition: none; } }
@media (max-width: 1100px) {
  #top > header nav { gap: 18px !important; }
  #who, #control, #name { gap: 40px !important; }
  #who [role="tabpanel"] > div { grid-template-columns: 1fr !important; gap: 8px !important; }
  #how-it-works > div { gap: 24px !important; }
  #integrations > div { gap: 24px !important; }
}
@media (max-width: 900px) {
  #top > header { height: auto !important; min-height: 72px; flex-wrap: wrap; gap: 16px; padding-block: 16px !important; position: relative !important; margin-bottom: 0 !important; }
  #top > header nav { flex-wrap: wrap; gap: 12px 20px !important; }
  #top > header nav a { font-size: 14px !important; }
  #top > section:not([data-screen-label="Hero"]), #how-it-works > div {
    padding-block: 72px !important; grid-template-columns: minmax(0, 1fr) !important;
    gap: 40px !important; height: auto !important; min-height: 0 !important; max-height: none !important;
  }
  #top > #how-it-works { padding: 0 !important; }
  #top h2 { font-size: clamp(38px, 6vw, 56px) !important; }
  #top [data-screen-label="Hero"] { height: auto !important; }
  /* The mosaic fills the hero behind the copy; the gold centre sits low, under the buttons. */
  #top [data-screen-label="Hero"] { --ch: max(88%, 101vw); }
  #top [data-screen-label="Hero"] a[href="/#how-it-works"] { background: rgba(21,20,18,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  #top [data-screen-label="Hero"] > div:last-child {
    position: relative !important; left: 0 !important; top: 0 !important; width: 100% !important;
    height: auto !important; min-height: min(760px, calc(100svh - 72px)); box-sizing: border-box;
    padding: 64px clamp(24px, 6.667vw, 128px) 200px !important; justify-content: flex-start !important;
  }
  #top [data-screen-label="Hero"] > div:last-child > * { max-width: 640px; }
  #top [data-screen-label="Hero"] h1 { font-size: clamp(56px, 10vw, 80px) !important; }
  #top [data-screen-label="Hero"] > canvas {
    height: var(--ch) !important; width: auto !important; aspect-ratio: 1.6;
    left: 50% !important; transform: translateX(-69.03%);
    top: calc(64% - var(--ch) * .489) !important;
  }
  #top [data-screen-label="Hero"] > div:first-of-type {
    inset: 0 !important; width: 100% !important; height: 100% !important; z-index: 1;
    background: linear-gradient(180deg, rgba(21,20,18,.9) 0%, rgba(21,20,18,.74) 48%, rgba(21,20,18,.28) 78%, rgba(21,20,18,.1) 100%) !important;
  }
  #how-it-works > div > div:last-child { display: flex; flex-direction: column; gap: 24px; }
  #how-it-works iframe { position: relative !important; width: 100% !important; height: 380px !important; }
  #how-it-works svg { display: none; }
  #how-it-works .layer-card {
    position: static !important; width: 100% !important;
    padding-top: 16px; border-top: 1px solid rgba(21,20,18,.16);
  }
  #integrations > div:first-child, #integrations > div:last-child { grid-template-columns: minmax(0, 1fr) !important; }
  #integrations > div:nth-child(2) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0 !important; }
  #integrations ul { justify-content: flex-start !important; }
  #name > div:first-child > div > p:last-child { flex-wrap: wrap; }
  #waitlist form { flex-wrap: wrap; max-width: 100%; }
  #waitlist input { max-width: 100%; }
}
@media (max-width: 480px) {
  #top > header { align-items: flex-start !important; }
  #top > header nav { width: 100%; }
  #top [data-screen-label="Hero"] > div:last-child > div { flex-wrap: wrap; }
  #control > div:last-child { padding: 22px !important; }
  #integrations > div:nth-child(2) > div { padding: 24px 16px !important; }
  #integrations > div:last-child { padding: 24px !important; }
  #name > div:first-child > div > p:first-child { font-size: 84px !important; }
  #name > div:last-child > div { grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important; }
}