/* ══════════════════════════════════════════════════════════════════════ krukah.com — cyanotype. A line drawing on blueprint stock. Two prints of the same drawing. Dark is the cyanotype: white lines on blue stock, the atlas blueprint palette unchanged. Light is its negative, a whiteprint: blue lines on white paper. Every colour resolves from the tokens below, so the plates and the ruling invert with everything else. ══════════════════════════════════════════════════════════════════════ */ :root{ /* dark is the default: a cyanotype print, white lines on blue stock */ --bg:#0a2a50; --bg2:#082444; --panel:#072040; --panel2:#0a2749; --line:#265f95; --line2:#3a76b0; --grid:#0e3461; --grid2:#124274; --ink:#f2f8ff; --dim:#b3d4ee; --faint:#7ba7cc; --hot:#ffe0a0; --green:#c9f5cf; --violet:#e2d3ff; --sel-bg:#2f6ea6; --sel-fg:#ffffff; --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; /* Prose is the one place the blueprint bends. Set --prose to var(--mono) for an all-monospace site; everything else keeps working. */ --prose:"IBM Plex Serif",Georgia,"Times New Roman",serif; --wrap:50rem; /* page gutter to gutter */ --measure:34rem; /* running text, roughly 62 characters */ } /* Light is the negative of the same print: blue lines on white paper, the way a whiteprint reverses a blueprint. One block, because the script in stamps data-theme from either the saved choice or the OS. */ :root[data-theme="light"]{ --bg:#f4f7fb; --bg2:#eaf1f8; --panel:#e9f0f8; --panel2:#eff4fa; --line:#7ea9cd; --line2:#4d7fae; --grid:#e7eef6; --grid2:#dae5f0; --ink:#0a2a50; --dim:#2f5a86; --faint:#4c7196; --hot:#96590c; --green:#1c6f47; --violet:#5f47a0; --sel-bg:#bcd6ee; --sel-fg:#0a2a50; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--mono); font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased; } ::selection{background:var(--sel-bg); color:var(--sel-fg)} img{max-width:100%; height:auto} a{color:inherit} :focus-visible{outline:1px solid var(--hot); outline-offset:2px} main{position:relative; overflow-x:clip} .wrap{position:relative; max-width:var(--wrap); margin:0 auto; padding:0 1.5rem} .skip{position:absolute; left:-9999px} .skip:focus{left:1rem; top:.6rem; z-index:10; background:var(--bg2); border:1px solid var(--hot); padding:.4rem .7rem; color:var(--ink)} /* the drawing grid: fine rules every 32px, heavier ones every 128px, the way a sheet of drafting stock is ruled. The sheet is registered to the content column, not to the window, so a rule falls in the same place relative to the layout at every width. The ruled layer bleeds 3200px past the column either side — a whole number of both pitches (100 x 32, 25 x 128) — so the lattice stays in phase, and main clips the overhang. Percentages cannot do this: in background-position their basis is (area - image), which is zero for a gradient with no background-size, and vw would count the scrollbar. */ .sheet{position:absolute; top:0; bottom:0; left:0; right:0; max-width:var(--wrap); margin-inline:auto; pointer-events:none} .field{ position:absolute; top:0; bottom:0; left:-3200px; right:-3200px; background-image: repeating-linear-gradient(0deg,var(--grid2) 0 1px,transparent 1px 128px), repeating-linear-gradient(90deg,var(--grid2) 0 1px,transparent 1px 128px), repeating-linear-gradient(0deg,var(--grid) 0 1px,transparent 1px 32px), repeating-linear-gradient(90deg,var(--grid) 0 1px,transparent 1px 32px); -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,#0009 86%,transparent 100%); mask-image:linear-gradient(180deg,#000 0%,#000 62%,#0009 86%,transparent 100%); } /* ── plates ───────────────────────────────────────────────────────────── Every post carries its own line figure. Strokes do not scale with the drawing, so one plate reads the same at 44px and at 200px. */ .plate{display:block; width:44px; flex:0 0 auto} .plate svg{display:block; width:100%; height:auto; overflow:visible} .plate .p-l,.plate .p-f,.plate .p-h,.plate .p-j{ fill:none; stroke-width:1; vector-effect:non-scaling-stroke; transition:stroke 140ms; } .plate .p-l{stroke:var(--line)} .plate .p-f{stroke:var(--faint)} .plate .p-h{stroke:var(--hot); stroke-width:1.3} .plate .p-j{stroke:var(--hot); stroke-width:.9} .plate .p-d{fill:var(--hot); stroke:none} .plate .p-s{fill:var(--line); stroke:var(--line); stroke-width:1; vector-effect:non-scaling-stroke} .plate .p-w{stroke-width:2} .plate--lg{width:150px} .plate--lg .p-l,.plate--lg .p-f{stroke-width:1.1} .plate--lg .p-h{stroke-width:1.5} .plate--lg .p-j{stroke-width:1} .plate--lg .p-w{stroke-width:3} /* ── top bar ──────────────────────────────────────────────────────────── */ .top{position:relative; z-index:2} .top .wrap{display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; padding-top:1.1rem; padding-bottom:1.1rem; border-bottom:1px solid var(--line); font-size:12px; letter-spacing:.05em} .top a{text-decoration:none; color:var(--dim); border-bottom:1px solid transparent; padding-bottom:2px} .top a:hover{color:var(--hot); border-bottom-color:var(--hot)} .top__me{color:var(--faint)} .top__me a{color:var(--faint)} .top nav{display:flex; gap:1.4rem; align-items:center} .top__flip{appearance:none; background:none; border:0; cursor:pointer; color:var(--dim); padding:0; display:flex; align-items:center; line-height:0} .top__flip svg{display:block; width:14px; height:14px} .top__flip:hover{color:var(--hot)} .top__flip:focus-visible{outline:1px solid var(--hot); outline-offset:3px} .top nav a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--line2)} /* ── hero ─────────────────────────────────────────────────────────────── */ .hero{position:relative; padding:3rem 0 2.5rem} .hero__word{ margin:0; font-weight:700; font-size:clamp(40px,7vw,64px); line-height:.88; letter-spacing:-.035em; color:var(--ink); } .hero__say{margin:1.6rem 0 0; max-width:var(--measure); font-size:16px; line-height:1.7; color:var(--dim)} .hero__say a{color:var(--hot); text-decoration:none; border-bottom:1px solid var(--line2)} .hero__say a:hover{border-bottom-color:var(--hot)} .hero__meta{display:flex; gap:1.5rem; flex-wrap:wrap; margin:1.5rem 0 0; font-size:11px; letter-spacing:.08em; color:var(--faint)} /* ── section rules ────────────────────────────────────────────────────── */ .band{margin:3rem 0 1rem; scroll-margin-top:1.5rem; display:flex; align-items:center; gap:.75rem; font-size:11px; font-weight:600; letter-spacing:.16em; color:var(--faint)} .band::before{content:""; width:1px; height:8px; background:var(--line2); flex:0 0 auto} .band::after{content:""; flex:1; height:8px; border-bottom:1px solid var(--line); border-right:1px solid var(--line2)} .band a{color:var(--faint); text-decoration:none; letter-spacing:.08em} .band a:hover{color:var(--hot)} /* ── post list ────────────────────────────────────────────────────────── */ .roll{list-style:none; margin:0; padding:0; background:var(--bg)} .roll__item{border-bottom:1px solid var(--line)} .roll__item:first-child{border-top:1px solid var(--line)} .roll__link{ display:grid; gap:.25rem 1.1rem; align-items:center; padding:.9rem .5rem; text-decoration:none; color:var(--ink); grid-template-columns:44px 1fr; grid-template-areas:"plate title" ". meta"; } @media(min-width:640px){ .roll__link{grid-template-columns:44px 4.5rem 1fr auto; grid-template-areas:"plate when title tag"; align-items:center} } .roll__link .plate{grid-area:plate} .roll__when{grid-area:when; font-size:11px; color:var(--faint); font-variant-numeric:tabular-nums; white-space:nowrap} .roll__title{grid-area:title; font-size:15.5px; line-height:1.35} .roll__tag{grid-area:tag; font-size:10.5px; letter-spacing:.09em; color:var(--faint); white-space:nowrap} .roll__meta{grid-area:meta; display:flex; gap:1rem; font-size:11px; color:var(--faint); letter-spacing:.06em} @media(min-width:640px){ .roll__meta{display:none} } @media(max-width:639px){ .roll__when,.roll__tag{display:none} } .roll__link:hover{background:var(--panel)} .roll__link:hover .roll__title{color:var(--hot)} .roll__link:hover .p-l{stroke:var(--line2)} .roll__link:hover .p-f{stroke:var(--dim)} .roll__link:focus-visible{outline:1px solid var(--hot); outline-offset:-1px} .roll__item.is-out{display:none} /* ── tag filter ───────────────────────────────────────────────────────── */ .sift{display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; padding:0 0 1rem} .sift button{ appearance:none; background:none; cursor:pointer; font:inherit; font-size:11px; letter-spacing:.09em; color:var(--faint); border:1px solid var(--line); padding:.3rem .65rem; } .sift button:hover{color:var(--ink); border-color:var(--line2)} .sift button[aria-pressed="true"]{color:var(--bg); background:var(--dim); border-color:var(--dim)} .sift__count{margin-left:auto; font-size:10.5px; letter-spacing:.08em; color:var(--faint); font-variant-numeric:tabular-nums} /* ── empty writing register ───────────────────────────────────────────── */ .hush{position:relative; background:var(--bg); border:1px solid var(--line); padding:1.5rem 1.35rem; color:var(--faint); font-size:13.5px; line-height:1.85} .hush::before,.hush::after{content:""; position:absolute; width:12px; height:12px; border:1px solid var(--line2)} .hush::before{top:-1px; left:-1px; border-right:0; border-bottom:0} .hush::after{bottom:-1px; right:-1px; border-left:0; border-top:0} .hush p{margin:0; max-width:var(--measure)} .hush a{color:var(--hot); text-decoration:none; border-bottom:1px solid var(--line2)} .hush a:hover{border-bottom-color:var(--hot)} /* ── project cells ───────────────────────────────────────────────────────── */ .cells{display:grid; gap:1rem; grid-template-columns:1fr; grid-auto-rows:1fr} @media(min-width:640px){ .cells{grid-template-columns:1fr 1fr} } .cell{ position:relative; display:grid; gap:.15rem 1rem; align-items:start; text-decoration:none; background:var(--bg); border:1px solid var(--line); padding:1.1rem; grid-template-columns:52px 1fr; grid-template-areas:"plate name" "plate est" "say say"; } .cell .plate{grid-area:plate; width:52px; align-self:center} .cell__name{grid-area:name; margin:0; font-size:14px; font-weight:600; color:var(--hot); align-self:end} .cell__est{grid-area:est; font-size:10.5px; letter-spacing:.09em; color:var(--faint); align-self:start} .cell__say{grid-area:say; margin:.85rem 0 0; font-size:13.5px; line-height:1.65; color:var(--dim)} .cell::before,.cell::after{content:""; position:absolute; width:12px; height:12px; border:1px solid var(--line2)} .cell::before{top:-1px; left:-1px; border-right:0; border-bottom:0} .cell::after{bottom:-1px; right:-1px; border-left:0; border-top:0} .cell:hover{border-color:var(--hot); background:var(--panel)} .cell:hover::before,.cell:hover::after{border-color:var(--hot)} .cell:hover .p-l{stroke:var(--line2)} .cell:hover .p-f{stroke:var(--dim)} /* ── post page ────────────────────────────────────────────────────────── */ .post__head{padding:3rem 0 2rem; border-bottom:1px solid var(--line); display:grid; gap:1.75rem; grid-template-columns:1fr} @media(min-width:720px){ .post__head{grid-template-columns:150px 1fr; gap:2.5rem; align-items:center} } .post__title{margin:0; font-family:var(--prose); font-weight:600; font-size:clamp(27px,4.4vw,40px); line-height:1.12; letter-spacing:-.015em; text-wrap:balance} .post__sub{margin:.9rem 0 0; font-size:14px; color:var(--dim); line-height:1.6; max-width:var(--measure)} .post__meta{display:flex; gap:1.25rem; flex-wrap:wrap; margin:1.1rem 0 0; font-size:11px; letter-spacing:.08em; color:var(--faint); font-variant-numeric:tabular-nums} .post__meta a{color:var(--faint); text-decoration:none; border-bottom:1px dashed var(--line2)} .post__meta a:hover{color:var(--hot)} .prose{font-family:var(--prose); font-size:17.5px; line-height:1.72; max-width:var(--measure); padding:2.5rem 0 0; color:var(--ink)} .prose > * + *{margin-top:1.15rem} .prose p{margin:0} .prose a{color:var(--hot); text-decoration:none; border-bottom:1px solid var(--line2)} .prose a:hover{border-bottom-color:var(--hot)} .prose h2,.prose h3{font-family:var(--mono); font-weight:600; line-height:1.3; letter-spacing:-.005em; margin-top:2.5rem} .prose > :first-child{margin-top:0} .prose h2{font-size:17px} .prose h3{font-size:15px; color:var(--dim)} .prose ul,.prose ol{margin-top:1.15rem; padding-left:1.4rem} .prose li + li{margin-top:.4rem} .prose li::marker{color:var(--faint)} .prose blockquote{margin:1.6rem 0; padding:0 0 0 1.1rem; border-left:1px solid var(--hot); color:var(--dim); font-style:italic} .prose blockquote p + p{margin-top:.8rem} .prose hr{border:0; border-top:1px solid var(--line); margin:2.25rem 0} .prose code{font-family:var(--mono); font-size:.84em; color:var(--green); background:var(--panel); padding:.1em .35em; border:1px solid var(--line)} .prose pre{margin:1.6rem 0; padding:1rem 1.1rem; overflow-x:auto; background:var(--panel); border:1px solid var(--line); font-family:var(--mono); font-size:13px; line-height:1.62} .prose pre code{background:none; border:0; padding:0; color:var(--ink); font-size:inherit} .prose figure{margin:2rem 0} .prose figure .plate{width:min(230px,60%); margin:0 auto} .prose figcaption{margin-top:.9rem; font-family:var(--mono); font-size:11.5px; letter-spacing:.05em; color:var(--faint); text-align:center} .prose table{width:100%; border-collapse:collapse; font-family:var(--mono); font-size:13px; margin:1.6rem 0} .prose th,.prose td{text-align:left; padding:.5rem .6rem; border-bottom:1px solid var(--line)} .prose th{font-size:10px; letter-spacing:.12em; color:var(--faint); border-bottom-color:var(--line2)} .prose .footnotes{font-size:14px; color:var(--dim)} .after{display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin-top:3.5rem; padding-top:1.1rem; border-top:1px solid var(--line); font-size:12px} .after a{color:var(--dim); text-decoration:none; max-width:20rem} .after a:hover{color:var(--hot)} .after b{display:block; font-weight:400; font-size:10px; letter-spacing:.12em; color:var(--faint); margin-bottom:.3rem} .after__next{text-align:right; margin-left:auto} /* ── register pages ───────────────────────────────────────────────────── /about/ is a list of facts, not an essay, so it is set the way the rest of the site sets data: mono, full width, headings as banded dimension rules, entries on hairlines. Posts keep the prose treatment above. */ .hero--reg{display:grid; gap:2rem; grid-template-columns:1fr; align-items:center} @media(min-width:720px){ .hero--reg{grid-template-columns:minmax(0,1fr) 144px; gap:2.5rem} } .hero--reg .plate{width:144px; justify-self:start} @media(min-width:720px){ .hero--reg .plate{justify-self:end} } .prose--reg{max-width:none; font-family:var(--mono); font-size:14px; padding-top:1.5rem} .prose--reg h2{display:flex; align-items:center; gap:.75rem; margin:2.75rem 0 0; font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--faint)} .prose--reg h2::before{content:""; flex:0 0 auto; width:1px; height:8px; background:var(--line2)} .prose--reg h2::after{content:""; flex:1; height:8px; border-bottom:1px solid var(--line); border-right:1px solid var(--line2)} .prose--reg ul{position:relative; list-style:none; margin:1rem 0 0; padding:0; background:var(--bg); border-left:1px solid var(--line); border-right:1px solid var(--line)} .prose--reg ul::before,.prose--reg ul::after{content:""; position:absolute; width:12px; height:12px; border:1px solid var(--line2)} .prose--reg ul::before{top:-1px; left:-1px; border-right:0; border-bottom:0} .prose--reg ul::after{bottom:-1px; right:-1px; border-left:0; border-top:0} .prose--reg li{margin:0; padding:.72rem 1rem; border-bottom:1px solid var(--line); line-height:1.5} .prose--reg li:first-child{border-top:1px solid var(--line)} .prose--reg li + li{margin-top:0} .prose--reg .ref{display:block; margin-top:.3rem; font-size:12px; color:var(--faint)} .prose--reg hr{margin:2.75rem 0 1.25rem} .prose--reg p{max-width:var(--measure); font-size:12.5px; line-height:1.85; color:var(--faint)} /* ── rouge ────────────────────────────────────────────────────────────── */ .highlight .c,.highlight .c1,.highlight .cm,.highlight .cs{color:var(--faint); font-style:italic} .highlight .k,.highlight .kd,.highlight .kn,.highlight .kp,.highlight .kr, .highlight .kt,.highlight .kc{color:var(--hot)} .highlight .s,.highlight .s1,.highlight .s2,.highlight .sb,.highlight .sc, .highlight .sd,.highlight .se,.highlight .sh,.highlight .si,.highlight .sx, .highlight .sr{color:var(--green)} .highlight .n,.highlight .na,.highlight .nb,.highlight .nc,.highlight .nf, .highlight .nn,.highlight .nv{color:var(--ink)} .highlight .m,.highlight .mi,.highlight .mf,.highlight .mh,.highlight .mo, .highlight .il{color:var(--violet)} .highlight .o,.highlight .ow,.highlight .p{color:var(--dim)} /* ── page prose (about, etc.) ─────────────────────────────────────────── */ .page__head{padding:3rem 0 0} .page__title{margin:0; font-family:var(--prose); font-weight:600; font-size:clamp(27px,4.4vw,38px); line-height:1.12; letter-spacing:-.015em} /* ── footer ───────────────────────────────────────────────────────────── */ .foot{margin-top:4rem} .foot .wrap{padding-bottom:3rem} .block{display:grid; grid-template-columns:repeat(2,1fr); border:1px solid var(--line2); background:var(--bg)} .block > div{padding:.55rem .8rem; min-width:0; border-right:1px solid var(--line); border-bottom:1px solid var(--line)} .block > div:nth-child(2n){border-right:0} .block > div:nth-last-child(-n+2){border-bottom:0} @media(min-width:640px){ .block{grid-template-columns:repeat(4,1fr)} .block > div{border-bottom:0} .block > div:nth-child(2n){border-right:1px solid var(--line)} .block > div:last-child{border-right:0} } .block dt{margin:0 0 .3rem; font-size:9px; letter-spacing:.14em; color:var(--faint)} .block dd{margin:0; font-size:11.5px; letter-spacing:.03em; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .block a{color:var(--hot); text-decoration:none} .block a:hover{text-decoration:underline} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important} }