:root { --ink:#26333b; --navy:#17425d; --sea:#2e7981; --sand:#f4eee3; --paper:#fffdf9; --coral:#aa5544; --line:#d8d0c3; font-family: Georgia, 'Times New Roman', serif; color:var(--ink); background:var(--sand); }
* { box-sizing:border-box; } body { margin:0; } .shell { width:min(100% - 2rem, 48rem); margin:0 auto; padding:2rem 0 4rem; } .brand { padding:1rem 0 1.5rem; } .eyebrow { color:var(--sea); font:700 .78rem/1.2 Arial,sans-serif; letter-spacing:.16em; text-transform:uppercase; } h1 { color:var(--navy); font-size:clamp(2rem, 5vw, 3.5rem); line-height:1.05; margin:.25rem 0 .75rem; } h2 { color:var(--navy); margin-top:0; } p { line-height:1.5; } .card { background:var(--paper); border:1px solid var(--line); border-radius:1rem; box-shadow:0 .4rem 1.5rem #4c40341a; padding:1.4rem; margin-top:1rem; } .field { display:grid; gap:.4rem; margin-bottom:1rem; } label, legend { font-weight:700; } input, select { width:100%; min-height:2.75rem; border:1px solid #aeb6b5; border-radius:.45rem; background:#fff; color:var(--ink); padding:.55rem .7rem; font:inherit; } fieldset { border:0; padding:0; margin:0; } .hint { color:#59656a; font-weight:400; font-size:.9rem; } .child-row { display:grid; grid-template-columns:minmax(0, 1fr) 7rem auto; gap:.65rem; align-items:end; border-top:1px solid var(--line); padding:1rem 0; } .assignment { display:grid; grid-template-columns:minmax(8rem, 1fr) minmax(18rem, 2fr); gap:1rem; align-items:end; border-top:1px solid var(--line); padding:1rem 0; } .child-row label, .assignment label { display:grid; gap:.35rem; } button { min-height:2.75rem; border-radius:.45rem; padding:.55rem .85rem; font:700 1rem/1.1 Arial,sans-serif; cursor:pointer; } .primary { background:var(--navy); border:1px solid var(--navy); color:white; margin-top:1.25rem; } .primary:hover, .primary:focus-visible { background:var(--sea); border-color:var(--sea); } .quiet { border:1px solid var(--sea); background:transparent; color:var(--navy); margin-top:.4rem; } .remove { min-height:2.3rem; border:0; background:transparent; color:var(--coral); text-decoration:underline; } .assignment strong { display:block; padding-bottom:.5rem; } .error { color:#8d2d22; font-weight:bold; } #download-list { padding-left:1.2rem; } #download-list li + li { margin-top:.65rem; } a { color:var(--navy); font-weight:bold; } @media (max-width: 38rem) { .shell { width:min(100% - 1.2rem, 48rem); padding-top:.8rem; } .card { padding:1rem; border-radius:.75rem; } .child-row, .assignment { grid-template-columns:1fr; gap:.55rem; } .remove { justify-self:start; } }