/* Hallmark · shape: Split Studio · genre: playful · theme: Hum (deal 1/3, seed virtual-educational-escape-rooms-4d99·99df24ef·2026-11-05·r0) · job: join · draw: bf94f4
 * hero: Poster · nav: floating pill · footer: colophon block · imagery: the product · signature: the code box on a sheet lying on the real desk, its papers free to drag
 * axes: light/rounded-sans/chromatic-yellow · posture: full-palette · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V4 · weakest: P, a code box is expected; it lies on a desk you can already move things around on */
/* Hallmark · dismissed F4 · .btn is the card-stock secondary and only .btn--primary is filled pear, one per view */
/* Hallmark · waive 39b · input 64px and button 64px · the room code box is this page's one job and gets read from across a classroom */
/* Hallmark · waive 77 · rows and a statement beside a list · the sample rows are the content, and two short rows should not grow pictures to look fuller */
@import url("./tokens.css");
@import url("./base.css");
@import url("./paper.css");

.pill-nav { position: absolute; top: var(--space-md); left: 50%; translate: -50% 0; z-index: var(--z-sticky-nav); display: flex; align-items: center; gap: var(--space-md); width: max-content; max-width: calc(100% - 2 * var(--space-md)); padding: var(--space-xs) var(--space-lg); border-radius: var(--radius-pill); background: var(--grain), var(--fibre), var(--color-card); box-shadow: var(--shadow-card); }
.pill-nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; white-space: nowrap; }
.pill-nav a:hover { text-decoration: underline; }
.pill-nav__mark { gap: var(--space-xs); font-size: var(--text-lg); font-weight: 600; }
.pill-nav__mark img { width: 32px; height: 32px; }

.hero { position: relative; display: grid; align-items: center; min-height: 96dvh; padding: 104px var(--gutter) var(--space-xl); overflow: clip; background: var(--color-kraft); }
.hero__desk { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.loose { position: absolute; width: var(--w); left: var(--x); top: var(--y); rotate: var(--r, 0deg); filter: var(--shadow-paper); cursor: grab; touch-action: none; user-select: none; }
.loose.is-held { cursor: grabbing; }
.hero__inner { position: relative; width: 100%; max-width: var(--container); margin-inline: auto; pointer-events: none; }
.hero__sheet { position: relative; width: min(100%, 37rem); pointer-events: auto; filter: var(--shadow-paper); }
.hero__paper { display: grid; gap: var(--space-md); padding: var(--space-xl) var(--space-xl) var(--space-2xl); background: var(--grain), var(--fibre), var(--color-card); clip-path: var(--torn-bottom); border-radius: var(--radius-card) var(--radius-card) 0 0; }
.hero__paper h1 { font-size: clamp(2.5rem, 3.4vw + 0.9rem, 4rem); }

.code-form { display: grid; gap: var(--space-2xs); }
.code-form__row { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: flex-start; }
.code-form input { flex: 1 1 13rem; min-width: 0; min-height: 64px; padding: 0 var(--space-md); border: 2px solid var(--color-ink); border-radius: var(--radius-stock); background: var(--color-paper); color: var(--color-ink); font: 600 var(--text-2xl)/1 var(--font-outlier); text-transform: uppercase; }
.code-form input::placeholder { color: var(--color-muted); font-weight: 500; }
.code-form input:hover { background: var(--color-card); }
.code-form input:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.code-form input[aria-invalid="true"] { border-color: var(--color-error); }
.code-form .btn { min-height: 64px; font-size: var(--text-lg); padding-inline: var(--space-xl); }

main > section { padding-block: var(--section-gap-s); }
.band { background: var(--color-paper-2); }
.section-head { display: grid; gap: var(--space-sm); margin-bottom: var(--space-xl); }

.rooms { display: grid; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }
.room-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) auto; align-items: center; gap: var(--space-md) var(--space-xl); padding: var(--space-md) var(--space-lg); border-radius: var(--radius-card); background: var(--grain), var(--fibre), var(--color-card); box-shadow: var(--shadow-card); }
.room-row h3 { font-size: var(--text-xl); }
.room-row p { color: var(--color-ink-2); }
.room-row__facts { font-size: var(--text-sm); }
.room-row__code { display: block; font-family: var(--font-outlier); font-size: var(--text-lg); font-weight: 600; color: var(--color-ink); }

.modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); }
.mode { display: grid; gap: var(--space-md); margin: 0; }
.mode img { width: 100%; border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.mode h3 { font-size: var(--text-2xl); }

.teachers { background: var(--color-ink); color: var(--color-paper); clip-path: var(--torn-top); }
.teachers a { color: var(--color-accent); }
.teachers__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; gap: var(--space-xl) var(--space-3xl); }
.teachers .lead { margin-top: var(--space-md); }
.teachers ul { display: grid; gap: var(--space-md); margin: 0 0 var(--space-lg); padding: 0; list-style: none; font-size: var(--text-lead); }
.teachers .btn { color: var(--color-accent-ink); }

.colophon { padding-block: var(--space-2xl); background: var(--color-ink); color: var(--color-paper); }
.colophon p { max-width: 60ch; }
.colophon a { color: var(--color-accent); }

/* Help and not-found pages */
.page-top { padding: 112px var(--gutter) var(--space-xl); position: relative; }
.prose { display: grid; gap: var(--space-md); max-width: 44rem; margin-inline: auto; padding: 0 var(--gutter) var(--space-3xl); }
.prose h1 { font-size: var(--text-section); }
.prose h2 { margin-top: var(--space-lg); font-size: var(--text-2xl); }
.prose ol, .prose ul { display: grid; gap: var(--space-xs); margin: 0; padding-left: 1.4em; }
.prose a:not(.btn) { color: var(--color-accent-2); }
.prose .btn { justify-self: start; }

@media (max-width: 60rem) {
  .hero { min-height: 0; padding-top: var(--space-3xl); }
  .loose--far { display: none; }
  .modes, .teachers__grid { grid-template-columns: minmax(0, 1fr); }
  .room-row { grid-template-columns: minmax(0, 1fr); }
  .room-row .btn { justify-self: start; }
}
@media (max-width: 40rem) {
  .loose { display: none; }
  .hero__paper { padding: var(--space-lg) var(--space-md) var(--space-xl); }
  .pill-nav { gap: var(--space-sm); padding-inline: var(--space-md); font-size: var(--text-sm); }
  .pill-nav__mark { font-size: var(--text-md); }
  .pill-nav a[href="#rooms"] { display: none; }
}