:root {
  --page: #eaf0f5;
  --surface: #f7f9fc;
  --wash: #ffffff;
  --stage-blue: #587cb2;
  --frame-rim: #ffffff;
  --frame-width: min(1460px, calc(100vw - 160px));
  --frame-height: 760px;
  --frame-edge: 4px;
  --radius: 28px;
  --title: 48px;
  --deck-offset: 15%;
  --deck-depth: 46px;
  --card-gutter: 32px;
  --card-header-height: 84px;
  --composer-width: 920px;
  --composer-height: 62px;
  --chat-reserved-height: 200px;
  --chat-expansion-height: 288px;
  --surface-depth: 0 20px 54px rgb(22 35 52 / 10%);
}
body { background: linear-gradient(var(--stage-blue) 0 66%, var(--page) 66%); background-attachment: fixed; }
.masthead { height: 76px; color: var(--frame-rim); }
.masthead h1,.brand span { color: var(--frame-rim); }
.brand span { border-color: color-mix(in srgb, var(--frame-rim) 35%, transparent); }
.deck { margin-top: 0; }
.deck.has-open-conversation { height: calc(var(--frame-height) + var(--chat-expansion-height)); }
.project-card { height: var(--frame-height); display: grid; grid-template-rows: var(--card-header-height) minmax(0,1fr) auto; }
.project-card.is-active.is-chat-open { height: calc(var(--frame-height) + var(--chat-expansion-height)); }
.project-chat { box-sizing: border-box; min-height: var(--chat-reserved-height); }
.project-card.is-chat-open .project-chat { min-height: calc(var(--chat-reserved-height) + var(--chat-expansion-height)); }
.conversation-toolbar { height: 28px; display: flex; justify-content: flex-end; align-items: center; margin-bottom: var(--s2); }
.conversation-toggle { background: transparent; color: var(--muted); font-size: 12px; padding: var(--s1) var(--s2); border-radius: var(--s1); }
.conversation-toggle:hover { color: var(--ink); background: var(--page); }
.project-chat.has-messages .conversation[hidden] { display: none; }
.project-card.is-chat-open .project-chat.has-messages .conversation { height: 276px; margin-bottom: 12px; }
.side-project-switch {
  position: absolute;
  top: var(--deck-depth);
  bottom: 0;
  width: max(0px, calc((100% - var(--frame-width)) / 2 - var(--s2)));
  z-index: 2;
  background: transparent;
  border-radius: var(--radius);
}
.side-project-switch.previous { left: var(--s4); width: max(0px, calc((100% - var(--frame-width)) / 2 - var(--s5))); }
.side-project-switch.next { right: var(--s4); width: max(0px, calc((100% - var(--frame-width)) / 2 - var(--s5))); }
.side-project-switch:hover { background: rgb(255 255 255 / 12%); }
.side-project-switch:disabled { visibility: hidden; }
.project-card {
  border: var(--frame-edge) solid var(--frame-rim);
  background: var(--surface);
  box-shadow: var(--surface-depth);
}
.project-card.is-before,.project-card.is-after { opacity: 1; filter: brightness(.96); }
.project-card.is-before { transform: translateX(calc(-50% - var(--deck-offset))) translateY(var(--deck-depth)) scale(.96); }
.project-card.is-after { transform: translateX(calc(-50% + var(--deck-offset))) translateY(var(--deck-depth)) scale(.96); }
.card-header {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  gap: var(--s4);
  min-height: var(--card-header-height);
  padding: var(--s5) var(--card-gutter) var(--s3);
  border-bottom: 0;
}
.card-wordmark { font: 600 28px/1.2 Geist,Arial,sans-serif; margin: 0; text-align: center; }
.project-category { font-size: 11px; max-width: 30ch; line-height: 1.4; }
.card-header .case-link { justify-self: end; font-size: 12px; }
.project-content {
  grid-template-columns: minmax(0,.68fr) minmax(0,1.32fr);
  grid-template-rows: minmax(0,1fr);
  align-items: start;
  gap: var(--s6);
  padding: var(--s5) var(--card-gutter) var(--s4);
}
.hand-note { font-size: 25px; margin-bottom: var(--s3); }
.project-headline {
  margin: 0 0 var(--s4);
  font: 400 var(--title)/1.08 Georgia,'Times New Roman',serif;
  max-width: 19ch;
  text-wrap: pretty;
}
.project-summary { font-size: 15px; line-height: 1.6; margin-bottom: var(--s5); max-width: 50ch; }
.project-facts { display: block; padding: 0; border-top: 1px solid var(--line); }
.project-facts div { display: grid; grid-template-columns: 100px minmax(0,1fr); align-items: baseline; gap: var(--s3); padding: 13px 0; border-bottom: 1px solid var(--line); }
.project-facts dt { font-size: 12px; margin: 0; }
.project-facts dd { font-size: 14px; font-weight: 600; line-height: 1.5; }
.project-note { font-size: 11px; max-width: 56ch; margin-top: var(--s3); }
.project-visual { align-self: stretch; min-height: 0; height: 100%; }
.project-visual img { height: 100%; max-height: none; object-fit: contain; }
.project-chat {
  width: min(var(--composer-width),100%);
  align-self: center;
  padding: var(--s4) var(--s6) var(--s6);
  margin-top: auto;
  border: 0;
  background: transparent;
}
.conversation[hidden] { display: none; }
.project-chat.has-messages .conversation { height: 168px; padding: var(--s3); border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--wash) 86%, transparent); }
.question-suggestions { justify-content: center; gap: var(--s2); margin-bottom: var(--s3); }
.question-suggestions[hidden] { display: none; }
.suggestion { background: transparent; font-size: 12px; min-height: 32px; }
.composer { min-height: var(--composer-height); padding: var(--s2); gap: var(--s3); background: var(--wash); border: 1px solid #bdc4ce; border-radius: 40px; box-shadow: none; }
.composer input { font-size: 15px; }
.prompt-toggle { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; background: var(--page); }
.prompt-toggle svg { width: 20px; height: 20px; }
.prompt-toggle:hover { background: var(--accent-soft); color: var(--accent); }
.send-button { width: 44px; height: 44px; }
.project-navigation { height: 72px; margin-top: calc(var(--deck-depth) + var(--s5)); position: relative; z-index: 4; }
.project-navigation .icon-button { border-color: transparent; }
.project-navigation .project-picker { padding: 4px 12px; border-radius: 20px; background: var(--page); }
@media(min-width:1600px) {
  :root { --frame-width: min(1720px,calc(100vw - 200px)); --title: 54px; --card-gutter: 44px; --card-header-height: 96px; }
  .card-wordmark { font-size: 32px; }
  .project-content { padding-inline: var(--card-gutter); }
}
@media(max-width:1100px) {
  :root { --frame-width: calc(100vw - 80px); --title: 36px; --card-gutter: 24px; --deck-offset: 10%; --deck-depth: 30px; }
  .project-content { gap: var(--s5); }
  .project-facts div { grid-template-columns: 74px minmax(0,1fr); }
}
@media(max-width:700px) {
  :root { --frame-width: calc(100vw - 24px); --frame-height: auto; --title: 32px; --radius: 22px; --frame-edge: 3px; --card-gutter: 20px; --card-header-height: 68px; --composer-height: 58px; }
  .masthead { height: 64px; }
  .side-project-switch { display: none; }
  .deck.has-open-conversation { height: auto; }
  .project-card.is-active.is-chat-open { height: auto; }
  .project-card.is-chat-open .project-chat { min-height: 0; }
  .project-card { min-height: calc(100svh - 140px); }
  .card-header { grid-template-columns: minmax(0,1fr) auto; padding: var(--s4) var(--card-gutter); }
  .card-wordmark { font-size: 24px; text-align: left; }
  .project-category { display: none; }
  .project-content { padding: var(--s4) var(--card-gutter); gap: var(--s5); }
  .hand-note { font-size: 23px; }
  .project-summary { font-size: 14px; margin-bottom: var(--s4); }
  .project-facts div { padding: 10px 0; grid-template-columns: 72px minmax(0,1fr); }
  .project-facts dd { font-size: 13px; }
  .project-visual { min-height: 0; height: auto; aspect-ratio: 3 / 2; }
  .project-visual img { height: 100%; }
  .project-chat { padding: var(--s3) var(--s4) var(--s5); }
  .project-chat.has-messages .conversation { height: 200px; }
  .question-suggestions { justify-content: flex-start; }
  .suggestion { min-height: 40px; }
  .project-navigation { margin-top: var(--s5); }
  .composer { gap: var(--s2); padding: 6px; }
  .composer input { font-size: 16px; }
  .prompt-toggle { width: 38px; height: 38px; flex-basis: 38px; }
}
@media(forced-colors:active) { .project-card { border-color: CanvasText; box-shadow: none; } }