/* /projects/ — the Daily Plate's type and palette (daily-plate/style.css, home.css) on a static page. */
@font-face{font-family:Plex;src:url(/plate/fonts/sans.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:Plex;src:url(/plate/fonts/sans-semibold.ttf) format("truetype");font-weight:600 700;font-display:swap}

:root{--ink:#1B1A18;--soft:#716C64;--rule:#D8D2C5;--bg:#F3F0E8;--red:#A33333;--mono:Menlo,ui-monospace,monospace;color:var(--ink);background:var(--bg);font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;font-family:Plex,Arial,Helvetica,sans-serif}
a{color:inherit}
::selection{background:#CFC9BC;color:var(--ink)}
:focus-visible{outline:1px solid var(--soft);outline-offset:2px}

.skip-link{position:absolute;left:16px;top:-40px;background:var(--ink);color:var(--bg);padding:6px 10px;font-size:13px;z-index:2}
.skip-link:focus{top:12px}

.page{padding:48px 48px 32px}
main,.foot{max-width:1144px}

/* the header is the home page's (home.css .home-head) */
.head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.head .home{font-size:22px;line-height:26px;font-weight:700;letter-spacing:-.025em;text-decoration:none}
.head nav{display:flex;gap:22px;font-size:14px;align-items:baseline}
.head nav a{text-decoration:none}
.head nav a:hover,.head nav a[aria-current]{text-decoration:underline;text-underline-offset:3px}
.head button{font:inherit;color:var(--soft);background:none;border:0;padding:0;cursor:pointer}
.head button:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

.lede{margin:72px 0 0;font-size:31px;line-height:1.36;letter-spacing:-.012em;max-width:30ch}
.lede .soft{color:#77726A}

section{margin-top:72px}
.cmd{font:11px var(--mono);color:var(--soft);margin:0 0 10px}
.cmd .edition::before{content:"  "}
h2{font-size:15px;font-weight:700;margin:0 0 4px}
.sub{font-size:14px;line-height:1.5;color:var(--soft);margin:0 0 18px;max-width:64ch}
.sub a{color:var(--ink);text-underline-offset:3px}

.list{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--rule)}
.row{display:grid;grid-template-columns:210px minmax(0,1fr) 150px;column-gap:24px;padding:14px 0;border-top:1px solid var(--rule);align-items:baseline}
.branch{font:700 11.5px/17px var(--mono);white-space:pre}
.branch .p{color:var(--soft);font-weight:400}
.branch .sw{display:inline-block;width:8px;height:8px;background:var(--hue);margin-right:8px}
.body{min-width:0}
h3{margin:0;font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.35}
h3 a{text-decoration:none;box-shadow:inset 0 -2px var(--hue,var(--ink));transition:box-shadow .15s,color .15s}
h3 a:hover{box-shadow:inset 0 -1.35em var(--hue,var(--ink));color:var(--bg)}
.host{font:400 11px var(--mono);color:var(--soft);margin-left:8px;white-space:nowrap}
.desc{font-size:14.5px;line-height:1.5;margin:6px 0 0;max-width:66ch}
.stack{font:10.5px/1.6 var(--mono);color:var(--soft);margin:6px 0 0}

/* filled from the current edition's manifest by projects.js; hidden when it cannot be read */
.count{font:700 11.5px var(--mono);text-align:right;font-variant-numeric:tabular-nums;color:var(--hue);text-decoration:none;justify-self:end}
.count small{display:block;font-weight:400;color:var(--soft);font-size:10.5px;margin-top:2px}
.count:hover b{text-decoration:underline;text-underline-offset:3px}
.count[hidden]{display:none}

.tools .row{grid-template-columns:210px minmax(0,1fr);padding:11px 0}
.tools h3{font-size:15px}
.tools .desc{margin-top:3px}

.infra{font:11.5px/20px var(--mono);white-space:pre;margin:0;overflow-x:auto}
.infra .p,.infra .n{color:var(--soft)}
.infra a{color:var(--ink);text-underline-offset:3px}

.foot{margin-top:72px;padding-top:14px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--soft)}
.foot a{color:var(--ink);text-decoration:none}
.foot a:hover{text-decoration:underline;text-underline-offset:3px}

@media(max-width:899px){
 .page{padding:25px 16px 20px}
 .head .home{font-size:18px}
 .head nav{gap:14px;font-size:13px;flex-wrap:wrap}
 .lede{font-size:23px;margin-top:44px}
 section{margin-top:52px}
 .row,.tools .row{grid-template-columns:minmax(0,1fr) auto;column-gap:12px}
 .branch{grid-column:1;grid-row:1}
 .count{grid-column:2;grid-row:1}
 .body{grid-column:1/-1;margin-top:8px}
 .host{display:block;margin:2px 0 0}
 .infra{font-size:10.5px}
}
@media(prefers-reduced-motion:reduce){h3 a{transition:none}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
/* One site: the name holds its place between here and the homepage (home.css names its h1 site-name too). */
.head .home{view-transition-name:site-name}
@media(prefers-reduced-motion:no-preference){@view-transition{navigation:auto}::view-transition-group(site-name){animation-duration:.26s;animation-timing-function:cubic-bezier(.16,1,.3,1)}::view-transition-old(root),::view-transition-new(root){animation-duration:.18s}}