@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --paper:#ede9df;
  --ink:#151515;
  --acid:#d8ff39;
  --muted:#737169;
  --line:rgba(21,21,21,.22);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Manrope,Arial,sans-serif}
a{color:inherit}
.noise{position:fixed;inset:0;pointer-events:none;opacity:.1;z-index:20;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.26'/%3E%3C/svg%3E")}
.site-head{display:flex;justify-content:space-between;align-items:center;padding:26px 4vw;border-bottom:1px solid var(--line);font-family:'DM Mono',monospace;font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none}.brand-mark{display:grid;place-items:center;width:44px;height:44px;background:var(--ink);color:var(--paper);font-size:11px;transform:rotate(-3deg)}.brand-name{font-weight:500}.head-note{color:var(--muted)}
main{padding:0 4vw 80px}.intro{min-height:48vh;display:grid;align-content:center;max-width:1050px;padding:70px 0 50px}.eyebrow{font:500 12px 'DM Mono',monospace;letter-spacing:.12em;text-transform:uppercase;margin:0 0 18px}.intro h1{font-size:clamp(52px,9vw,136px);line-height:.83;letter-spacing:-.065em;margin:0;font-weight:800}.intro h1 em{font-style:normal;color:transparent;-webkit-text-stroke:2px var(--ink)}.intro-copy{max-width:590px;margin:34px 0 0 34%;font-size:clamp(16px,1.6vw,21px);line-height:1.5;color:#3e3d38}
.project-stage{margin-top:20px}.section-kicker{display:flex;justify-content:space-between;border-top:1px solid var(--ink);padding:12px 0 22px;font:500 12px 'DM Mono',monospace;letter-spacing:.12em}.project-list{display:flex;flex-direction:column;gap:10px}.project-card{position:relative;display:grid;grid-template-columns:90px 1fr 90px;align-items:center;min-height:150px;padding:18px 26px;text-decoration:none;border:1px solid var(--ink);background:transparent;overflow:hidden;transition:transform .25s ease,color .25s ease}.project-card::before{content:"";position:absolute;inset:0;background:var(--ink);transform:translateY(103%);transition:transform .35s cubic-bezier(.2,.8,.2,1);z-index:0}.project-card>*{position:relative;z-index:1}.project-card:hover{color:var(--paper);transform:translateX(8px)}.project-card:hover::before{transform:translateY(0)}.project-no{font:400 13px 'DM Mono',monospace;align-self:start;margin-top:7px}.project-text{display:flex;flex-direction:column;gap:8px}.project-text strong{font-size:clamp(36px,6.3vw,96px);line-height:.9;letter-spacing:-.055em;text-transform:uppercase}.project-text small{font:400 13px 'DM Mono',monospace;letter-spacing:.03em;color:var(--muted)}.project-card:hover small{color:#aaa79d}.project-arrow{justify-self:end;font-size:clamp(34px,4vw,64px);transition:transform .25s ease}.project-card:hover .project-arrow{transform:rotate(45deg)}
.empty-card{border:1px dashed var(--ink);padding:60px;text-align:center;font-family:'DM Mono',monospace}
footer{display:flex;justify-content:space-between;padding:24px 4vw;border-top:1px solid var(--line);font:400 11px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.08em}footer a{text-decoration:none}

/* admin */
.admin-body{background:#121212;color:#f2efe7;min-height:100vh}.admin-wrap{width:min(1100px,92vw);margin:0 auto;padding:45px 0 90px}.admin-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px}.admin-top h1{margin:0;font-size:clamp(32px,5vw,64px);letter-spacing:-.04em}.admin-top nav{display:flex;gap:10px}.btn,.admin-body button{border:1px solid #777;background:transparent;color:#f2efe7;padding:11px 15px;font:500 12px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.05em;text-decoration:none;cursor:pointer}.btn:hover,.admin-body button:hover{background:#f2efe7;color:#121212}.btn-danger:hover{background:#ff5d5d;border-color:#ff5d5d;color:#111}.panel{border:1px solid #3c3c3c;padding:24px;margin-bottom:30px}.panel h2{margin:0 0 20px;font-size:19px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-grid .wide{grid-column:1/-1}.admin-body label{display:block;font:400 11px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.06em;margin-bottom:7px;color:#aaa}.admin-body input{width:100%;background:#1c1c1c;color:#fff;border:1px solid #454545;padding:13px 14px;font:16px Manrope,Arial,sans-serif}.project-admin-list{display:flex;flex-direction:column;gap:8px}.project-row{display:grid;grid-template-columns:42px 1fr 1fr auto;gap:14px;align-items:center;border:1px solid #3c3c3c;padding:13px;background:#171717}.project-row.dragging{opacity:.45}.drag-handle{font-size:23px;color:#777;cursor:grab;user-select:none}.row-title strong{display:block;font-size:16px}.row-title small,.row-url{font:400 11px 'DM Mono',monospace;color:#888;overflow-wrap:anywhere}.flash{padding:13px 15px;background:#d8ff39;color:#111;margin-bottom:20px;font:500 12px 'DM Mono',monospace}.login-box{width:min(430px,92vw);margin:10vh auto;border:1px solid #4a4a4a;padding:30px}.login-box h1{font-size:38px;line-height:1;margin:0 0 25px}.login-box input{margin-bottom:14px}.hint{color:#8d8d8d;font-size:13px;line-height:1.5}.error{background:#ff6d6d;color:#111;padding:12px;margin-bottom:15px}
@media(max-width:720px){.head-note{display:none}.site-head{padding:18px 20px}main{padding:0 20px 55px}.intro{min-height:42vh;padding-top:50px}.intro h1 em{-webkit-text-stroke:1px var(--ink)}.intro-copy{margin-left:0;margin-top:25px}.project-card{grid-template-columns:44px 1fr 45px;min-height:116px;padding:15px 13px}.project-text strong{font-size:clamp(28px,10vw,52px)}.project-text small{font-size:10px}.project-arrow{font-size:30px}.project-card:hover{transform:none}footer{padding:20px}.admin-wrap{width:92vw}.admin-top{align-items:flex-start;gap:20px;flex-direction:column}.form-grid{grid-template-columns:1fr}.project-row{grid-template-columns:32px 1fr auto}.row-url{display:none}}
