/* Hallmark · shape: Feature Stack · genre: playful · theme: Paste-up (deal 3/3, seed prompt-a12e·0536ef34·2026-11-01·r0) · job: join · draw: a7d7e3
 * hero: Banner · nav: edge-aligned · footer: colophon block · imagery: the product · signature: the room panel as a pasted sheet beside a poster headline · pasteup: kraft
 * axes: mid/display-condensed/chromatic-yellow · posture: committed · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P3 H3 E3 S3 R3 V3 · weakest: imagery, the page shows the real panel built in type because no screenshots exist yet */
/* Hallmark · swap: Oswald and Literata replace League Gothic and Newsreader, which have no Cyrillic */
@import url("./tokens.css");
@import url("./base.css");
@import url("./fonts.css");

:root { --container: 1240px; }

h1, h2 { font-weight: 600; text-transform: uppercase; line-height: 1; }
h1 { line-height: 0.98; font-size: clamp(3.25rem, 8vw, 7.5rem); max-width: none; }
h3 { font: 500 var(--text-title)/1.2 var(--font-body); }
body { font-size: 1.0625rem; }

.btn { display: inline-block; border: 0; border-radius: 0; padding: var(--space-sm) var(--space-md); min-height: 44px; font: 500 15px/1.35 var(--font-body); color: var(--color-ink); text-decoration: none; cursor: pointer; box-shadow: 4px 4px 0 var(--color-ink); transition: translate var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out); }
.btn:hover { translate: 1px 1px; box-shadow: 3px 3px 0 var(--color-ink); }
.btn:active { translate: 4px 4px; box-shadow: none; }
.btn:disabled { background: var(--color-paper-2); color: var(--color-muted); cursor: progress; translate: 0 0; box-shadow: 4px 4px 0 var(--color-ink); }
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--secondary { background: var(--color-paper-3); }

.sheet { background: var(--color-paper-3); box-shadow: var(--shadow-sheet); rotate: var(--r, 0deg); }

.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-lg); }
.wordmark { font: 600 var(--text-2xl)/1 var(--font-display); text-transform: uppercase; text-decoration: none; color: var(--color-ink); margin: 0; }
.navlink { min-height: 44px; display: inline-flex; align-items: center; }
.navlink:hover { text-decoration-thickness: 2px; }

.hero { padding-block: var(--space-lg) var(--space-3xl); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: start; margin-top: var(--space-xl); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-lg); }

.demo { --r: 1.2deg; margin: 0; padding: var(--space-md) var(--space-lg) var(--space-lg); }
.demo-head { display: flex; justify-content: space-between; gap: var(--space-md); padding-bottom: var(--space-xs); border-bottom: 1px solid var(--color-rule-2); font-size: var(--text-sm); }
.demo-chat { list-style: none; margin: var(--space-sm) 0; padding: 0; display: grid; gap: var(--space-2xs); }
.demo-chat b { font-weight: 500; margin-right: var(--space-2xs); }
.demo-status { display: inline-block; background: var(--color-accent); color: var(--color-accent-ink); padding: var(--space-2xs) var(--space-xs); font-size: var(--text-sm); font-weight: 500; }

.create { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--gap-columns); padding-block: var(--space-3xl); scroll-margin-top: var(--space-md); }
.create-head p { margin-top: var(--space-md); max-width: 38ch; }
.form { display: grid; gap: var(--space-xs); padding: var(--space-lg); box-shadow: 6px 6px 0 var(--color-ink); max-width: 560px; }
.form label { font-weight: 500; font-size: var(--text-sm); }
.form input { width: 100%; min-height: 44px; padding: var(--space-xs) var(--space-sm); background: var(--color-paper-3); color: var(--color-ink); border: 1px solid var(--color-ink); border-radius: 0; caret-color: var(--color-ink); }
.form input + label { margin-top: var(--space-xs); }
.form input::placeholder { color: var(--color-muted); opacity: 0.8; }
.form .btn { justify-self: start; margin-top: var(--space-sm); }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.form-actions .btn { margin-top: var(--space-sm); }
.form-msg { min-height: 1.5em; font-size: var(--text-sm); overflow-wrap: anywhere; }
.form-msg.is-error { color: var(--color-error); font-weight: 500; }

.install { padding-block: var(--space-3xl); scroll-margin-top: var(--space-md); }
.steps { list-style: none; margin: var(--space-xl) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); }
.steps li { padding: var(--space-lg); display: grid; align-content: start; gap: var(--space-xs); }
.steps li:nth-child(1) { --r: -0.8deg; }
.steps li:nth-child(3) { --r: 0.7deg; }
.figure { font: 600 clamp(3.5rem, 5vw, 5rem)/1 var(--font-display); }
code { font-family: var(--font-body); font-weight: 500; overflow-wrap: anywhere; }
.install-note { margin-top: var(--space-lg); }

.synced { padding-block: var(--space-3xl); }
.synced-table { width: 100%; max-width: 860px; margin-top: var(--space-xl); border-collapse: collapse; }
.synced-table th { font: 500 var(--text-lg)/1.3 var(--font-body); text-align: left; padding: var(--space-md) var(--space-lg); white-space: nowrap; vertical-align: baseline; }
.synced-table td { padding: var(--space-md) var(--space-lg) var(--space-md) 0; vertical-align: baseline; }
.synced-table tr + tr > * { border-top: 1px solid var(--color-rule-2); }

.colophon { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-2xl) var(--space-xl); border-top: 1px solid var(--color-rule); }

.room-page { min-height: 100dvh; }
.room { padding-block: var(--space-xl) var(--space-3xl); display: grid; gap: var(--space-lg); justify-items: start; }
.room h1 { font-size: clamp(3rem, 6.5vw, 6rem); }
.room-need { padding: var(--space-md) var(--space-lg); max-width: 60ch; }
.room-install { width: 100%; }
.room-members { min-height: 1.5em; }

@media (max-width: 60rem) {
  .hero-grid, .create, .colophon { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .demo { --r: 0.6deg; }
  .hero, .create, .install, .synced { padding-block: var(--space-xl); }
}
@media (max-width: 40rem) {
  .synced-table th { display: block; padding: var(--space-md) var(--space-md) 0; white-space: normal; }
  .synced-table td { display: block; padding: var(--space-2xs) var(--space-md) var(--space-md); border-top: 0 !important; }
  .synced-table tr { display: block; }
  .synced-table tr + tr { border-top: 1px solid var(--color-rule-2); }
  .synced-table tr + tr > * { border-top: 0; }
}