/* ========================================================= Shared theme (common/theme.css). Structure only: every color and font comes from a CSS custom property that common/lib.rkt injects into each page's from the course's course-config.rkt (--bg, --accent, --font-serif, ...). The home-page art is injected the same way. ========================================================= */ /* ========================================================= Body & Base Font ========================================================= */ body { background-color: var(--bg); color: var(--text); line-height: 1.65; } body, .main, .refelem, .refcolumn, .refcontent, .content, .version { font-family: var(--font-serif); } /* ========================================================= Headings ========================================================= */ h1, h2, h3, h4, h5, h6, h7, h8 { color: var(--heading); font-weight: 600; line-height: 1.3; } /* Scribble uses h3/h4/h5 for sections depending on nesting depth. The defaults (1.0em, 0.83em) are unreadably small — bump them up. */ h1 { font-size: 1.75em; } h2 { font-size: 1.45em; } h3 { font-size: 1.25em; } h4 { font-size: 1.10em; } h5 { font-size: 1.00em; font-style: italic; } /* ========================================================= Navigation bars (hidden — sidebar handles navigation) ========================================================= */ .navsettop, .navsetbottom, .navleft, .navright { display: none; } /* ========================================================= Sidebar / Table of Contents ========================================================= */ .tocset { display: none; } /* Override Scribble's fixed 43em width with a responsive centered column. max-width caps comfortable line length on wide screens; 92% gives breathing room on narrow ones without needing explicit breakpoints for the column. */ .maincolumn { width: 92%; max-width: 60em; margin-left: auto; margin-right: auto; box-sizing: border-box; } /* Prevent wide tables and code from breaking the layout on mobile */ .main table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Margin notes float to the right of the 60em column; when the window is not wide enough for that, pull them back into the flow as inline callouts */ @media (max-width: 1100px) { /* mid-range: a pull-quote floated inside the column */ .refpara, .refelem, .reffootnote { float: right; position: static; width: 40%; height: auto; margin: 0.2em 0 0.6em 1.2em; left: 0; } .refcolumn { width: auto; } } @media (max-width: 640px) { /* narrow: margin notes become full-width callouts in the flow */ .refpara, .refelem, .reffootnote { float: none; width: auto; margin: 0.75em 0; } /* Slightly tighter headings on small screens */ h3 { font-size: 1.15em; } h4 { font-size: 1.05em; } } /* Remove the original light background from sidebar boxes */ .tocview, .tocsub, .tocview td, .tocset td { background-color: var(--bg); } .tocviewtitle * { color: var(--text); font-weight: 600; } /* Sidebar links */ .tocviewlink { color: var(--link); text-decoration: none; } .tocviewlink:hover { color: var(--link-hover); text-decoration: underline; } .tocviewselflink { color: var(--accent); text-decoration: underline; } .tocviewtoggle { color: var(--text-muted); } .tocsublink, .tocsubseclink, .tocsubnonseclink { color: var(--link); text-decoration: none; } .tocsublink:hover, .tocsubseclink:hover { color: var(--link-hover); } .tocsubtitle { color: var(--text-muted); } /* Inline TOC (inside the page body) */ .toclink { color: var(--link); text-decoration: none; } .toclink:hover { color: var(--link-hover); } .toptoclink { color: var(--link); font-weight: bold; } /* ========================================================= Links ========================================================= */ .plainlink { color: var(--link); text-decoration: none; } a:link, a:visited { color: var(--link); text-decoration: none; } a:hover, a:active { color: var(--link-hover); text-decoration: underline; } /* ========================================================= Inline code (tt / stt / .RktSym etc.) ========================================================= */ .stt { font-family: var(--font-mono); color: var(--code-inline); background-color: var(--bg-code); padding: 0.05em 0.3em; border-radius: 3px; font-size: 88%; } .RktIn, .RktRdr, .RktPn, .RktMeta, .RktMod, .RktKw, .RktVar, .RktSym, .RktRes, .RktOut, .RktCmt, .RktVal, .RktBlk { font-family: var(--font-mono); color: var(--code-sym); } /* ========================================================= Code blocks (codeblock) ========================================================= */ .SCodeFlow { background-color: var(--bg-code); border-left: 3px solid var(--accent); border-radius: 0 4px 4px 0; padding: 0.7em 1.1em; margin: 0.8em 0; overflow-x: auto; font-family: var(--font-mono); } /* verbatim / pydisp blocks */ .SubFlow { background-color: var(--bg-code); border-left: 3px solid var(--border); border-radius: 0 4px 4px 0; padding: 0.5em 1em; margin: 0.6em 0; } .SVerbatim { font-family: var(--font-mono); background-color: var(--bg-code); } /* ========================================================= Boxed elements ========================================================= */ .boxed { background-color: var(--bg-alt); border-radius: 4px; } /* ========================================================= Margin notes ========================================================= */ .refelem, .refcolumn, .refcontent { font-family: var(--font-serif); } .refcolumn { background-color: var(--bg-alt); color: var(--text); border: 1px solid var(--border); border-radius: 4px; font-size: 85%; padding: 0.3em 0.5em; } .refcontent p { margin-top: 0.3em; margin-bottom: 0.3em; } /* ========================================================= Inline section headings (sections that stay on the parent page) ========================================================= */ .InlineSection { font-size: 1.3em; font-weight: 600; line-height: 1.3; color: var(--heading); margin: 2em 0 0.6em; padding-bottom: 0.25em; border-bottom: 1px solid var(--border); } /* ========================================================= "Do Now!" (Incercise) and Exercise callout boxes ========================================================= */ .Incercise { background-color: var(--callout-do); border-left: 4px solid var(--callout-do-b); border-radius: 0 4px 4px 0; padding: 0.6em 1em; margin: 0.8em 0; } .Exercise { background-color: var(--callout-ex); border-left: 4px solid var(--callout-ex-b); border-radius: 0 4px 4px 0; padding: 0.6em 1em; margin: 0.8em 0; } /* ========================================================= Question/Answer (used in placement AFQ) ========================================================= */ p.Question { font-weight: 600; color: var(--heading); background-color: var(--bg-alt); border-left: 3px solid var(--link); border-radius: 0 4px 4px 0; padding: 0.45em 0.9em; margin-top: 2em; margin-bottom: 0.3em; } p.Question::before { content: "Q\00a0\00a0"; /* "Q" + two non-breaking spaces */ color: var(--link); font-weight: 700; } /* ========================================================= Sub-sub-sub section labels (Read/view, Write, etc.) ========================================================= */ .SSubSubSubSection { font-weight: bold; color: var(--accent); font-size: 0.88em; display: block; margin-top: 1em; letter-spacing: 0.02em; } /* ========================================================= Lists ========================================================= */ ul, ol { padding-left: 1.5em; } ul li, ol li { margin-bottom: 0.35em; } /* ========================================================= Tables (data / task tables) ========================================================= */ /* Give inline content tables (e.g., docdiff vector table) a bit of room */ .main table td { padding: 2px 6px; /* Scribble emits `border-bottom: 1px solid black` as an inline style for tabular bottom-border rows; !important is required to override it. */ border-bottom-color: var(--text-muted) !important; } /* ========================================================= Quoted / inset blocks ========================================================= */ blockquote { border-left: 3px solid var(--border); padding-left: 1em; color: var(--text-muted); margin-left: 1em; } /* Scribble emits align="right" on colspan'd header cells; override to center. */ blockquote.SCentered table td[colspan] { text-align: center; } /* SCentered is a blockquote only by Scribble convention — undo the quote styling and actually center the content with flexbox. */ blockquote.SCentered { border-left: none; padding-left: 0; color: inherit; margin-left: 0; display: flex; justify-content: center; } /* ========================================================= Home page (index.html) only. The @title in site.scrbl carries a part-title-and-content-wrapper property that wraps the page's
in
; sub-pages don't get it, so everything below is scoped to that wrapper (or to a body that contains it). See HOME-PAGE-STYLE-PLAN.md. ========================================================= */ /* --- Masthead --- */ .HomePage h1 { font-size: 2.1em; line-height: 1.15; margin: 1.2em 0 0.3em; letter-spacing: -0.01em; } /* "Fall 2026:" sits on its own line before the
, so ::first-line turns it into an eyebrow without touching the content. */ .HomePage h1::first-line { font-size: 0.5em; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); } .HomePage .heading-anchor { display: none; } /* --- Destination groups (see `destinations` in lib.rkt) --- */ .Dests { margin: 1.8em 0 0; } .Dests p { margin: 0; } .Dests .DestsLabel { font-size: 0.8em; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin: 0 0 0.6em; } .Dests ul { list-style: none; padding: 0; margin: 0; } /* Every card fills its grid cell / flex slot, and all rows of a grid share the height of the tallest card, so cards line up even when some wrap. */ .Dests li { margin: 0; display: flex; } .Dests .Dest { flex: 1; display: flex; flex-direction: column; justify-content: center; } .Dests li a { font-weight: 600; } .DestNote { font-size: 0.85em; color: var(--text-muted); } .DestBlurb { display: block; margin-top: 0.35em; font-size: 0.82em; font-weight: 400; line-height: 1.4; color: var(--text-muted); } .Dests-primary .Dest:has(.DestBlurb), .Dests-secondary .Dest:has(.DestBlurb) { text-align: left; } /* Section and single-link cards: the whole card is the click target, via an invisible overlay on the link (focus ring stays on the link). */ .DestSection, .DestLink { position: relative; } .DestSection > p:first-child > a::after, .DestLink > p > a::after { content: ""; position: absolute; inset: 0; } /* Cards are centered; compact pills stay left-aligned. */ .Dests-primary .Dest, .Dests-secondary .Dest { text-align: center; } /* primary: large cards */ .Dests-primary ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(13em, 1fr)); grid-auto-rows: 1fr; gap: 0.8em; } .Dests-primary .Dest { padding: 1em 1.1em; border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 6px; background-color: var(--bg-alt); font-size: 1.1em; line-height: 1.3; } /* secondary: smaller cards */ .Dests-secondary ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(11em, 1fr)); grid-auto-rows: 1fr; gap: 0.6em; } .Dests-secondary .Dest { padding: 0.6em 0.9em; border: 1px solid var(--border); border-radius: 6px; background-color: var(--bg-alt); font-size: 0.95em; line-height: 1.3; } /* compact: one quiet line of inline links, separated by middle dots. No boxes: this is the least important group, so it gets the least chrome. */ .Dests-compact { font-size: 0.95em; line-height: 1.7; } /* The label keeps its own line so it lines up with the other group labels. */ .Dests-compact .DestsLabel { margin-bottom: 0.2em; } .Dests-compact ul, .Dests-compact li, .Dests-compact .Dest, .Dests-compact .Dest p { display: inline; } .Dests-compact li + li::before { content: "\2022" / ""; /* bullet, hidden from screen readers */ margin: 0 0.55em; color: var(--text); } .Dests-compact .Dest { position: static; } .Dests-compact .Dest a { font-weight: 400; } .Dests-compact .Dest a::after { content: none; } .Dests-primary .Dest:hover, .Dests-primary .Dest:focus-within, .Dests-secondary .Dest:hover, .Dests-secondary .Dest:focus-within { border-color: var(--link); background-color: var(--bg-code); } /* vertical-list: prose, not boxes. Each destination is a linked heading with its text under it at body size, and air between destinations. For a page that is mainly an introduction to its sub-pages. */ .Dests-vertical-list ul { display: flex; flex-direction: column; gap: 1.6em; } .Dests-vertical-list li { display: block; } .Dests-vertical-list .Dest { display: block; } .Dests-vertical-list .DestSection > p:first-child { font-family: var(--font-serif); font-size: 1.25em; font-weight: 600; margin: 0 0 0.35em; } .Dests-vertical-list .DestSection > p:first-child > a::after { content: none; } .Dests-vertical-list .DestBlurb { display: inline; margin: 0 0 0 0.6em; font-size: 0.85em; } .Dests-vertical-list .DestBody { line-height: 1.5; } .Dests-vertical-list .DestBody p { margin: 0 0 0.7em; } .Dests-vertical-list .DestBody p:last-child { margin-bottom: 0; } .Dests-vertical-list .DestBody ul { margin: 0.4em 0 0.7em; padding-left: 1.4em; list-style: disc; } .Dests-vertical-list .DestBody li { display: list-item; margin: 0 0 0.3em; } /* --- External links (external-link tag) --- */ .External::after { content: " \2197" / ""; /* ↗, with no alt text: the hidden note says it */ font-size: 0.8em; vertical-align: 0.1em; } .VisuallyHidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* --- Assignment schedule: fish-eye view (schedule.js) --- */ .ScheduleBar { margin: 0.8em 0 0.5em; text-align: right; } .ScheduleToggle, .ScheduleFold button { font: inherit; font-size: 0.85em; padding: 0.2em 0.7em; border: 1px solid var(--border); border-radius: 4px; background-color: var(--bg-alt); color: var(--text); cursor: pointer; white-space: nowrap; } .ScheduleToggle:hover, .ScheduleFold button:hover { border-color: var(--link); } .ScheduleFold td { padding: 0.4em 0.5em; } .ScheduleFold button { width: 100%; text-align: left; color: var(--text-muted); } /* in focus: the current window is prominent, the future recedes */ .ScheduleFocus tr.ScheduleNow td { background-color: var(--bg-alt); } .ScheduleFocus tr.ScheduleNow td:first-child { box-shadow: inset 4px 0 0 var(--accent); } .ScheduleFocus tr.ScheduleFuture td { font-size: 0.85em; color: var(--text-muted); } .ScheduleFocus tr.ScheduleFuture td a { font-weight: 400; } .ScheduleUnpublished { color: var(--text-muted); font-style: italic; } .ScheduleDate { white-space: nowrap; } /* The schedule has up to seven columns in Scribble's fixed-width column: tighter cells than other tables, and a wrapper that scrolls by itself rather than the page if a build ever makes it too wide. */ .ScheduleWrap { overflow-x: auto; } .main .Schedule.ScheduleTable td { padding: 0.4em 0.45em; } /* outranks the Striped padding below */ /* streams layout (one column per thread). The theme makes every table a scrolling block (`.main table {display:block}`); this one must be a real table so fixed layout works: it is then exactly as wide as the column and can never overflow (the wrapper scrolls if it somehow did). The two date columns get a set share, the thread columns split the rest; widths include padding (border-box). Headers run at 45 degrees. */ .main .Schedule-streams { display: table; overflow: visible; table-layout: fixed; width: 100%; } .main .Schedule-streams td { box-sizing: border-box; } .main .Schedule-streams tr:first-child td:nth-child(-n+2) { width: 13.75%; } .main .Schedule-streams tr:first-child td:nth-child(n+3) { width: 14.5%; } /* five threads */ .main .Schedule-streams tr:first-child td { height: 7em; vertical-align: bottom; padding-bottom: 0.3em; } .main .Schedule-streams tr:first-child td > p { white-space: nowrap; width: 1em; /* a narrow box; the text runs out of it */ margin: 0 0 0 0.6em; padding: 0; transform: rotate(-45deg); transform-origin: bottom left; line-height: 1; } .ScheduleWrap:has(.Schedule-streams) { overflow: visible; } /* rotated headers may poke out */ /* --- Mottos: license-plate badges --- */ .Motto { margin: 0.5em 0 1.5em; color: var(--text-muted); } .Motto .Larger { display: inline-block; font-family: var(--font-mono); font-size: 0.95em; font-weight: 600; letter-spacing: 0.12em; color: var(--code-inline); background-color: var(--bg-code); border: 2px solid var(--accent); border-radius: 6px; padding: 0.25em 0.7em; margin: 0.2em 0; } /* --- Callouts --- */ .Notice { background-color: var(--bg-alt); border-left: 4px solid var(--link); border-radius: 0 4px 4px 0; padding: 0.7em 1.1em; margin: 1em 0; } .Notice p { margin: 0; } /* --- Exam dates (exam-dates tag) --- */ .ExamDates { list-style: none; margin: 1em 0; padding: 0; } .ExamDates .ExamDate { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.3em 1.5em; margin: 0.5em 0; padding: 0.45em 1em; background-color: var(--bg-alt); border-left: 4px solid var(--accent); border-radius: 0 4px 4px 0; font-size: 1.35em; font-weight: 600; color: var(--heading); } .ExamDates .AddToCal { font-size: 0.65em; font-weight: 400; white-space: nowrap; } .Tips { margin: 1.5em 0 0; } /* --- Footer: wave --- */ html { min-height: 100%; } body:has(.HomePage) { min-height: 100vh; box-sizing: border-box; margin: 0; /* flow-root keeps a child's top margin inside the body; otherwise it collapses through, the body starts 40px down, and a short page's art hangs 40px below the viewport */ display: flow-root; /* background-image and padding-bottom (room for the art) are injected from the course config; see theme-css in common/lib.rkt */ background-repeat: repeat-x; background-position: center bottom; } @media (max-width: 640px) { .HomePage h1 { font-size: 1.8em; } } /* ========================================================= Sub-pages ========================================================= */ /* --- Masthead: the page title is the first heading directly under the page's
(which may be wrapped in a div, e.g. .Accordion). The home page has its own treatment above. --- */ .main > section > .heading, .main > div:not(.HomePage) > section > .heading { display: flex; /* no gap: the empty anchor is a flex item too */ align-items: center; font-size: 2em; line-height: 1.15; margin: 1.2em 0 1em; } /* A bar (palette: title-bar) runs from the end of the title to the right margin. */ .main > section > .heading::after, .main > div:not(.HomePage) > section > .heading::after { content: ""; flex: 1; height: 0.22em; min-width: 2em; margin-left: 0.6em; background-color: var(--title-bar); border-radius: 999px; } /* Scribble separates a section number from its title with  , which the inline-code rule above paints as a dark box. Undo that for exactly that span (it directly precedes the heading's anchor); real code in headings keeps its styling. */ .heading > .stt:has(+ a[name]) { background-color: transparent; padding: 0; font-size: inherit; } /* --- Eyebrow above the title (course-eyebrow in lib.rkt) --- */ .main .SPretitle { font-size: 0.8em; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin: 2.4em 0 0; } .SPretitle:empty { display: none; } /* nested parts get an empty one */ .main > section > .SPretitle + .heading, .main > div:not(.HomePage) > section > .SPretitle + .heading { margin-top: 0.15em; } /* sub-headings of a document spliced in with inline-part (lib.rkt) */ .InlineSubsection { font-size: 1.1em; font-weight: 600; margin: 1.5em 0 0.4em; color: var(--heading); } /* --- On-page contents (Scribble's table-of-contents): a compact two-column box instead of a bare indented list. --- */ .main table:has(a.toclink) { display: block; column-count: 2; column-gap: 2em; margin: 0 0 2em; padding: 0.8em 1.1em; background-color: var(--bg-alt); border-left: 3px solid var(--accent); border-radius: 0 6px 6px 0; font-size: 0.92em; } .main table:has(a.toclink) tbody, .main table:has(a.toclink) tr, .main table:has(a.toclink) td { display: block; } .main table:has(a.toclink) tr { break-inside: avoid; } .main table:has(a.toclink) td > p > .hspace:first-child { display: none; } .main table:has(a.toclink) p { margin: 0.15em 0; } @media (max-width: 640px) { .main table:has(a.toclink) { column-count: 1; } } /* --- toc-cards (lib.rkt): the local table of contents as a card grid. Overrides the contents-box rule above; Scribble's table becomes a grid via display: contents, spacer rows hidden. --- */ .main .TocCards table:has(a.toclink) { display: grid; grid-template-columns: repeat(auto-fill, minmax(13em, 1fr)); gap: 0.8em; column-count: auto; margin: 0.5em 0 1.5em; padding: 0; background: none; border: none; font-size: 1em; } .main .TocCards table:has(a.toclink) tbody, .main .TocCards table:has(a.toclink) tr, .main .TocCards table:has(a.toclink) td { display: contents; } .main .TocCards td:not(:has(a)) { display: none; } /* spacer rows */ .main .TocCards td > p > .hspace:first-child { display: none; } /* indent only */ .main .TocCards p { margin: 0; display: flex; } .main .TocCards a.toclink { flex: 1; display: block; padding: 0.9em 1.1em; border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 6px; background-color: var(--bg-alt); font-weight: 600; line-height: 1.3; } .main .TocCards a.toclink:hover, .main .TocCards a.toclink:focus-visible { border-color: var(--link); background-color: var(--bg-code); text-decoration: none; } /* --- Accordion (see accordion.js) --- */ .AccordionControls { display: flex; gap: 0.5em; margin: 0 0 1em; } .AccordionControls button { font: inherit; font-size: 0.85em; color: var(--link); background-color: var(--bg-alt); border: 1px solid var(--border); border-radius: 4px; padding: 0.25em 0.8em; cursor: pointer; } .AccordionControls button:hover, .AccordionControls button:focus-visible { border-color: var(--link); } .AccordionItem { margin: 0.6em 0; border: 1px solid var(--border); border-radius: 6px; background-color: var(--bg-alt); } .AccordionItem > summary { display: flex; align-items: baseline; gap: 0.6em; padding: 0.6em 1em; cursor: pointer; list-style: none; } .AccordionItem > summary::-webkit-details-marker { display: none; } .AccordionItem > summary::before { content: "\25B8" / ""; /* small right-pointing triangle */ color: var(--accent); flex: none; } .AccordionItem[open] > summary::before { content: "\25BE" / ""; } .AccordionItem > summary:hover { background-color: var(--bg-code); border-radius: 6px; } .AccordionItem > summary:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; } .AccordionItem > summary > .heading, .AccordionItem > summary > .InlineSection { margin: 0; padding: 0; border: 0; font-size: 1.1em; font-style: normal; /* deep sections render as h5, which is italic elsewhere */ } .AccordionItem > section, .AccordionItem > .AccordionBody { padding: 0 1.2em 0.8em; } /* --- Striped tables: general-purpose chrome for any @tabular with #:style "Striped" (header row, zebra rows, Scribble's separator columns hidden). "Schedule" is the assignment schedule: Striped plus bold names. --- */ .main :is(.Striped, .Schedule) { border-collapse: collapse; } .main :is(.Striped, .Schedule) td { padding: 0.4em 0.7em; border-bottom: 1px solid var(--border) !important; } .main :is(.Striped, .Schedule) td:has(> p > .hspace:only-child) { display: none; } .main :is(.Striped, .Schedule) tr:first-child td { color: var(--accent); font-size: 0.85em; letter-spacing: 0.04em; text-transform: uppercase; vertical-align: bottom; border-bottom: 2px solid var(--accent) !important; } .main :is(.Striped, .Schedule) tr:nth-child(even) td { background-color: rgba(255, 255, 255, 0.03); } .main :is(.Striped, .Schedule) tr:not(:first-child):hover td { background-color: var(--bg-alt); } .main :is(.Striped, .Schedule) p { margin: 0; } .main .Schedule td:first-child a { font-weight: 600; } /* --- Staff cards (staff-cards / staff-member in lib.rkt) --- */ .StaffCards ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(15em, 1fr)); gap: 1em; list-style: none; padding: 0; margin: 0; } .StaffCards li { margin: 0; display: flex; } .StaffCard { flex: 1; padding: 1.2em 1.1em; background-color: var(--bg-alt); border: 1px solid var(--border); border-radius: 8px; text-align: center; } .StaffCard p { margin: 0; } .StaffPhoto img { width: 140px; height: 140px; object-fit: cover; border-radius: 50%; border: 3px solid var(--border); } .StaffCard .StaffName { margin-top: 0.6em; font-size: 1.15em; font-weight: 600; color: var(--heading); } .StaffCard .StaffRole { font-size: 0.8em; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); } .StaffFields { display: grid; grid-template-columns: max-content 1fr; gap: 0.3em 0.7em; margin: 1em 0 0; text-align: left; font-size: 0.92em; line-height: 1.4; } .StaffFields dt { font-size: 0.78em; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); padding-top: 0.25em; } .StaffFields dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }