/* =========================================================================== ElmsPark — Layouts Gallery · Direction C · Studio Dashboard (filter-first) Mono-led tool chrome (JetBrains Mono) + Fraunces for titles only. House tokens: paper / ink / signal. Cards carry their own palette. =========================================================================== */ /* ---- import-once font already linked in ; tokens below ---- */ :root{ --paper:#F7F5F1; --ink:#14110E; --ink-soft:#5C564E; --signal:#D4452B; --ghost:#C9C5BD; --rule:rgba(20,17,14,.12); --rule-soft:rgba(20,17,14,.07); /* cooler, flatter tool chrome layers */ --chrome:#FBFAF8; /* near-white panel ground */ --chrome-2:#F2EFEA; /* recessed wells / hover */ --tint:rgba(20,17,14,.035); --signal-wash:rgba(212,69,43,.08); --signal-edge:rgba(212,69,43,.32); --display:"Fraunces",Georgia,serif; --mono:"JetBrains Mono",ui-monospace,Menlo,monospace; --ease:cubic-bezier(.2,.7,.2,1); --rail-w:284px; --head-h:60px; --r:10px; --r-sm:7px; --shadow-card:0 1px 2px rgba(20,17,14,.05); --shadow-lift:0 14px 34px -14px rgba(20,17,14,.34), 0 2px 8px rgba(20,17,14,.08); --shadow-drawer:-30px 0 60px -30px rgba(20,17,14,.45); } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--mono); font-size:14px; line-height:1.5; font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{display:block;max-width:100%} button{font:inherit;color:inherit;cursor:pointer;border:0;background:none} input,select{font:inherit;color:inherit} ul{margin:0;padding:0;list-style:none} a{color:inherit} .vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ---- focus ---- */ :focus-visible{outline:2.5px solid var(--signal);outline-offset:2px;border-radius:3px} .den-btn:focus-visible,.facet-row:focus-within{outline-offset:1px} .skip-link{ position:fixed;top:8px;left:8px;z-index:200; background:var(--ink);color:var(--paper); padding:9px 14px;border-radius:var(--r-sm); font-size:12px;text-decoration:none; transform:translateY(-160%);transition:transform .18s var(--ease); } .skip-link:focus{transform:translateY(0)} /* =========================================================================== HEADER =========================================================================== */ .site-head{ position:sticky;top:0;z-index:60; height:var(--head-h); background:rgba(251,250,248,.86); backdrop-filter:saturate(1.1) blur(10px); border-bottom:1px solid var(--rule); } .head-inner{ height:100%; display:flex;align-items:center;gap:24px; padding:0 22px; } .wordmark{ font-family:var(--display); font-weight:900; font-size:24px; letter-spacing:-.02em; text-decoration:none; line-height:1; flex:none; } .wordmark .accent{color:var(--signal)} .head-meta{flex:1;min-width:0;overflow:hidden} .thesis{ font-size:12px;letter-spacing:.01em; color:var(--ink-soft); white-space:nowrap; } .thesis .t-b{color:var(--ink)} .thesis .t-p{color:var(--ink);border-bottom:1.5px solid var(--signal);padding-bottom:1px} .head-counts{ flex:none;display:flex;align-items:baseline;gap:5px; font-size:12px;color:var(--ink-soft); padding-left:18px;border-left:1px solid var(--rule); } .hc-num{font-weight:500;color:var(--ink);font-size:14px} .hc-sep{color:var(--ghost);margin:0 2px} /* =========================================================================== MOBILE FILTER BAR (hidden on desktop) =========================================================================== */ .m-filterbar{display:none} /* =========================================================================== SHELL LAYOUT =========================================================================== */ .shell{ display:grid; grid-template-columns:var(--rail-w) minmax(0,1fr); align-items:start; max-width:1680px; margin:0 auto; } /* =========================================================================== FACET RAIL =========================================================================== */ .rail{ position:sticky; top:var(--head-h); height:calc(100vh - var(--head-h)); border-right:1px solid var(--rule); background:var(--chrome); display:flex;flex-direction:column; } .rail-scroll{ flex:1;overflow-y:auto;overscroll-behavior:contain; padding:18px 16px 8px; scrollbar-width:thin; } .rail-scroll::-webkit-scrollbar{width:8px} .rail-scroll::-webkit-scrollbar-thumb{background:var(--rule);border-radius:8px;border:2px solid var(--chrome)} .rail-mobile-head{display:none} /* search */ .search-group{position:relative;margin-bottom:18px} .search-ico{ position:absolute;left:11px;top:50%;transform:translateY(-50%); font-size:15px;color:var(--ink-soft);pointer-events:none; } #search{ width:100%; padding:10px 32px 10px 32px; background:var(--paper); border:1px solid var(--rule); border-radius:var(--r-sm); font-size:13px; transition:border-color .15s var(--ease),box-shadow .15s var(--ease); } #search::placeholder{color:var(--ghost)} #search:focus{border-color:var(--signal-edge);box-shadow:0 0 0 3px var(--signal-wash)} #search::-webkit-search-cancel-button{display:none} .search-clear{ position:absolute;right:6px;top:50%;transform:translateY(-50%); width:24px;height:24px;border-radius:50%; font-size:11px;color:var(--ink-soft); display:grid;place-items:center; } .search-clear:hover{background:var(--chrome-2)} /* facet group */ .facet{border-top:1px solid var(--rule);padding:14px 0 4px} .facet:first-child{border-top:0} .facet-legend{ display:flex;align-items:center;justify-content:space-between; width:100%;padding:2px 2px 10px; font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase; color:var(--ink-soft); } .facet-legend .leg-meta{color:var(--ghost);font-weight:400;letter-spacing:.02em} .facet-legend .leg-meta.has{color:var(--signal)} .facet-list{display:flex;flex-direction:column;gap:1px;padding-bottom:6px} .facet-row{ display:flex;align-items:center;gap:10px; min-height:32px;padding:5px 8px; border-radius:var(--r-sm); cursor:pointer; transition:background .12s var(--ease); position:relative; } .facet-row:hover{background:var(--chrome-2)} .facet-row input{position:absolute;opacity:0;width:1px;height:1px} .fr-box{ flex:none;width:16px;height:16px;border-radius:4px; border:1.5px solid var(--ghost); background:var(--paper); display:grid;place-items:center; transition:border-color .12s var(--ease),background .12s var(--ease); } .fr-box::after{ content:"";width:8px;height:8px;border-radius:1.5px; background:var(--signal); transform:scale(0);transition:transform .12s var(--ease); } .facet-row input:checked + .fr-box{border-color:var(--signal)} .facet-row input:checked + .fr-box::after{transform:scale(1)} .facet-row:has(input:checked){background:var(--signal-wash)} .fr-label{ flex:1;min-width:0;font-size:12.5px;line-height:1.25; display:flex;flex-direction:column; } .fr-name{ white-space:nowrap;overflow:hidden;text-overflow:ellipsis; text-transform:capitalize; } .facet-row:has(input:checked) .fr-name{font-weight:500;text-decoration:underline;text-decoration-color:var(--signal-edge);text-underline-offset:2px} .fr-count{ flex:none;font-size:11px;color:var(--ink-soft); min-width:20px;text-align:right; font-variant-numeric:tabular-nums; } /* zero-count disabled */ .facet-row.is-zero{opacity:.4;cursor:not-allowed;pointer-events:none} .facet-row.is-zero .fr-count{color:var(--ghost)} /* rail foot */ .rail-foot{padding:14px 2px 8px} .rail-clear{ width:100%;padding:9px; border:1px solid var(--rule);border-radius:var(--r-sm); background:var(--paper); font-size:12px;color:var(--ink-soft); letter-spacing:.02em; transition:all .14s var(--ease); } .rail-clear:not(:disabled):hover{border-color:var(--signal-edge);color:var(--ink)} .rail-clear:disabled{opacity:.45;cursor:default} .rail-mobile-apply{display:none} /* =========================================================================== WORK SURFACE / TOOLBAR =========================================================================== */ .work{min-width:0;padding:0 22px 60px} .toolbar{ position:sticky;top:var(--head-h);z-index:40; background:rgba(247,245,241,.9); backdrop-filter:saturate(1.1) blur(8px); margin:0 -22px;padding:14px 22px; border-bottom:1px solid var(--rule); } .tb-line-1{display:flex;align-items:center;justify-content:space-between;gap:18px} .tb-count{margin:0;font-size:13px;color:var(--ink-soft)} .tbc-n{font-size:18px;font-weight:500;color:var(--ink);font-family:var(--display);font-feature-settings:"tnum"} .tbc-dim{margin-left:12px;padding-left:12px;border-left:1px solid var(--rule);font-size:12px} .tbc-dim #tbc-pages{color:var(--ink)} .tb-controls{display:flex;align-items:center;gap:14px} .density{display:flex;align-items:center} .den-seg{ display:inline-flex; border:1px solid var(--rule);border-radius:var(--r-sm); background:var(--paper);overflow:hidden; } .den-btn{ padding:7px 12px;font-size:11px;letter-spacing:.03em;color:var(--ink-soft); border-right:1px solid var(--rule); transition:background .14s var(--ease),color .14s var(--ease); } .den-btn:last-child{border-right:0} .den-btn:hover{color:var(--ink)} .den-btn.is-on{background:var(--ink);color:var(--paper)} .sort{display:flex;align-items:center;gap:8px} .sort-lab{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)} #sort{ padding:7px 30px 7px 12px; border:1px solid var(--rule);border-radius:var(--r-sm); background:var(--paper); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235C564E' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 11px center; font-size:12px;cursor:pointer;-webkit-appearance:none;appearance:none; transition:border-color .14s var(--ease); } #sort:hover{border-color:var(--ghost)} /* pill bar */ .tb-line-2{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px dashed var(--rule)} .pill-lead{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);flex:none} .pills{display:flex;flex-wrap:wrap;gap:7px;flex:1;min-width:0} .pill{ display:inline-flex;align-items:center;gap:7px; padding:5px 6px 5px 11px; min-height:28px; background:var(--chrome); border:1px solid var(--signal-edge); border-radius:30px; font-size:11.5px; } .pill .pk{color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em;font-size:10px} .pill .pv{font-weight:500;text-transform:capitalize} .pill-x{ width:20px;height:20px;border-radius:50%; display:grid;place-items:center;font-size:11px; color:var(--ink-soft);background:var(--tint); transition:background .12s var(--ease),color .12s var(--ease); } .pill-x:hover{background:var(--signal);color:#fff} .pill-clear{ flex:none;font-size:11px;color:var(--signal); text-decoration:underline;text-underline-offset:2px; padding:5px 4px;min-height:28px; } .pill-clear:hover{color:var(--ink)} /* =========================================================================== GRID =========================================================================== */ .grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; padding-top:26px; } @media(min-width:1300px){ .grid{grid-template-columns:repeat(4,minmax(0,1fr))} } .grid[data-density="compact"]{gap:14px} @media(min-width:1300px){ .grid[data-density="compact"]{grid-template-columns:repeat(5,minmax(0,1fr))} } .card{ contain:layout style; content-visibility:auto; contain-intrinsic-size:auto 360px; } .card.is-hidden{display:none} .card-inner{ display:flex;flex-direction:column; background:var(--chrome); border:1px solid var(--rule); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-card); transition:transform .26s var(--ease),box-shadow .26s var(--ease),border-color .2s var(--ease); height:100%; } .card:hover .card-inner, .card:focus-within .card-inner{ transform:translateY(-4px); box-shadow:var(--shadow-lift); border-color:var(--ghost); } /* thumbnail */ .thumb{ position:relative; aspect-ratio:16/10; background:var(--chrome-2); overflow:hidden; border-bottom:1px solid var(--rule); } .thumb img{ width:100%;height:100%;object-fit:cover;object-position:top center; transition:transform .5s var(--ease); } .card:hover .thumb img{transform:scale(1.035)} .thumb-tint{position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:0;transition:opacity .26s var(--ease)} .card:hover .thumb-tint{opacity:.06} /* palette swatch strip top-left */ .swatches{ position:absolute;top:9px;left:9px; display:flex;gap:0;border-radius:5px;overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.22); } .swatches i{width:13px;height:13px;display:block} /* quick-look reveal */ .quick{ position:absolute;inset:auto 9px 9px 9px; display:flex;justify-content:flex-end; opacity:0;transform:translateY(6px); transition:opacity .2s var(--ease),transform .2s var(--ease); pointer-events:none; } .card:hover .quick, .card:focus-within .quick{opacity:1;transform:translateY(0);pointer-events:auto} .quick-btn{ display:inline-flex;align-items:center;gap:6px; padding:8px 13px;min-height:32px; background:var(--ink);color:var(--paper); border-radius:30px;font-size:11.5px;letter-spacing:.02em; box-shadow:0 4px 14px rgba(20,17,14,.3); transition:background .14s var(--ease); } .quick-btn:hover{background:var(--signal)} .quick-btn .qb-ico{font-size:12px} /* card body */ .cbody{padding:13px 14px 14px;display:flex;flex-direction:column;gap:10px;flex:1} .card-title{ font-family:var(--display);font-weight:600; font-size:16px;line-height:1.2;letter-spacing:-.01em; margin:0; } .card-trigger{ position:absolute;inset:0;z-index:1; background:none;width:100%;height:100%; cursor:pointer; } .card-trigger .vh{} .cbody .card-title,.cbody .card-meta,.cbody .badges{position:relative} .card-meta{ font-size:11px;color:var(--ink-soft); display:flex;align-items:center;gap:7px;flex-wrap:wrap; } .cm-ind{text-transform:capitalize} .cm-dot{width:3px;height:3px;border-radius:50%;background:var(--ghost)} .cm-date{color:var(--ghost)} /* scent badges (visible at rest, never hover-gated) */ .badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto} .badge{ display:inline-flex;align-items:center;gap:5px; padding:4px 8px;min-height:24px; border-radius:5px; font-size:10.5px;letter-spacing:.02em; background:var(--tint);color:var(--ink-soft); white-space:nowrap; } .badge-plug{background:var(--signal-wash);color:#9c3520;font-weight:500} .badge-plug .b-dot{width:6px;height:6px;border-radius:50%;background:var(--signal)} .badge-pages b,.badge-lh b{color:var(--ink);font-weight:500} .badge-lh .lh-dot{width:6px;height:6px;border-radius:50%} /* compact density tweaks */ .grid[data-density="compact"] .card{contain-intrinsic-size:auto 300px} .grid[data-density="compact"] .cbody{padding:10px 11px 11px;gap:7px} .grid[data-density="compact"] .card-title{font-size:14px} .grid[data-density="compact"] .thesis{} .grid[data-density="compact"] .card-meta{font-size:10px} .grid[data-density="compact"] .badge{font-size:9.5px;padding:3px 7px;min-height:22px} /* =========================================================================== EMPTY STATE =========================================================================== */ .empty{ text-align:center;padding:70px 24px 90px;max-width:520px;margin:0 auto; } .empty-h{font-family:var(--display);font-size:24px;font-weight:600;margin:0 0 10px} .empty-b{font-size:13px;color:var(--ink-soft);line-height:1.6;margin:0 0 24px} .empty-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} .empty-relax,.empty-clear{ padding:11px 18px;border-radius:var(--r-sm);font-size:12.5px;min-height:44px; } .empty-relax{background:var(--paper);border:1px solid var(--rule)} .empty-relax:hover{border-color:var(--ghost)} .empty-clear{background:var(--ink);color:var(--paper)} .empty-clear:hover{background:var(--signal)} .grid-foot{ margin-top:60px;padding-top:24px;border-top:1px solid var(--rule); font-size:12px;color:var(--ink-soft);max-width:560px; } .grid-foot p{margin:0;line-height:1.6} /* =========================================================================== DRAWER =========================================================================== */ .scrim{ position:fixed;inset:0;z-index:90; background:rgba(20,17,14,.42); backdrop-filter:blur(1.5px); opacity:0;transition:opacity .3s var(--ease); } .scrim.is-open{opacity:1} .drawer{ position:fixed;top:0;right:0;z-index:100; width:min(560px,94vw);height:100dvh; background:var(--paper); border-left:1px solid var(--rule); box-shadow:var(--shadow-drawer); display:flex;flex-direction:column; transform:translateX(100%); transition:transform .36s var(--ease); } .drawer.is-open{transform:translateX(0)} .dr-head{ flex:none;display:flex;align-items:center;justify-content:space-between; padding:14px 16px;border-bottom:1px solid var(--rule); background:var(--chrome); } .dr-nav{display:flex;align-items:center;gap:6px} .dr-arrow{ width:36px;height:36px;border-radius:var(--r-sm); border:1px solid var(--rule);background:var(--paper); font-size:15px;display:grid;place-items:center; transition:all .14s var(--ease); } .dr-arrow:not(:disabled):hover{border-color:var(--signal-edge);background:var(--signal-wash)} .dr-arrow:disabled{opacity:.35;cursor:default} .dr-pos{font-size:11px;color:var(--ink-soft);padding:0 8px;letter-spacing:.04em} .dr-close{ width:38px;height:38px;border-radius:50%; font-size:14px;color:var(--ink-soft); display:grid;place-items:center; transition:background .14s var(--ease),color .14s var(--ease); } .dr-close:hover{background:var(--chrome-2);color:var(--ink)} .dr-scroll{flex:1;overflow-y:auto;overscroll-behavior:contain} .dr-scroll::-webkit-scrollbar{width:9px} .dr-scroll::-webkit-scrollbar-thumb{background:var(--rule);border-radius:9px;border:2px solid var(--paper)} /* drawer content */ .dr-top{padding:22px 22px 18px;border-bottom:1px solid var(--rule)} .dr-eyebrow{ display:flex;align-items:center;gap:8px; font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft); margin-bottom:10px; } .dr-eyebrow .b-dot{width:6px;height:6px;border-radius:50%;background:var(--signal)} #dr-title{ font-family:var(--display);font-weight:600; font-size:27px;line-height:1.12;letter-spacing:-.015em;margin:0 0 8px; } .dr-tag{font-size:13px;color:var(--ink-soft);line-height:1.5;margin:0} /* device preview */ .dr-preview{padding:20px 22px;background:var(--chrome)} .dev-toggle{ display:inline-flex;border:1px solid var(--rule);border-radius:var(--r-sm); background:var(--paper);overflow:hidden;margin-bottom:16px; } .dev-btn{ padding:7px 14px;font-size:11px;letter-spacing:.02em;color:var(--ink-soft); border-right:1px solid var(--rule);transition:background .14s var(--ease),color .14s var(--ease); } .dev-btn:last-child{border-right:0} .dev-btn.is-on{background:var(--ink);color:var(--paper)} .preview-stage{ position:relative;border-radius:var(--r);overflow:hidden; border:1px solid var(--rule);background:var(--chrome-2); aspect-ratio:16/10; transition:aspect-ratio .3s var(--ease); } .preview-stage.is-mobile{aspect-ratio:9/15;max-width:240px;margin:0 auto;border-radius:18px;padding:9px;background:var(--ink)} .preview-stage img{ width:100%;height:100%;object-fit:cover;object-position:top center; border-radius:inherit; } .preview-stage.is-mobile img{border-radius:11px} .preview-cap{font-size:11px;color:var(--ink-soft);margin:11px 2px 0;text-align:center} /* page rail */ .dr-section{padding:20px 22px;border-top:1px solid var(--rule)} .dr-sec-h{ font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft); margin:0 0 13px;display:flex;align-items:center;justify-content:space-between; } .dr-sec-h .sh-meta{color:var(--ghost);letter-spacing:.02em;text-transform:none} .page-rail{ display:grid;grid-auto-flow:column;grid-auto-columns:128px; gap:10px;overflow-x:auto;padding-bottom:8px; scrollbar-width:thin;scroll-snap-type:x proximity; } .page-rail::-webkit-scrollbar{height:7px} .page-rail::-webkit-scrollbar-thumb{background:var(--rule);border-radius:7px} .page-thumb{ scroll-snap-align:start; border:1px solid var(--rule);border-radius:7px;overflow:hidden; background:var(--chrome-2);text-align:left; transition:border-color .14s var(--ease),transform .14s var(--ease); } .page-thumb:hover{transform:translateY(-2px)} .page-thumb.is-active{border-color:var(--signal);box-shadow:0 0 0 2px var(--signal-wash)} .page-thumb img{aspect-ratio:16/10;object-fit:cover;object-position:top center;width:100%} .page-thumb .pt-lab{ padding:6px 8px;font-size:10px;color:var(--ink-soft); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; border-top:1px solid var(--rule);text-transform:capitalize; } .page-thumb.is-active .pt-lab{color:var(--ink);font-weight:500} /* lighthouse meters */ .lh-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 22px} .lh-item{display:flex;flex-direction:column;gap:6px} .lh-row{display:flex;align-items:baseline;justify-content:space-between} .lh-name{font-size:11px;color:var(--ink-soft);letter-spacing:.02em} .lh-val{font-size:14px;font-weight:500;font-variant-numeric:tabular-nums} .lh-bar{height:5px;border-radius:5px;background:var(--chrome-2);overflow:hidden} .lh-fill{height:100%;border-radius:5px;background:var(--signal);transition:width .5s var(--ease)} .lh-fill.good{background:#3a8f5e} .lh-fill.mid{background:#c98a1e} /* badge lists */ .taglist{display:flex;flex-wrap:wrap;gap:7px} .taglist .tg{ padding:5px 10px;border-radius:5px;font-size:11px; background:var(--chrome);border:1px solid var(--rule);color:var(--ink-soft); } .taglist .tg.tg-feat{border-color:var(--signal-edge);background:var(--signal-wash);color:#9c3520;font-weight:500} /* feature list */ .feat-list{display:flex;flex-direction:column;gap:9px} .feat-list li{ display:flex;gap:10px;font-size:12.5px;line-height:1.45;color:var(--ink); } .feat-list .f-tick{flex:none;color:var(--signal);font-weight:500;margin-top:1px} /* demonstrates / narrative */ .dr-prose{font-size:12.5px;line-height:1.65;color:var(--ink-soft)} .dr-prose strong{color:var(--ink);font-weight:500} /* persona / stack meta */ .meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 22px} .meta-cell .mc-k{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ghost);margin-bottom:3px} .meta-cell .mc-v{font-size:12.5px;line-height:1.4} .meta-cell .mc-v.cap{text-transform:capitalize} /* drawer footer CTAs */ .dr-foot{ flex:none;display:flex;gap:10px; padding:14px 16px; border-top:1px solid var(--rule); background:var(--chrome); } .cta{ flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:13px 14px;min-height:48px; border-radius:var(--r-sm);font-size:12.5px;letter-spacing:.01em; text-decoration:none;text-align:center; transition:transform .14s var(--ease),background .14s var(--ease),border-color .14s var(--ease); } .cta-primary{background:var(--signal);color:#fff;font-weight:500} .cta-primary:hover{background:#bd3a23} .cta-secondary{background:var(--paper);border:1px solid var(--rule);color:var(--ink)} .cta-secondary:hover{border-color:var(--ghost)} .cta:active{transform:translateY(1px)} .cta .gate{font-size:10px;opacity:.85;font-weight:400;display:block;margin-top:1px} /* =========================================================================== RESPONSIVE — TABLET / MOBILE =========================================================================== */ @media(max-width:1080px){ .grid{grid-template-columns:repeat(2,minmax(0,1fr))} .grid[data-density="compact"]{grid-template-columns:repeat(3,minmax(0,1fr))} } @media(max-width:860px){ .thesis{display:none} .head-meta{flex:0} .head-inner{gap:14px} /* rail becomes a bottom-sheet */ .shell{grid-template-columns:1fr} .rail{ position:fixed;inset:auto 0 0 0;top:auto; height:min(82vh,640px);width:100%; border-right:0;border-top:1px solid var(--rule); border-radius:18px 18px 0 0; box-shadow:0 -24px 60px -30px rgba(20,17,14,.5); transform:translateY(100%); transition:transform .34s var(--ease); z-index:110; } .rail.is-open{transform:translateY(0)} .rail-mobile-head{ display:flex;align-items:center;justify-content:space-between; padding:4px 2px 14px;margin-bottom:4px; border-bottom:1px solid var(--rule); } .rmh-title{font-family:var(--display);font-size:18px;font-weight:600} .rmh-close{width:36px;height:36px;border-radius:50%;font-size:14px;color:var(--ink-soft)} .rmh-close:hover{background:var(--chrome-2)} .rail-foot{display:none} .rail-mobile-apply{ display:flex;gap:10px;flex:none; padding:12px 16px;border-top:1px solid var(--rule);background:var(--chrome); } .ma-clear{ padding:13px 18px;min-height:48px;border:1px solid var(--rule);border-radius:var(--r-sm); background:var(--paper);font-size:12.5px; } .ma-apply{ flex:1;padding:13px;min-height:48px;border-radius:var(--r-sm); background:var(--ink);color:var(--paper);font-size:12.5px;font-weight:500; } /* mobile filter bar */ .m-filterbar{ display:flex;align-items:center;justify-content:space-between;gap:12px; position:sticky;top:var(--head-h);z-index:50; padding:10px 16px; background:rgba(247,245,241,.92);backdrop-filter:blur(8px); border-bottom:1px solid var(--rule); } .m-filter-open{ display:inline-flex;align-items:center;gap:9px; padding:9px 15px;min-height:42px; border:1px solid var(--rule);border-radius:30px;background:var(--chrome); font-size:12.5px; } .mf-ico{font-size:13px} .mf-count{ background:var(--signal);color:#fff; min-width:20px;height:20px;border-radius:10px;padding:0 6px; font-size:10.5px;display:grid;place-items:center;font-weight:500; } .m-result{font-size:12px;color:var(--ink-soft)} /* toolbar collapses controls under count on mobile */ .work{padding:0 16px 50px} .toolbar{top:calc(var(--head-h) + 62px);margin:0 -16px;padding:12px 16px} .tb-line-1{flex-wrap:wrap;gap:12px} .tb-controls{width:100%;justify-content:space-between} .grid-foot{margin-top:46px} } @media(max-width:480px){ .grid,.grid[data-density="compact"]{grid-template-columns:1fr;gap:16px} .head-counts{display:none} .den-seg{display:none} /* density not meaningful at 1-up */ .density .vh{} .tb-controls{justify-content:flex-end} #dr-title{font-size:23px} .lh-grid,.meta-grid{grid-template-columns:1fr} .dr-foot{flex-direction:column} } /* =========================================================================== REDUCED MOTION =========================================================================== */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{ transition-duration:.001ms!important; animation-duration:.001ms!important; scroll-behavior:auto!important; } .card:hover .card-inner,.card:focus-within .card-inner{transform:none} .card:hover .thumb img{transform:none} /* quick-look still reveals on focus/hover — accessible, just no lift */ }