/* Orchestra: one full-screen page. Desktop locks to the viewport; phones and short screens scroll. */
:root {
  --bg: #040404; --panel: #101010; --title: #d6d6d6; --body: #6a6a6a; --sub: #989898;
  --stroke: #2a2a2a; --link: #6873a0; --hover: #a4b0e0;
  --fs: clamp(13px, calc(.45vw + .65vh), 18px);
  --pad: clamp(16px, 2.4vw, 40px);
  --gap: clamp(12px, 2.6vh, 34px);
  --bar: clamp(56px, 8vh, 84px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); }
body { background: var(--bg); color: var(--body); font-family: 'Inter', system-ui, sans-serif; font-weight: 500; font-size: var(--fs); line-height: 1.55; letter-spacing: -.02em; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: #515c7d; color: #e6e6e6; }

.grid-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .05;
  background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px); background-size: 100px 100px; }
.noise { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .05; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

/* ---------- layout (phones first: stacked, page scrolls) ---------- */
.app { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 100dvh; padding-bottom: 88px; }
.panel { display: flex; flex-direction: column; gap: var(--gap); padding: 28px 20px 24px; }
.stage { position: relative; height: 28vh; min-height: 200px; margin: 0 20px; border-top: .5px solid var(--stroke); border-bottom: .5px solid var(--stroke); overflow: hidden; }
#ascii { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: opacity .3s; }
.partners-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; padding: 24px 20px; }

/* ---------- type ---------- */
h1 { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-weight: 300; color: var(--title); font-size: clamp(44px, min(10vh, 17vw), 112px); line-height: .95; letter-spacing: -.035em; }
h2 { font-weight: 500; color: var(--sub); font-size: 1em; }
.subtitle { font-size: 1.25em; line-height: 1.35; letter-spacing: -.02em; color: #b8b8b8; margin-top: calc(var(--gap) * -.3); max-width: 26em; }
.lead { max-width: 30em; }
.note { font-size: .9em; color: var(--sub); margin-top: calc(var(--gap) * -.5); }
.panel > .top, .panel > .bottom { display: flex; flex-direction: column; gap: var(--gap); }
#card-text { display: flex; flex-direction: column; gap: .8em; }
section { display: flex; flex-direction: column; gap: .5em; }

/* fact strip: three cells instead of three rows */
.facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0 clamp(18px, 2.4vw, 36px); }
.facts dt { color: var(--sub); font-size: .85em; }
.facts dd { color: var(--title); }

/* challenge rows */
.rows { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; gap: 10px; padding: clamp(5px, .9vh, 9px) 0; width: 100%; text-align: left; }
.row i { flex: 1; min-width: 1px; height: 0; border-top: .5px solid var(--stroke); }
.row .l { color: var(--link); transition: color .2s; }
.row .r { color: var(--body); font-size: .9em; transition: color .2s; }
.row:hover .l, .row[aria-expanded="true"] .l { color: var(--hover); }
.row:hover .r, .row[aria-expanded="true"] .r { color: var(--title); }
.rows:hover .row:not(:hover) { opacity: .5; }
.row { transition: opacity .2s; }

/* partners */
.partners-bar h2 { font-weight: 400; font-size: 1.1em; color: var(--sub); }
.partners { display: flex; flex-wrap: wrap; align-items: center; gap: 10px clamp(20px, 3vw, 48px); }
.partners a { display: flex; align-items: center; height: 40px; opacity: .45; transition: opacity .2s; }
.partners a:hover { opacity: .95; }
.partners img { max-height: 22px; width: auto; filter: brightness(0) invert(1); }
.partners img.fal { height: 26px; width: 64px; }
.partners img.turing { max-height: 38px; }
.partners img.consumer { max-height: 32px; }

/* ---------- Get building (phones: fixed bar) ---------- */
.join-btn { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 40; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 16px; border: 1px solid #333; border-radius: 10px; background: #131313; color: #e2e2e2; font-size: 15px; letter-spacing: -.01em; line-height: 1; box-shadow: 0 8px 30px rgba(0,0,0,.6); transition: border-color .2s, background .2s; }
.join-btn:hover { border-color: #515c7d; background: #181818; }
.join-btn .ico { width: 24px; height: 24px; overflow: hidden; display: block; }
.join-btn .ico svg { width: 24px; height: 24px; display: block; shape-rendering: crispEdges; }
.join-btn .fb { display: none; }
.join-btn:hover .fa { display: none; }
.join-btn:hover .fb { display: inline; }
.join-btn:hover .ico svg { animation: thud .3s steps(3); }
.join-btn .spark { opacity: 0; }
.join-btn:hover .spark { animation: spark .4s steps(4) both; }
@keyframes spark { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes thud { 0%,100% { transform: translateY(0); } 33% { transform: translateY(1px); } 66% { transform: translateY(0); } }
.join-btn .chev { width: 8px; height: 14px; fill: #989898; margin-left: 6px; transition: transform .2s steps(2); shape-rendering: crispEdges; }
.join-btn:hover .chev { transform: translateX(3px); fill: #e6e6e6; }

/* ---------- challenge card (phones: full-screen sheet) ---------- */
.card { position: fixed; inset: 0; z-index: 50; overflow-y: auto; background: #0b0b0b; display: grid; grid-template-columns: 1fr; align-content: start; }
.card[hidden] { display: none; }
#card-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-bottom: .5px solid var(--stroke); }
.card-body { display: flex; flex-direction: column; gap: 1em; padding: 22px 20px 110px; }
.card-title { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-weight: 300; color: var(--title); font-size: clamp(28px, 4.2vh, 44px); line-height: 1.05; letter-spacing: -.02em; }
.card-body p { color: #8a8a8a; max-width: 34em; }
.card-body p:first-of-type { color: #b0b0b0; }
.card-partners { display: flex; flex-direction: column; gap: .4em; margin-top: .4em; }
.card-partners h3 { font-weight: 500; font-size: .85em; color: var(--sub); }
.card-partners .partners a { height: 34px; }
.card-close { position: fixed; top: 12px; right: 12px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; background: rgba(16,16,16,.85); border: 1px solid #333; color: #d6d6d6; font-size: 20px; line-height: 1; display: grid; place-items: center; }
.card-close:hover { border-color: #515c7d; }
.card-nav { display: flex; gap: 8px; flex-wrap: wrap; margin-top: .6em; }
.card-nav button { padding: 6px 12px; border: 1px solid var(--stroke); border-radius: 999px; color: var(--sub); font-size: .85em; }
.card-nav button:hover { border-color: #515c7d; color: var(--title); }
body.card-open { overflow: hidden; }

/* ---------- desktop: lock to the viewport, use all of it ---------- */
@media (min-width: 761px) and (min-height: 460px) {
  .app { display: grid; height: 100dvh; min-height: 0; padding: 0; overflow: hidden;
    grid-template-columns: minmax(390px, 36%) 1fr; grid-template-rows: minmax(0, 1fr) var(--bar); }
  .panel { grid-row: 1; grid-column: 1; background: var(--panel); border-right: .5px solid var(--stroke);
    padding: clamp(24px, 6vh, 72px) var(--pad) clamp(18px, 3.5vh, 44px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: #333 transparent; justify-content: space-between; }
  .stage { grid-row: 1; grid-column: 2; height: auto; min-height: 0; margin: 0; border: 0; }
  .partners-bar { grid-row: 2; grid-column: 1 / -1; flex-wrap: nowrap; padding: 0 var(--pad); border-top: .5px solid var(--stroke); gap: clamp(20px, 3vw, 48px); }
  .partners-bar .partners { flex-wrap: nowrap; }
  .join-btn { position: absolute; left: auto; right: var(--pad); bottom: var(--pad); width: auto; font-size: 1.05em; box-shadow: none; }

  .card { position: absolute; inset: clamp(16px, 4vh, 48px) var(--pad) calc(var(--pad) + 64px); z-index: 30; background: rgba(9,9,9,.94); border: .5px solid #333; border-radius: 6px;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); overflow: hidden; backdrop-filter: blur(4px); }
  .card { grid-template-rows: minmax(0, 1fr); align-content: stretch; }
  #card-img { height: 100%; min-height: 0; aspect-ratio: auto; border-bottom: 0; border-right: .5px solid var(--stroke); }
  .card-body { padding: clamp(20px, 4vh, 44px) clamp(20px, 2.4vw, 40px); overflow-y: auto; scrollbar-width: thin; }
  .card-close { position: absolute; top: 12px; right: 12px; }
  body.card-open { overflow: auto; }
  body.card-open #ascii { opacity: .35; }
}
@media (min-width: 761px) and (min-height: 460px) and (max-aspect-ratio: 5/4) {
  .card { grid-template-columns: 1fr; grid-template-rows: 40% 1fr; }
  #card-img { border-right: 0; border-bottom: .5px solid var(--stroke); }
}

/* short desktop screens: keep everything above the fold */
@media (min-width: 761px) and (min-height: 460px) and (max-height: 640px) {
  :root { --gap: clamp(10px, 2.1vh, 34px); }
  .note { display: none; }
  .lead { font-size: .95em; line-height: 1.5; }
  h1 { font-size: clamp(40px, 9vh, 112px); }
}

/* entrance stagger */
@keyframes rise { from { opacity: 0; transform: translateY(6px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
.in { animation: rise .6s cubic-bezier(0,0,.2,1) both; animation-delay: calc(var(--i) * 60ms); }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } }
.card:not([hidden]) { animation: pop .28s cubic-bezier(.2,.7,.2,1) both; }
@media (prefers-reduced-motion: reduce) { .in, .card:not([hidden]) { animation: none; } }

/* 404 */
.lost { position: relative; z-index: 1; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 0 var(--pad); }
.lost a { color: var(--link); } .lost a:hover { color: var(--hover); }