*{margin:0;box-sizing:border-box}
:root{--g:1.5em;--m:'JetBrains Mono',monospace;--s:'Instrument Sans',sans-serif;--gray:oklch(0.5 0 0)}
.dusk{--f:oklch(0.9 0 0);--b:oklch(0.22 0 0);--a:oklch(0.7 0.2 130);--h:oklch(0.7 0.1 130)}
.dawn{--f:oklch(0.2 0 0);--b:oklch(0.78 0 0);--a:oklch(0.35 0.2 65);--h:oklch(0.35 0.3 65)}
body{font:1em/1.7 var(--s);max-width:80ch;margin:0 auto;padding:var(--g);color:var(--f);background:var(--b)}
a{color:var(--a);text-decoration:none}
a.plain{color:inherit}
p{margin-bottom:var(--g);text-align:justify;hyphens:auto}
.header-row{display:flex;align-items:center;margin-bottom:var(--g);padding-top:var(--g)}
.header-row p{margin-bottom:0}
#t{width:33px;height:18px;border-radius:9px;background:var(--a);border:0;padding:1.5px;cursor:pointer;transition:background .4s;display:flex;align-items:center;margin-left:auto;flex-shrink:0}
.knob{width:15px;height:15px;border-radius:50%;background:var(--b);transition:transform .2s,background .4s}
#t.on .knob{transform:translateX(15px)}
.divider{display:flex;align-items:center;gap:1ch;white-space:nowrap;letter-spacing:.3em;margin-bottom:var(--g);font:11px var(--m)}
.divider hr{flex:1;border:0;border-top:1px solid var(--f)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--g)/2);margin-bottom:var(--g)}
.grid:not(.cards) a{overflow:hidden;display:block}
.grid img{width:100%;aspect-ratio:1;object-fit:cover}
.grid a.sensitive{position:relative}
.grid a.sensitive .sensitive-orig{position:absolute;inset:0;opacity:0;transition:opacity 1s}
.grid a.sensitive:hover .sensitive-orig{opacity:1}
.card{display:flex;flex-direction:column;gap:.5em;border:1px solid var(--a);padding:24px 28px 28px;color:var(--f);transition:.2s}
.card:hover{border-color:var(--h)}
a:hover{color:var(--h)}
.card b{font:700 12px/1.4 var(--m)}
.desc{font-size:14px;color:var(--gray);line-height:1.65}
.badge{align-self:flex-start;font:10px var(--m);letter-spacing:.08em;text-transform:uppercase;color:var(--f);padding:4px 10px;border-radius:6px;background:oklch(from var(--gray) l c h / .125);margin-bottom:8px}
.date{font:11px var(--m);letter-spacing:.04em;color:var(--gray)}
.article-title{font:700 1em/1.5 var(--m);margin:var(--g) 0}
.cards.list{grid-template-columns:1fr}
.list .card.featured::after{content:"★ Featured";font:10px var(--m);letter-spacing:.08em;text-transform:uppercase;color:var(--a);margin-top:4px}
.full-img{width:100%;margin:var(--g) 0}
.contact-form{display:flex;flex-direction:column;gap:calc(var(--g)/2)}
.contact-form input,.contact-form textarea{width:100%;font:1em/1.7 var(--s);padding:10px 14px;border:1px solid oklch(from var(--gray) l c h / .3);background:oklch(from var(--gray) l c h / .06);color:var(--f);transition:.2s;resize:vertical}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:var(--gray);font:14px/1.7 var(--s)}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--a)}
.contact-form button{width:100%;font:11px var(--m);letter-spacing:.08em;text-transform:uppercase;color:var(--a);background:transparent;border:1px solid var(--a);padding:12px 28px;cursor:pointer;transition:.2s}
.contact-form button:hover{color:var(--h);border-color:var(--h)}
.contact-wrap{position:relative;margin-bottom:var(--g)}
.form-confirm{position:absolute;inset:-1px;display:none;flex-direction:column;align-items:center;justify-content:center;background:var(--b);z-index:1}
.form-confirm.show{display:flex}
.confirm-msg{font:11px var(--m);letter-spacing:.08em;text-transform:uppercase;color:var(--f);margin:0}
.confirm-close{position:absolute;top:0;right:0;background:none;border:none;color:var(--a);font-size:20px;cursor:pointer;padding:4px 8px;transition:.2s}
.confirm-close:hover{color:var(--h)}
#arrow{visibility:hidden}
.sub #arrow{visibility:visible}