/* Projects shares the site's paper, ink, red and editorial type system. */
.projects-toolbar,.projects-actions,.projects-topline { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.projects-toolbar { justify-content:space-between; border-bottom:1px solid var(--hairline); padding:16px 0; }
.projects-filters { display:flex; flex-wrap:wrap; gap:8px; }
.projects-button,.projects-filters button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 18px; border:1px solid var(--ink); background:transparent; color:var(--ink); font:600 13px/1.5 var(--sans); cursor:pointer; text-decoration:none; }
.projects-button:hover,.projects-filters button[aria-pressed="true"],.projects-primary { background:var(--ink); color:var(--paper); }
.projects-button:focus-visible,.projects-filters button:focus-visible,.projects-modal :is(a,button,input,textarea,select,summary):focus-visible { outline:2px solid var(--red); outline-offset:3px; }
.projects-count,.projects-kicker { color:var(--red); font:700 11px/1.6 var(--mono); letter-spacing:.055em; }
.catalog-engagement { display:block; margin:0; color:var(--graphite); font:500 12px/1.6 var(--sans); font-variant-numeric:tabular-nums; }
.catalog-engagement[hidden] { display:none !important; }
.projects-modal .catalog-engagement { margin:0 0 18px; font:500 12px/1.6 var(--sans); }
.demo-card__select .catalog-engagement { margin-top:6px; }
.demo-detail__copy > .catalog-engagement,.demo-modal__summary > .catalog-engagement { margin:8px 0 12px; }
.projects-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; padding:24px 0; }
.project-card { display:flex; min-width:0; flex-direction:column; border:1px solid var(--hairline); }
.project-cover { display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:16/10; min-height:0; background:var(--faint); border-bottom:1px solid var(--hairline); overflow:hidden; }
.project-cover img { width:100%; height:100%; object-fit:contain; }
.project-cover__type { font:400 clamp(50px,7vw,90px)/1 var(--display); color:var(--graphite); }
.project-card__body { display:flex; flex-direction:column; gap:13px; padding:23px; flex:1; }
.project-card h3 { margin:0; font:550 clamp(22px,2vw,30px)/1.4 var(--sans); overflow-wrap:anywhere; }
.project-card p { margin:0; color:var(--graphite); font:400 14px/1.8 var(--sans); overflow-wrap:anywhere; }
.project-card__foot { margin-top:auto; padding-top:18px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.projects-empty { padding:52px 24px; margin:24px 0; text-align:center; border:1px dashed var(--hairline); color:var(--graphite); font:400 15px/1.8 var(--sans); }
.projects-empty strong { display:block; margin-bottom:10px; color:var(--ink); font-weight:600; }
.projects-modal { z-index:115; padding:24px; }
.projects-modal [hidden],.projects-section [hidden] { display:none !important; }
.projects-modal .projects-dialog { width:min(1080px,100%); max-height:calc(100svh - 48px); padding:30px clamp(20px,4vw,44px); overflow-y:auto; overscroll-behavior:contain; scrollbar-color:var(--red) transparent; scrollbar-width:thin; }
.projects-topline { justify-content:space-between; gap:16px; margin-bottom:24px; }
.projects-modal .projects-title { font:550 clamp(28px,4vw,44px)/1.3 var(--sans); margin:0 0 16px; overflow-wrap:anywhere; }
.projects-modal p { font:400 15px/1.85 var(--sans); }
.projects-modal .projects-button { padding:10px 18px; font:600 13px/1.5 var(--sans); }
.projects-modal .projects-primary { background:var(--ink); color:var(--paper); }
.projects-modal .projects-lead { color:var(--graphite); margin:0 0 24px; }
.projects-tags { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.projects-tag { padding:5px 10px; border:1px solid var(--hairline); font:600 11px/1.5 var(--mono); }
.projects-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin:24px 0; }
.projects-gallery figure { margin:0; min-width:0; }
.projects-gallery figure:only-child { grid-column:1/-1; }
.projects-gallery img { width:100%; height:300px; object-fit:contain; border:1px solid var(--hairline); background:var(--faint); }
.projects-gallery figcaption { margin-top:7px; font:400 12px/1.6 var(--sans); color:var(--graphite); overflow-wrap:anywhere; }
.projects-copy { border-top:1px solid var(--hairline); padding-top:22px; margin-top:26px; }
.projects-copy h3 { margin:0 0 14px; font:600 20px/1.5 var(--sans); }
.projects-copy p,.project-release p { white-space:pre-wrap; overflow-wrap:anywhere; }
.project-release { margin:16px 0; padding:18px; border:1px solid var(--hairline); }
.project-release h4 { margin:0 0 8px; font:600 17px/1.5 var(--sans); }
.project-release small { display:block; margin:12px 0; color:var(--graphite); font:400 12px/1.8 var(--mono); overflow-wrap:anywhere; }
.projects-history summary { cursor:pointer; padding:16px 0; font:600 15px/1.6 var(--sans); }
.projects-share { width:100%; margin-top:12px; }
.projects-status { min-height:22px; margin:12px 0 !important; color:var(--graphite); font:500 13px/1.7 var(--sans) !important; white-space:pre-wrap; overflow-wrap:anywhere; }
.projects-status[data-error="true"] { color:var(--red); }
.projects-editor-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:26px; }
.projects-editor-list { display:flex; flex-direction:column; gap:9px; min-width:0; }
.projects-editor-list { margin-top:12px; }
.projects-editor-list button { text-align:left; min-height:50px; padding:10px 12px; font:500 13px/1.6 var(--sans); overflow-wrap:anywhere; }
.projects-editor-list button[aria-current="true"] { border-color:var(--red); color:var(--red); }
.projects-form { display:grid; gap:17px; min-width:0; }
.projects-fields { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.projects-form label,.projects-share-label { display:grid; gap:7px; min-width:0; font:600 13px/1.6 var(--sans); }
.projects-form :is(input,textarea,select),.projects-share { width:100%; min-width:0; padding:10px 12px; border:1px solid var(--hairline); border-radius:0; background:var(--paper); color:var(--ink); font:400 16px/1.6 var(--sans); }
.projects-form textarea { resize:vertical; min-height:110px; }
.projects-form input:disabled { opacity:.75; background:var(--faint); }
.projects-form fieldset { margin:0; padding:16px; border:1px solid var(--hairline); min-width:0; }
.projects-form legend { padding:0 7px; font:600 14px/1.5 var(--sans); }
.projects-form .projects-release-form { display:grid; gap:14px; margin-top:15px; }
.projects-modal button:disabled { opacity:.5; cursor:wait; }
.projects-editor-images { display:grid; gap:12px; }
.projects-editor-image { display:grid; grid-template-columns:100px minmax(0,1fr); gap:12px; padding:12px; border:1px solid var(--hairline); }
.projects-editor-image img { width:100px; height:85px; object-fit:contain; }
.projects-editor-image .projects-actions { grid-column:1/-1; }
.projects-upload { border:1px solid var(--red); padding:14px; margin:12px 0; }
.projects-upload progress { display:block; width:100%; accent-color:var(--red); margin:10px 0; }
.projects-editor-actions { position:sticky; bottom:-30px; background:var(--paper); padding:16px 0; border-top:1px solid var(--hairline); z-index:2; }
@media(max-width:1100px) { .projects-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:760px) {
 .projects-grid,.projects-editor-layout,.projects-fields,.projects-gallery { grid-template-columns:minmax(0,1fr); }
 .projects-modal { padding:6px; }
 .projects-modal .projects-dialog { max-height:calc(100svh - 12px); padding:22px 17px; box-shadow:none; }
 .projects-editor-list { max-height:200px; overflow-y:auto; }
 .projects-gallery img { height:240px; }
 .projects-editor-actions { bottom:-22px; }
 .projects-actions .projects-button { flex:1 1 auto; }
 .projects-filters button { padding:9px 15px; }
}