/* Small, optional explanations for company, brand and product names. */
.project-context { display:flex; flex-wrap:wrap; gap:10px 34px; }
.project-context>div { display:flex; align-items:baseline; gap:12px; }
.project-context dt { color:var(--grey); font-size:11px; letter-spacing:.04em; }
.project-context dd { font-size:15px; }
.term-note { display:inline; color:inherit; font:inherit; text-align:inherit; text-decoration-line:underline; text-decoration-style:dotted; text-decoration-color:var(--purple); text-decoration-thickness:1px; text-underline-offset:4px; }
.term-note::after { content:'+'; color:#756087; font-size:.7em; vertical-align:super; margin-left:3px; text-decoration:none; }
.term-note:hover { color:#756087; }
.context-note { box-sizing:border-box; width:min(480px,calc(100vw - 32px)); max-height:calc(100dvh - 40px); margin:auto; padding:28px; border:1px solid var(--ink); background:var(--sheet); color:var(--ink); box-shadow:7px 7px 0 #88749f35; overflow:auto; overscroll-behavior:contain; }
.context-note::backdrop { background:rgb(25 23 29 / .32); }
.context-note-top { display:flex; gap:20px; justify-content:space-between; align-items:center; margin:-6px -6px 22px 0; }
.context-note-kind { color:#756087; font:12px/1.4 var(--type); letter-spacing:.04em; }
.context-note-close { display:flex; gap:12px; align-items:center; justify-content:center; min-width:76px; min-height:44px; font:12px/1 var(--type); }
.context-note-close span { font:25px/1 var(--type); }
.context-note h2 { font:700 40px/1.03 var(--display); letter-spacing:-.025em; text-transform:none; margin:0 0 21px; }
.context-note p { font:16px/1.65 var(--type); margin:0; }
.context-note p+p { margin-top:16px; }
.context-note-context { border-top:1px solid var(--line); padding-top:16px; }
body.context-note-open { overflow:hidden; }
@media(max-width:700px) {
 .project-context { display:grid; gap:3px; }
 .project-context>div { display:grid; grid-template-columns:67px minmax(0,1fr); gap:12px; align-items:center; }
 .project-context dd { font-size:14px; }
 .project-context .term-note { display:inline-flex; min-height:36px; align-items:center; }
 .project-context .term-note::after { align-self:flex-start; margin-top:4px; }
 .context-note { padding:24px; max-height:calc(100dvh - 32px); }
 .context-note h2 { font-size:36px; }
}