/* The printable practice workbook (/downloads/oyee-cahier-*.html, scripts/workbook.py): the site's paper and
   two faces. Georgia is the voice (headings, tasks, what the learner writes); Helvetica/Arial the instrument
   (labels, counts). Vermilion only for focus. No mono, no uppercase, no blue. Self-contained: no site.css. */
:root{--paper:#f3efe5; --paper-hi:#faf7f0; --paper-lo:#e8e2d4; --ink:#24241f; --ink-2:#57544c; --ink-3:#7d796e; --rule:#cdc7b8; --vermilion:#b73521;
  --voice:Georgia, "Times New Roman", serif; --tool:"Helvetica Neue", Helvetica, Arial, sans-serif;
  --margin:clamp(1.25rem, 0.229rem + 4.19vw, 4rem);
  color:var(--ink); background:var(--paper); font:400 clamp(1.0625rem, 1.016rem + .19vw, 1.1875rem)/1.5 var(--voice)}
*{box-sizing:border-box}
body{margin:0; background:var(--paper); overflow-wrap:break-word}
::selection{background:#edc955; color:var(--ink)}
main{max-width:calc(44rem + 2 * var(--margin)); margin:0 auto; padding:40px var(--margin) 96px}
h1, h2{margin:0; font-weight:400; text-wrap:balance}
h1{margin-top:40px; font-size:clamp(2.25rem, 1.414rem + 3.429vw, 4.5rem); line-height:1.08; letter-spacing:-.012em}
h2{font-size:clamp(1.75rem, 1.379rem + 1.524vw, 2.75rem); line-height:1.15}
p, li{max-width:36em; text-wrap:pretty}
.workbook-head img{display:block; width:120px; height:auto}
.workbook-head h1 + p{margin:24px 0 0; font-size:clamp(1.1875rem, 1.071rem + .476vw, 1.5rem); line-height:1.4}
.workbook-head .how{margin:16px 0 0; font:400 15px/1.45 var(--tool); color:var(--ink-2); max-width:48em}
.workbook-head a{display:inline-flex; align-items:center; min-height:44px; margin-top:16px}
.eyebrow{margin:0 0 12px; font:400 15px/1.4 var(--tool); font-variant-numeric:tabular-nums lining-nums; color:var(--ink-2); letter-spacing:0; text-transform:none}
.workbook-page{margin:64px 0 0; padding-top:24px; border-top:1px solid var(--ink)}
.workbook-page > h2 + p{margin:16px 0 0}
.task{margin:24px 0; padding:16px 20px; border:1px solid var(--ink-3); background:var(--paper-lo); font-size:clamp(1.1875rem, 1.071rem + .476vw, 1.5rem); line-height:1.4; max-width:none}
label{display:block; margin:24px 0 8px; font:400 16px/1.3 var(--tool); color:var(--ink)}
textarea{display:block; width:100%; min-height:96px; padding:12px 14px; border:1px solid var(--ink-3); border-radius:0; background:var(--paper-hi); color:var(--ink); font:400 17px/1.5 var(--voice); resize:vertical}
textarea:focus{border-color:var(--ink)}
.page-foot{margin:16px 0 0; font:400 14px/1.4 var(--tool); color:var(--ink-2)}
ol{padding-left:1.4em}
ol li{margin:0 0 12px}
ol li::marker{font:400 15px var(--tool); color:var(--ink-2)}
a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--ink-3); text-decoration-thickness:1px; text-underline-offset:.2em; font-family:var(--tool); font-size:16px}
a:hover{text-decoration-color:var(--vermilion); text-decoration-thickness:2px}
textarea:focus-visible, a:focus-visible{outline:2px solid var(--vermilion); outline-offset:3px}
@page{size:A4; margin:18mm}
@media print{
  :root, body{background:#fff}
  main{max-width:none; padding:0}
  .workbook-head, .workbook-page{break-after:page}
  .workbook-page{margin:0; border:0; padding:0}
  .task{background:#fff}
  textarea{resize:none; overflow:visible; height:auto; min-height:40mm; field-sizing:content; background:#fff}
  textarea[rows="8"]{min-height:75mm}
  a{color:inherit}
  .workbook-head a{display:none}
  .workbook-page:last-child{break-after:auto}
}