/* Starfish English · A4 Handout Frame * Provides: page setup, body grid (header / content / footer), masthead accent, * page-break helpers for duplex print. * * Consume by setting and using the .page-header / * .page-content / .page-footer regions. Multi-page handouts wrap each page * in .a4-sheet with .page-break-after between sheets. */ @page { size: A4; margin: 0; } html, body { margin: 0; padding: 0; background: var(--bg-page); color: var(--text-primary); font-family: 'MuseoSans', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, sans-serif; font-size: var(--text-base); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Each .a4-sheet is exactly one printed page. Use multiple for duplex/multi-page. */ .a4-sheet { width: 210mm; height: 297mm; padding: 18mm 18mm 16mm 18mm; box-sizing: border-box; position: relative; display: flex; flex-direction: column; page-break-after: always; break-after: page; background: var(--bg-page); overflow: hidden; } .a4-sheet:last-child { page-break-after: auto; break-after: auto; } /* Masthead accent line — top of every sheet */ .a4-sheet::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--brand-rust); } /* Header row: logo + lesson meta */ .page-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--gap-snug); border-bottom: 1px solid var(--rule-line); margin-bottom: var(--gap-base); flex-shrink: 0; } .page-header .logo { height: 14mm; width: auto; display: block; } .page-header .meta { text-align: right; } .page-header .meta .title { font-size: var(--text-md); font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; line-height: 1.2; } .page-header .meta .date { font-size: var(--text-xs); color: var(--text-secondary); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 2mm; } /* Main content area — flex-grows to fill page */ .page-content { flex: 1; display: flex; flex-direction: column; min-height: 0; } /* Page title block */ .page-title { margin-bottom: var(--gap-base); } .page-title .kicker { font-size: var(--text-xs); font-weight: 700; color: var(--brand-rust); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 2mm; } .page-title h1 { font-size: var(--text-2xl); font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; line-height: var(--leading-tight); margin: 0; } .page-title .subtitle { font-size: var(--text-md); color: var(--text-secondary); margin-top: 2mm; font-weight: 400; } /* Footer row: school + page number */ .page-footer { display: flex; align-items: center; justify-content: space-between; padding-top: var(--gap-snug); border-top: 1px solid var(--rule-line); margin-top: var(--gap-base); font-size: var(--text-xs); color: var(--text-secondary); letter-spacing: 0.06em; flex-shrink: 0; } .page-footer .school { font-weight: 700; color: var(--text-secondary); letter-spacing: 0.1em; text-transform: uppercase; } /* Common content components */ h2.section-head { font-size: var(--text-lg); font-weight: 700; color: var(--text-primary); margin: 0 0 var(--gap-tight) 0; letter-spacing: -0.005em; } h3.subsection-head { font-size: var(--text-md); font-weight: 700; color: var(--brand-rust); margin: var(--gap-snug) 0 var(--gap-tight) 0; letter-spacing: 0.02em; } /* Write-in line (single rule) */ .writein-line { border-bottom: 1pt solid var(--rule-line); height: 10mm; margin-bottom: 4mm; } .writein-line.short { height: 8mm; } .writein-line.tall { height: 14mm; } /* Name / partner field — inline label + rule */ .field-row { display: flex; align-items: baseline; gap: 4mm; margin-bottom: var(--gap-snug); } .field-row .label { font-size: var(--text-sm); font-weight: 700; color: var(--text-secondary); letter-spacing: 0.04em; white-space: nowrap; } .field-row .field { flex: 1; border-bottom: 1pt solid var(--rule-line); min-height: 7mm; } /* Checkbox row (for self-assessment etc.) */ .checkbox-row { display: flex; gap: var(--gap-base); flex-wrap: wrap; } .checkbox-row .checkbox { display: flex; align-items: center; gap: 3mm; font-size: var(--text-md); color: var(--text-primary); } .checkbox-row .checkbox .box { width: 5mm; height: 5mm; border: 1.2pt solid var(--text-primary); border-radius: 0.8mm; display: inline-block; } /* Numbered question block */ .question-block { margin-bottom: var(--gap-base); } .question-block .q-num-row { display: flex; align-items: baseline; gap: 3mm; margin-bottom: var(--gap-tight); } .question-block .q-num { font-size: var(--text-lg); font-weight: 700; color: var(--brand-rust); line-height: 1; letter-spacing: -0.02em; flex-shrink: 0; } .question-block .q-text { font-size: var(--text-md); color: var(--text-primary); line-height: var(--leading-snug); font-weight: 400; } /* Closing note (footer-of-content thanks line, brand-colored) */ .closing-note { text-align: center; font-size: var(--text-sm); color: var(--text-secondary); margin-top: var(--gap-base); line-height: var(--leading-snug); } .closing-note .accent { color: var(--brand-rust); font-weight: 700; } /* Soft-fill panel (used for back-of-card reference, callouts) */ .panel { background: var(--brand-cream); border-left: 3pt solid var(--brand-rust); padding: var(--gap-snug) var(--gap-base); border-radius: 0 1mm 1mm 0; } .panel h3 { font-size: var(--text-md); font-weight: 700; color: var(--text-primary); margin: 0 0 var(--gap-tight) 0; } .panel ul { margin: 0; padding-left: 5mm; list-style: disc; } .panel li { font-size: var(--text-sm); line-height: var(--leading-snug); margin-bottom: 2mm; color: var(--text-primary); } .panel li .ja { color: var(--text-secondary); font-size: var(--text-xs); margin-left: 2mm; }