/* bitshed.dev. The dor.ky design system in a warmer key: same structure, same type scale, same hairline rules, different ground. Two schemes ship, and which one is live is a field on the brand global that the layout writes onto as data-scheme. Timber the default. Brown-black and sawn pine. Commits to the metaphor, and lets the logo's amber read as the material the page is made of rather than as an accent sitting on a neutral. Ember dor.ky's own graphite and paper, with the accent moved from green to amber. Only the hue differs from dor.ky. Every block below is qualified by scheme, so the two sets are mutually exclusive and cannot tie on specificity whichever order they are read in. The bare :root carries a complete set, so no token is ever undefined. */ :root{ /* Row hover: a tint of the ink rather than a raised surface, so it lifts without glaring on the paper theme. */ --row-hover:color-mix(in srgb, var(--ink) 5%, transparent); --wash:color-mix(in srgb, var(--accent) 14%, var(--bg)); /* Timber, dark. Also the fallback set. */ --bg:#100D0A; --panel:#191410; --raise:#211A13; --ink:#EFE9E1; --mid:#D3C9BC; --faint:#B0A492; --rule:#2A221B; --accent:#E8A33D; --accent-ink:#F2BE72; --warn:#8FB67F; --logo-ink:#100D0A; /* Fixed by the logo, not by the scheme. The shed is amber on every ground; only the ink it is drawn with follows the theme, which is what lets one mark serve both instead of shipping a dark and a light export. */ --logo-amber:#F59E0B; --logo-amber-dark:#D97706; --logo-grass:#4F8A45; --logo-paper:#FFFFFF; --display:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif; --body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --measure:68ch; } /* Timber, light. Sawn pine rather than writing paper. The accent darkens to #8A4F0C because the logo's #F59E0B is about 2.2:1 on a ground this pale and is unreadable as text; the bright amber stays on the mark and the fills. */ :root:not([data-scheme="ember"])[data-theme="light"]{ --bg:#F4EDE2; --panel:#EBE2D3; --raise:#FFFBF3; --ink:#241C12; --mid:#4A3F31; --faint:#6E6152; --rule:#DCD0BC; --accent:#8A4F0C; --accent-ink:#6B3D08; --warn:#3F6B33; --logo-ink:#241C12; } @media (prefers-color-scheme:light){:root:not([data-scheme="ember"]):not([data-theme="dark"]){ --bg:#F4EDE2; --panel:#EBE2D3; --raise:#FFFBF3; --ink:#241C12; --mid:#4A3F31; --faint:#6E6152; --rule:#DCD0BC; --accent:#8A4F0C; --accent-ink:#6B3D08; --warn:#3F6B33; --logo-ink:#241C12;}} /* Ember, dark. dor.ky's graphite verbatim. */ :root[data-scheme="ember"]{ --bg:#0C0F10; --panel:#141A1B; --raise:#1B211F; --ink:#E9EDEB; --mid:#D0D5D3; --faint:#B4BAB7; --rule:#212829; --accent:#F0A63E; --accent-ink:#F7C176; --warn:#7FC3A8; --logo-ink:#0C0F10; } /* Ember, light. dor.ky's paper verbatim. */ :root[data-scheme="ember"][data-theme="light"]{ --bg:#F6F4EE; --panel:#EFEDE5; --raise:#FFFEFB; --ink:#19211D; --mid:#414743; --faint:#626A63; --rule:#D8DCD6; --accent:#9A5B09; --accent-ink:#7A4707; --warn:#156149; --logo-ink:#19211D; } @media (prefers-color-scheme:light){:root[data-scheme="ember"]:not([data-theme="dark"]){ --bg:#F6F4EE; --panel:#EFEDE5; --raise:#FFFEFB; --ink:#19211D; --mid:#414743; --faint:#626A63; --rule:#D8DCD6; --accent:#9A5B09; --accent-ink:#7A4707; --warn:#156149; --logo-ink:#19211D;}} *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:600;letter-spacing:-.03em;text-wrap:balance} /* titles and wordmarks take the display face; everything else is body */ .bar b{font-family:var(--display)} .pkg .nm{font-family:var(--mono)} p,ul,ol,figure,pre{margin:0} img{max-width:100%} :focus-visible{outline:2px solid var(--accent);outline-offset:3px} .wrap{max-width:960px;margin:0 auto;padding:0 26px} .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)} .tnum{font-variant-numeric:tabular-nums} .skip{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .skip:focus-visible{position:fixed;width:auto;height:auto;clip-path:none;left:12px;top:12px;background:var(--accent);color:var(--bg);font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:8px 12px;z-index:20} .tt{display:inline-flex;align-items:center;background:none;border:0;color:var(--mid);padding:0;cursor:pointer} .tt svg{width:15px;height:15px} .tt:hover{color:var(--accent)} /* ---------------- top bar ---------------- */ /* One nav link, so there is no hamburger here: the row still fits at 320px where dor.ky's four links do not. */ .bar{display:flex;align-items:center;gap:14px 24px;flex-wrap:wrap;padding:18px 0;border-bottom:1px solid var(--rule)} .bar .id{display:flex;align-items:center;gap:10px;min-width:0} .bar .mark{width:23px;height:27px;flex:none;display:block} .bar .wm{display:inline-flex;align-items:baseline;gap:5px;min-width:0} /* Lowercased here rather than in the global, so the name stays capitalised in page titles and share cards while the lockup matches the mark. */ .bar b{font-size:14.5px;letter-spacing:-.01em;text-transform:lowercase} .bar .tld{font-family:var(--display);font-weight:600;font-size:14.5px;letter-spacing:-.01em;color:var(--faint)} /* The separator between the two halves of the wordmark, as drawn in the lockup: the logo's amber, not the theme accent. */ .dot{width:6px;height:6px;flex:none;border-radius:50%;background:var(--logo-amber);align-self:center} .bar .role{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--mid)} .bar nav{display:flex;gap:20px;align-items:center;font-size:14px;color:var(--mid);margin-left:auto} .bar nav a:hover{color:var(--accent)} .bar .ctl{display:flex;align-items:center;gap:18px;flex:none} /* ---------------- page head ---------------- */ .head{padding:52px 0 34px} .head h1{font-size:clamp(29px,4.1vw,42px);line-height:1.07;max-width:38ch} .head h1 em{font-style:normal;color:var(--accent)} .head p{color:var(--mid);font-size:16.5px;line-height:1.62;margin-top:20px;text-wrap:pretty} .head p.narrow{max-width:66ch} .head.short{padding:44px 0 26px} /* ---------------- section heads ---------------- */ .sec{padding:38px 0 0} .sec.gap{padding-top:72px} .sechead{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding-bottom:10px;border-bottom:1px solid var(--rule)} .sechead a{color:var(--accent)} /* ---------------- project rows ---------------- */ /* Same row as dor.ky's package list: a mono name, a one line summary and a right hand meta column that collapses under the name on a phone. */ .pkgs{display:flex;flex-direction:column} .pkg{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:baseline;padding:13px 12px;margin:0 -12px;border-bottom:1px solid var(--rule)} .pkg:hover{background:var(--row-hover)} .pkg .nm{font-family:var(--mono);font-size:13.5px;letter-spacing:-.01em;color:var(--ink)} .pkg:hover .nm{color:var(--accent)} .pkg .ds{grid-column:1;font-size:14px;color:var(--mid);margin-top:4px} .pkg .st{font-family:var(--mono);font-size:11px;color:var(--faint);text-align:right;font-variant-numeric:tabular-nums} .pkg .meta{grid-column:2;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:baseline;gap:4px 16px} .pkg .meta .st{min-width:74px} .pkg .nm em{font-style:normal;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--warn);border:1px solid color-mix(in srgb, var(--warn) 45%, transparent);padding:2px 6px;margin-left:8px} @media (max-width:640px){.pkg{grid-template-columns:minmax(0,1fr)}.pkg .meta{grid-column:1;justify-content:flex-start}.pkg .meta .st{text-align:left;min-width:0}} /* Card grid: the same rows laid out across. The 1px gap over a rule coloured background draws the hairlines, so the grid needs no borders of its own. */ .pkgs.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:14px} .cards .pkg{display:flex;flex-direction:column;gap:6px;background:var(--panel);border-bottom:0;margin:0;padding:15px 16px} .cards .pkg:hover{background:var(--raise)} .cards .pkg .ds{margin-top:0;flex:1} .cards .pkg .meta{grid-column:auto;justify-content:flex-start;gap:4px 14px;margin-top:2px} .cards .pkg .meta .st{text-align:left;min-width:0} @media (max-width:640px){.pkgs.cards{grid-template-columns:minmax(0,1fr)}} /* Empty project list. A bordered panel rather than a card, because one card in a two column grid reads as a layout that failed. */ .empty{margin-top:14px;padding:15px 16px;border:1px solid var(--rule);background:var(--panel);font-size:14.5px;color:var(--mid)} .osnote{margin-top:14px;font-size:14.5px;color:var(--mid);max-width:66ch} .osnote.wide{max-width:none} .osnote b{color:var(--ink);font-weight:600} .osnote a{color:var(--accent)} /* ---------------- band ---------------- */ .band{margin-top:34px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)} .band div{background:var(--panel);padding:16px 18px} .band h4{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:400;margin-bottom:7px} .band p{color:var(--mid);font-size:14.5px;line-height:1.5} .band p b{color:var(--ink);font-weight:600} .band a{color:var(--accent)} /* ---------------- prose ---------------- */ /* The one rich text field on the site is the homepage intro, so this covers paragraphs, lists and links and nothing else. */ .prose{font-size:17px;line-height:1.68;max-width:var(--measure)} .prose > p{margin-top:20px} .prose > p:first-child{margin-top:0} .prose h2{font-size:19px;letter-spacing:-.025em;margin:38px 0 0} .prose h2 + p{margin-top:12px} .prose ul{margin-top:16px;padding-left:20px;color:var(--ink)} .prose li{margin-top:7px} .prose strong{font-weight:600} .prose code{ font-family:var(--mono);font-size:.85em;background:var(--wash);color:var(--accent-ink); padding:2px 6px;border:1px solid color-mix(in srgb, var(--accent) 28%, transparent); white-space:nowrap; } .prose a{color:var(--accent);border-bottom:1px solid var(--rule)} .prose a:hover{border-color:var(--accent)} /* ---------------- footer ---------------- */ .foot{margin-top:38px;padding:18px 0 56px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:10.5px;color:var(--mid)} .foot .links{display:flex;gap:16px;flex-wrap:wrap} .foot a:hover{color:var(--accent)} /* ---------------- responsive ---------------- */ @media (max-width:820px){.band{grid-template-columns:1fr}} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}