/* Grindograph — a record sheet, not an app. * * The subject is careful observation of a physical object: someone holds a coffee bag * and transcribes what is printed on it. So the page borrows from the things that * already do that job — the SCA cupping form, the specimen label, the accession card. * Ruled, dense, precise, with the form's own instructions set in italic. * * Sibling to Grindhog, not a twin. Same family palette (that blue is Grindhog's), * different temperament: Grindhog is the consumer app and can be playful; this is the * archive and should read as an instrument. * * Deliberately light-only. A record sheet is paper; inverting it would be a different * object and a worse one, so `color-scheme` commits rather than hedges. * * Fonts are linked from each page's rather than @import-ed here, so they load in * parallel with this file instead of waiting for it. */ :root { color-scheme: light; /* Paper and ink. Near-white stock, not a vintage cream — a form you fill in today, * not a document found in an attic. */ --paper: #FCFBF8; --sheet: #FFFFFF; --sunken: #F4F1EA; --ink: #241A12; --ink-2: #6E6157; --ink-3: #A79C90; --rule: #E4DDD2; --rule-2: #C9BFB1; /* Orange = things you do. Hotter and redder than Grindhog's #FF8C42, so the two read * as related rather than identical: this one is a stamp pad, that one is a mascot. */ --stamp: #DD4B14; --stamp-2: #FBEAE2; /* Blue = things the data says. Grindhog's sky blue, darkened for text on paper. */ --trace: #0A7FB8; --trace-2: #E4F2F9; --flag: #9A6212; --ok: #3F6B46; --bad: #A33418; --gutter: 2.5rem; --measure: 68ch; --sheet-w: 46rem; } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: Archivo, system-ui, sans-serif; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; } /* ── type roles ───────────────────────────────────────────────────────────── * Three faces, one job each. Archivo (a utilitarian grotesque with a width axis) * carries structure; IBM Plex Mono is the "typed onto a form" voice for labels and * data; Newsreader italic is the printed-instruction voice and nothing else. */ .eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 0.75rem; } h1 { font-size: clamp(2.5rem, 7vw, 4.25rem); font-variation-settings: 'wdth' 112; font-weight: 800; line-height: 0.94; letter-spacing: -0.035em; margin: 0 0 1rem; } h2 { font-size: clamp(1.375rem, 2.6vw, 1.75rem); font-variation-settings: 'wdth' 108; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin: 3.25rem 0 0.5rem; } h3 { font-size: 1rem; font-weight: 700; letter-spacing: -0.005em; margin: 0 0 0.5rem; } /* Printed instructions — the voice of the form itself. */ .instruction { font-family: Newsreader, Georgia, serif; font-style: italic; font-size: 1.0625rem; line-height: 1.6; color: var(--ink-2); max-width: var(--measure); margin: 0 0 1.25rem; } .instruction strong { font-style: normal; font-weight: 600; color: var(--ink); } /* Long-form body copy. Same serif, upright — so italic keeps meaning "the form is * telling you something" instead of just meaning "this is a paragraph". */ .prose { font-family: Newsreader, Georgia, serif; font-size: 1.0625rem; line-height: 1.65; color: var(--ink); max-width: var(--measure); margin: 0 0 1.1rem; } .prose strong { font-weight: 600; } .mono { font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; } .small { font-size: 0.8125rem; } .muted { color: var(--ink-2); } p { max-width: var(--measure); } a { color: var(--stamp); text-underline-offset: 2px; } a:hover { color: var(--ink); } :focus-visible { outline: 2px solid var(--stamp); outline-offset: 2px; border-radius: 2px; } /* ── masthead ───────────────────────────────────────────────────────────── */ .wrap { max-width: var(--sheet-w); margin: 0 auto; padding: 0 1.5rem; } .wrap.wide { max-width: 62rem; } header.site { background: var(--sheet); border-bottom: 1px solid var(--rule); } header.site .wrap { display: flex; align-items: baseline; gap: 1.5rem; flex-wrap: wrap; padding-top: 0.9rem; padding-bottom: 0.9rem; } .wordmark { font-variation-settings: 'wdth' 122; font-weight: 800; font-size: 1.0625rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink); text-decoration: none; } .wordmark::after { content: ''; display: inline-block; width: 0.4em; height: 0.4em; margin-left: 0.45em; border-radius: 50%; background: var(--stamp); vertical-align: 0.08em; } header.site nav { display: flex; gap: 1.25rem; margin-left: auto; flex-wrap: wrap; } header.site nav a { font-family: 'IBM Plex Mono', monospace; font-size: 0.75rem; letter-spacing: 0.04em; color: var(--ink-2); text-decoration: none; padding-bottom: 2px; border-bottom: 1px solid transparent; } header.site nav a:hover { color: var(--ink); border-bottom-color: var(--rule-2); } header.site nav a[aria-current] { color: var(--ink); border-bottom-color: var(--stamp); } main { padding-bottom: 5rem; } /* ── hero ───────────────────────────────────────────────────────────────── */ .hero { padding: 4.5rem 0 2rem; } .hero h1 { max-width: 15ch; } .hero .instruction { font-size: 1.1875rem; max-width: 52ch; } .hero-actions { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-top: 1.75rem; } /* ── the annotation gutter: the signature ─────────────────────────────────── * Every field carries a mark in the left margin recording HOW it was answered: * * ● recorded — a value was read off the bag * ∅ not printed — checked, and the bag genuinely does not say * · not checked — nobody looked * * That three-way distinction is the whole reason this dataset is worth collecting: it * is what lets the corpus catch an extractor inventing a value rather than merely * missing one. So it is the identity, not a checkbox tucked beside a label. */ .sheet { background: var(--sheet); border: 1px solid var(--rule); border-top: 3px solid var(--ink); } .sheet + .sheet { margin-top: 1.75rem; } .sheet-head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; padding: 0.9rem 1.25rem; border-bottom: 1px solid var(--rule); background: var(--sunken); } .sheet-head h3 { margin: 0; font-variation-settings: 'wdth' 108; } .sheet-head .eyebrow { margin: 0 0 0 auto; } .sheet-body { padding: 0.25rem 1.25rem 1.25rem; } .field { display: grid; grid-template-columns: var(--gutter) 1fr 2.25rem; align-items: start; gap: 0 0.5rem; padding: 0.7rem 0; border-bottom: 1px solid var(--rule); } .field:last-child { border-bottom: none; } /* Grid and flex children default to min-width:auto, so a 100%-wide input refuses to * shrink below its intrinsic size and pushes the whole page wider than the viewport. * One overflowing element makes every other element look broken too, which is why this * reads as a total layout failure on a phone rather than a single wide field. */ .field > *, .extra-row > *, .objection > * { min-width: 0; } .mark { width: 1.75rem; height: 1.75rem; margin-top: 1.05rem; padding: 0; display: grid; place-items: center; border: 1.5px solid var(--rule-2); border-radius: 50%; background: var(--sheet); color: var(--ink-2); font-family: 'IBM Plex Mono', monospace; font-size: 1.05rem; line-height: 1; font-weight: 500; cursor: pointer; transition: background 120ms, border-color 120ms, color 120ms; } .mark:hover { border-color: var(--stamp); color: var(--stamp); } .field[data-state="recorded"] .mark { background: var(--stamp); border-color: var(--stamp); color: #fff; } .field[data-state="absent"] .mark { border-color: var(--ink); border-style: dashed; color: var(--ink); } .field[data-state="absent"] .f-label { color: var(--ink-3); } .field[data-state="absent"] input, .field[data-state="absent"] select { opacity: 0.4; } .f-label { font-family: 'IBM Plex Mono', monospace; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-2); display: block; margin-bottom: 0.3rem; } .f-label .req { color: var(--stamp); } /* Additional values on one field — a bag listing two varieties. Indented under the * first so the row still reads as one field with several readings, not as several * fields. */ .values:not(:empty) { margin-top: 0.4rem; display: grid; gap: 0.4rem; } .value-line { display: grid; grid-template-columns: 1fr auto; gap: 0.4rem; align-items: center; } .value-line > * { min-width: 0; } .add-value { margin-top: 0.4rem; font-family: 'IBM Plex Mono', monospace; font-size: 0.6875rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-2); border-style: dashed; } .add-value:hover { color: var(--stamp); border-color: var(--stamp); } .add-value:disabled { opacity: 0.4; } .f-note { font-family: Newsreader, Georgia, serif; font-style: italic; font-size: 0.9375rem; color: var(--ink-2); margin: 0.35rem 0 0; } /* Emphasis inside italic text goes upright — the long-standing convention, and the only * way "Something else…" reads as a quoted control rather than more running prose. */ .f-note em, .instruction em { font-style: normal; font-weight: 500; color: var(--ink); } .flag { margin-top: 1.05rem; padding: 0; width: 1.75rem; height: 1.75rem; display: grid; place-items: center; border: 1px solid transparent; border-radius: 3px; background: none; color: var(--ink-2); font-size: 1rem; cursor: pointer; transition: color 120ms, background 120ms, border-color 120ms; } .flag:hover { color: var(--flag); border-color: var(--rule-2); } .flag[aria-expanded="true"], .flag.set { color: #fff; background: var(--flag); border-color: var(--flag); } /* ── controls ───────────────────────────────────────────────────────────── */ input[type=text], input[type=date], select, textarea, input[type=file] { width: 100%; padding: 0.5rem 0.6rem; border: 1px solid var(--rule-2); border-radius: 3px; background: var(--paper); color: var(--ink); font: inherit; font-size: 0.9375rem; } input[type=text]:focus, input[type=date]:focus, select:focus, textarea:focus { background: var(--sheet); border-color: var(--stamp); outline: none; box-shadow: 0 0 0 3px var(--stamp-2); } input:disabled, select:disabled { cursor: not-allowed; } button { font: inherit; font-size: 0.9375rem; font-weight: 600; padding: 0.55rem 1rem; border: 1px solid var(--rule-2); border-radius: 3px; background: var(--sheet); color: var(--ink); cursor: pointer; transition: border-color 120ms, background 120ms; } button:hover { border-color: var(--ink); } button.primary { background: var(--stamp); border-color: var(--stamp); color: #fff; font-variation-settings: 'wdth' 106; padding: 0.7rem 1.4rem; } button.primary:hover { background: #C23F0E; border-color: #C23F0E; } button.primary:disabled { opacity: 0.45; cursor: not-allowed; } button.tiny { font-size: 0.75rem; font-weight: 500; padding: 0.25rem 0.55rem; } button.link { border: none; background: none; color: var(--stamp); padding: 0.25rem; text-decoration: underline; } .toggle { display: inline-flex; align-items: center; gap: 0.4rem; font-family: 'IBM Plex Mono', monospace; font-size: 0.6875rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); cursor: pointer; white-space: nowrap; } /* ── objection panel ────────────────────────────────────────────────────── */ .objection { grid-column: 2 / -1; margin-top: 0.7rem; padding: 0.85rem; background: var(--sunken); border-left: 3px solid var(--flag); display: grid; gap: 0.6rem; grid-template-columns: 1fr 1fr; } .objection .full { grid-column: 1 / -1; } .objection[hidden] { display: none; } /* ── photos ─────────────────────────────────────────────────────────────── */ .photos { display: flex; gap: 0.85rem; flex-wrap: wrap; margin-top: 0.9rem; } .photo-slot { width: 8rem; } .thumb { width: 8rem; height: 8rem; object-fit: cover; display: block; border: 1px solid var(--rule-2); background: var(--sunken); } .photo-slot.is-primary .thumb { border: 2px solid var(--stamp); } .photo-cap { font-family: 'IBM Plex Mono', monospace; font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin: 0.35rem 0 0.3rem; } .photo-slot.is-primary .photo-cap { color: var(--stamp); } .extra-row { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 0.5rem; margin-bottom: 0.5rem; } /* ── data ───────────────────────────────────────────────────────────────── */ table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } th { font-family: 'IBM Plex Mono', monospace; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); text-align: left; padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--ink); } td { padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--rule); } td.num, th.num { text-align: right; font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; } tbody tr:hover { background: var(--sunken); } .scroll { overflow-x: auto; } code { font-family: 'IBM Plex Mono', monospace; font-size: 0.8125em; background: var(--sunken); padding: 0.1em 0.35em; border-radius: 2px; } pre { font-family: 'IBM Plex Mono', monospace; font-size: 0.75rem; line-height: 1.55; background: var(--ink); color: #EDE6DC; padding: 1.1rem; overflow-x: auto; border-radius: 3px; } .tag { font-family: 'IBM Plex Mono', monospace; font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.15rem 0.45rem; border: 1px solid var(--rule-2); color: var(--ink-2); } .tag.proposed { color: var(--trace); border-color: var(--trace); background: var(--trace-2); } .count { font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; color: var(--trace); font-weight: 500; } /* ── legend: teaches the three marks, reused across pages ───────────────── */ .legend { display: flex; gap: 1.5rem; flex-wrap: wrap; margin: 1.25rem 0 0; padding: 0; list-style: none; } .legend li { display: flex; align-items: center; gap: 0.5rem; font-family: 'IBM Plex Mono', monospace; font-size: 0.6875rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-2); } .legend .m { width: 1.35rem; height: 1.35rem; border-radius: 50%; display: grid; place-items: center; font-size: 0.85rem; font-family: 'IBM Plex Mono', monospace; border: 1.5px solid var(--rule-2); color: var(--ink-2); } .legend .m.recorded { background: var(--stamp); border-color: var(--stamp); color: #fff; } .legend .m.absent { border-color: var(--ink); border-style: dashed; color: var(--ink); } /* ── notices ────────────────────────────────────────────────────────────── */ .note { padding: 0.8rem 1rem; margin: 1rem 0; border-left: 3px solid var(--rule-2); background: var(--sunken); font-size: 0.9375rem; } .note.ok { border-left-color: var(--ok); } .note.bad { border-left-color: var(--bad); } .note.warn { border-left-color: var(--flag); } .note[hidden] { display: none; } .actions { display: flex; gap: 0.85rem; align-items: center; flex-wrap: wrap; margin-top: 1.5rem; } fieldset { border: none; padding: 0; margin: 0; } fieldset:disabled { opacity: 0.5; } footer.site { border-top: 1px solid var(--rule); margin-top: 4rem; padding: 1.75rem 0; font-family: 'IBM Plex Mono', monospace; font-size: 0.6875rem; letter-spacing: 0.05em; color: var(--ink-3); } img, pre, table { max-width: 100%; } @media (max-width: 40rem) { :root { --gutter: 2.1rem; --measure: 100%; } .objection { grid-template-columns: 1fr; } .extra-row { grid-template-columns: 1fr; } .hero { padding: 2.5rem 0 1.5rem; } .sheet-body { padding: 0.25rem 0.9rem 1rem; } .sheet-head { padding: 0.8rem 0.9rem; } /* The nav sits under the wordmark rather than being shoved off the right edge. */ header.site nav { margin-left: 0; width: 100%; gap: 1rem; } .legend { gap: 0.75rem 1.1rem; } .photo-slot, .thumb { width: 6.5rem; } .thumb { height: 6.5rem; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }