:root{--accent:#5c9a63}
/* nate.glu: a personal homepage from the early 2000s (the look Nate picked, 2026-09-17). Fixed-width page on a tiled starfield, gradient title bars, beveled buttons,
   Verdana at 11px, a pixel font for labels, blue underlined links. Built by build_y2k.py. Colors can be overridden from theme.json "y2k". */
:root{--bg:#070b1f;--fg:#c8d2e0;--ink:#1b2430;--paper:#eef1f5;--white:#fff;--silver:#d4d0c8;--hi:#fff;--lo:#808080;--dk:#404040;--bar1:#0a246a;--bar2:#3a6ea5;--link:#0033cc;--visited:#551a8b;--rule:#9aa7b5;--mute:#5b6775;--lcd:#0c1a10;
  --pix:"Silkscreen","Courier New",monospace;--logo:"Pixelify Sans","Silkscreen","Courier New",monospace;--txt:Verdana,Geneva,Tahoma,sans-serif;--ser:Georgia,"Times New Roman",serif}
*{box-sizing:border-box}html{scroll-behavior:auto}
body{margin:0;color:var(--ink);font:11px/1.55 var(--txt);background-color:var(--bg);
  background-image:radial-gradient(1px 1px at 14px 22px,#fff 50%,transparent 51%),radial-gradient(1px 1px at 66px 94px,#bfd8ff 50%,transparent 51%),radial-gradient(1.6px 1.6px at 104px 38px,#fff 50%,transparent 51%),radial-gradient(1px 1px at 146px 126px,#9bbcff 50%,transparent 51%),radial-gradient(1px 1px at 32px 148px,#fff 50%,transparent 51%),radial-gradient(1.4px 1.4px at 92px 166px,#ffe9b0 50%,transparent 51%),radial-gradient(1px 1px at 170px 60px,#dfe9ff 50%,transparent 51%);
  background-size:184px 184px}
img{max-width:100%;height:auto;display:block}
a{color:var(--link);text-decoration:underline}a:visited{color:var(--visited)}a:hover{background:#ffff66;color:#c00}
a:focus-visible,#door:focus-visible{outline:1px dotted #000;outline-offset:2px}
sup.star{color:#c00;font-weight:bold;margin-left:2px}
.ic{width:16px;height:16px;flex:0 0 16px;display:inline-block;vertical-align:-3px}.ic.big{width:64px;height:64px;flex-basis:64px}

/* the page: 960 wide and centered, the way sites sat in a 1024x768 window. wide enough that the work shows at a real size */
.wrap{position:relative;z-index:1;width:960px;max-width:calc(100% - 16px);margin:14px auto 46px}
body.with-tower .wrap{margin-left:max(8px,calc((100vw - 960px - 340px)/2))}
.shell{background:var(--paper);border:2px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);box-shadow:0 0 0 1px #000,6px 6px 0 rgba(0,0,0,.55)}
.banner{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:16px 14px 10px;color:#fff;
  background:linear-gradient(90deg,var(--bar1),var(--bar2) 70%,#6f9fd0);border-bottom:1px solid #000;position:relative;overflow:hidden}
.banner:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 1px,transparent 1px 3px);pointer-events:none}
.mark{font:700 44px/1 var(--logo);color:#fff!important;text-decoration:none;text-shadow:2px 2px 0 #000,3px 3px 0 rgba(0,0,0,.35);letter-spacing:0;position:relative;display:inline-block}
.mark:hover{background:none;color:#ffff66!important}
.banner .sub{font:italic 12px var(--ser);color:#dbe7f7;position:relative;white-space:nowrap}
.tabs{display:flex;flex-wrap:wrap;gap:2px;padding:6px 8px 0;background:var(--silver);border-bottom:1px solid var(--lo)}
.tabs a{font:400 11px var(--pix);color:#000!important;text-decoration:none;padding:5px 12px 4px;background:#e4e1da;border:1px solid;border-color:var(--hi) var(--dk) transparent var(--hi);border-radius:4px 4px 0 0;position:relative;top:1px}
.tabs a:hover{background:#fff}.tabs a[aria-current=page]{background:var(--paper);font-weight:700;border-bottom-color:var(--paper);padding-bottom:6px;margin-top:-2px}
.ticker{display:flex;align-items:center;background:#000;color:#9f9;font:400 11px var(--pix);border-bottom:1px solid var(--lo);overflow:hidden}
.ticker .new{background:#c00;color:#fff;padding:3px 7px;flex:0 0 auto;animation:blink 1.2s steps(2,start) infinite}
.ticker .run{overflow:hidden;flex:1;white-space:nowrap}.ticker .track{display:inline-block;padding-left:100%;animation:run 38s linear infinite}
.ticker:hover .track{animation-play-state:paused}.ticker a{color:#9f9!important;text-decoration:none;padding:0 4px}.ticker a:hover{background:none;color:#ff6!important;text-decoration:underline}.ticker .dot{color:#393;padding:0 8px;font-size:8px}
@keyframes run{to{transform:translateX(-50%)}}@keyframes blink{to{visibility:hidden}}
.cols{display:grid;grid-template-columns:minmax(0,1fr) 176px;gap:10px;padding:10px;align-items:start}
.crumb{margin:0 0 8px;font-size:10px;color:var(--mute)}.crumb .lbl{font:400 10px var(--pix)}.crumb .sep{color:#999}

/* boxes with gradient title bars */
.box{background:var(--white);border:1px solid #000;margin:0 0 10px}
.bar{margin:0;display:flex;align-items:center;gap:6px;padding:3px 6px;font:700 11px var(--pix);color:#fff;background:linear-gradient(90deg,var(--bar1),var(--bar2));border-bottom:1px solid #000}
.box.main>.bar{font-size:13px;padding:5px 8px}.bar span{min-width:0;overflow-wrap:anywhere}.bar sup.star{color:#ff9}
.pad{padding:10px}.side .pad{padding:8px}
.bar2{margin:14px 0 8px;padding:2px 6px;font:700 11px var(--pix);background:var(--silver);border:1px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi)}.bar2:first-child{margin-top:0}
.intro{font:italic 14px/1.55 var(--ser);color:#2a3644;margin:0 0 10px;max-width:60ch}
.status{margin:10px -10px -10px;padding:3px 8px;background:var(--silver);border-top:1px solid var(--lo);font-size:10px;color:#333}

/* lists as an explorer "details" view */
ol{list-style:none;margin:0;padding:0}
.details{border:1px solid var(--lo);background:#fff}
.details li.hd{display:flex;gap:8px;padding:2px 6px 2px 28px;background:var(--silver);border-bottom:1px solid var(--lo);font:400 10px var(--pix);color:#222}
.details li.hd .t{flex:1}.details li.hd .k{flex:0 0 40%}
.details li a{display:flex;align-items:center;gap:6px;padding:4px 6px;text-decoration:none;color:var(--ink)}
.details li:nth-child(odd) a{background:#f4f7fb}
.details li a .t{flex:1;min-width:0;color:var(--link);text-decoration:underline}.details li a:visited .t{color:var(--visited)}
.details li a .k{flex:0 0 40%;color:var(--mute);font-size:10px}
.details li a:hover{background:var(--bar1);color:#fff}.details li a:hover .t,.details li a:hover .k{color:#fff}
.details+.people,.details+.details{margin-top:10px}
/* home: big icons */
.icons{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:8px 0 4px}
.icons li a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px;text-decoration:none;color:var(--ink);border:1px dotted transparent}
.icons li a .t{font:400 12px var(--pix);text-align:center;padding:1px 4px}
.icons li a:hover{background:none;border-color:#000}.icons li a:hover .t{background:var(--bar1);color:#fff}
/* placements: a grid of people */
.people{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.people li a{display:block;text-decoration:none;color:var(--ink);text-align:center}
.people .ph{display:block;aspect-ratio:1;border:1px solid #000;padding:3px;background:#fff;overflow:hidden}.people .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.people .t{display:block;margin-top:4px;color:var(--link);text-decoration:underline;font-weight:bold}.people .k{display:block;color:var(--mute);font-size:10px;line-height:1.3}
.people li a:hover{background:none}.people li a:hover .ph{border-color:#c00;box-shadow:0 0 0 1px #c00}
/* design wall: thumbnails with captions */
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.thumb{display:block;text-decoration:none;text-align:center;color:var(--ink)}
.thumb .ph{display:grid;place-items:center;aspect-ratio:1;border:1px solid var(--lo);background:#fff;padding:4px;overflow:hidden}.thumb .ph img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.thumb .t{display:block;margin-top:4px;font-size:11px;color:var(--link);text-decoration:underline;line-height:1.3}
.thumb .k{display:block;font-size:9px;color:var(--mute);line-height:1.3;margin-top:1px}
.thumb:hover{background:none}.thumb:hover .ph{border-color:#c00;box-shadow:0 0 0 1px #c00}
.stripes{display:block;width:100%;height:100%;min-height:26px;background:repeating-linear-gradient(45deg,#f5c400 0 12px,#111 12px 24px)}
.thumb.uc .ph{padding:0}
.uc-block{border:1px solid #000;margin:0 0 4px}.uc-block .stripes{height:34px;min-height:34px}.uc-block p{margin:0;padding:4px 8px;font:400 10px var(--pix);background:#111;color:#f5c400}
.profile.welcome .card{flex:0 0 140px;display:block}.profile.welcome .card:hover{background:#fff;border-color:#c00}.welcome .body p{font-size:13px}.welcome .more{margin:0;font-size:11px}

/* the design wall and the drops show three across, so the work reads at a real size */
.wall .thumbs,.thumbs.drops{grid-template-columns:repeat(3,1fr);gap:12px}.wall .thumb .t,.thumbs.drops .thumb .t{font-size:12px}
.thumbs.drops .ph img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;object-position:50% 25%}.thumbs.drops .ph{padding:3px}
/* home: what he does, then the work */
.role{margin:0 0 10px;font:italic 15px/1.4 var(--ser);color:#2a3644}
.picks{grid-template-columns:repeat(4,1fr);gap:10px}.picks .thumb .t{font-size:11px}
.selected .more,.welcome .more{margin:10px 0 0;font-size:11px}
figure.hero{margin:0 0 14px}figure.hero img{width:100%;height:auto;max-height:80vh;object-fit:cover;object-position:50% 30%}
.case .intro{font-size:15px;max-width:64ch}
/* a piece */
.kicker{margin:0 0 10px;font:400 10px var(--pix);color:var(--mute)}.kicker .sep{color:#aaa;padding:0 3px}
.figs{display:flex;flex-direction:column;gap:10px;margin:0 0 12px}
.figs.pair{display:grid;grid-template-columns:1fr 1fr;align-items:start}.figs.pair figure:has(video){grid-column:1/-1}
.figs:not(.pair) figure:not(.small) img{width:auto;height:auto;max-width:100%;max-height:92vh;margin:0 auto}
figure{margin:0;border:1px solid var(--lo);background:#fff;padding:5px;box-shadow:2px 2px 0 rgba(0,0,0,.18)}
figure a{display:block}figure a:hover{background:none}figure img,figure video{width:100%;height:auto;display:block}
.figs:has(figure.small){flex-direction:row;flex-wrap:wrap}figure.small{flex:1 1 calc(50% - 5px);max-width:calc(50% - 5px)}
figure.uc{padding:0}figure.uc .stripes{height:90px}figcaption{padding:4px 6px;font:400 10px var(--pix);background:#111;color:#f5c400}
.body p{margin:0 0 11px;font-size:13px;line-height:1.7;max-width:62ch}
table.meta{width:100%;border-collapse:collapse;margin:4px 0 10px;font-size:11px}
table.meta th{width:70px;text-align:left;vertical-align:top;font:400 10px var(--pix);color:#222;background:var(--silver);border:1px solid var(--lo);padding:4px 6px}
table.meta td{border:1px solid var(--lo);padding:4px 8px;background:#fafbfd}table.meta td a{display:inline-block;margin-right:12px}table.meta td a:before{content:"\00bb\00a0";color:#c00}table.meta td.plain a{margin-right:0}table.meta td.plain a:before{content:none}
.bar2.gap{margin-top:16px}
.pn{display:flex;justify-content:space-between;gap:8px;margin-top:6px}.pn .btn{max-width:48%}
.profile{display:flex;gap:12px;align-items:flex-start}.profile .card{flex:0 0 190px;border:1px solid #000;background:#fff;padding:4px}.profile .card p{margin:6px 2px 2px;font-size:11px;line-height:1.5}.profile .on{color:var(--accent)}

/* sidebar bits */
.btn{display:block;margin:0 0 5px;padding:4px 6px;text-align:center;text-decoration:none;color:#000!important;font:400 10px var(--pix);background:var(--silver);border:2px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btn:last-child{margin-bottom:0}.btn:hover{background:#e9e6df}.btn:active{border-color:var(--dk) var(--hi) var(--hi) var(--dk)}
.lcd{background:var(--lcd);border:2px solid;border-color:var(--dk) var(--hi) var(--hi) var(--dk);padding:6px 4px;text-align:center;color:#7dff9a;font:700 20px/1 var(--pix);text-shadow:0 0 6px rgba(125,255,154,.55);letter-spacing:1px}
.mail{display:flex;gap:6px;align-items:flex-start;font-size:10px;overflow-wrap:anywhere;word-break:break-all}.mail.resume{margin-top:6px;word-break:normal}
table.meta td .mute{color:var(--mute);font-size:10px;margin-left:6px}table.meta td a .ic{vertical-align:-3px;margin-right:2px}
.odo{display:flex;justify-content:center;gap:1px}.odo i{font:700 14px/1 var(--pix);font-style:normal;color:#fff;background:linear-gradient(#333,#000 50%,#2a2a2a);padding:4px 3px;border:1px solid #666}
footer.site{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;padding:7px 10px;background:var(--silver);border-top:1px solid var(--hi);box-shadow:0 -1px 0 var(--lo);font-size:10px;color:#222}
footer.site .credit{font:400 10px var(--pix)}footer.site .star-note{color:#a00}

/* floating preview, the door, the clock */
#peek{position:fixed;left:0;top:0;width:min(30vw,300px);max-height:56vh;object-fit:contain;pointer-events:none;opacity:0;z-index:5;background:#fff;padding:4px;border:1px solid #000;box-shadow:4px 4px 0 rgba(0,0,0,.5)}
#peek.on{opacity:1}@media (hover:none){#peek{display:none}}
#door{position:fixed;inset:0;z-index:50;display:grid;place-items:center;cursor:pointer;text-align:center;padding:24px;background:#000;color:#fff}
#door[hidden]{display:none}#door.leaving{opacity:0;transition:opacity .25s}
#door .word{font:700 clamp(40px,9vw,96px)/1 var(--logo);text-shadow:3px 3px 0 var(--bar2)}
#door .load{width:min(320px,70vw);height:16px;margin:26px auto 8px;border:2px solid;border-color:var(--dk) var(--hi) var(--hi) var(--dk);background:#111;padding:2px}
#door .load i{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,var(--bar2) 0 8px,transparent 8px 10px);animation:load 1.5s steps(16,end) .2s forwards}
#door .pct{font:400 11px var(--pix);color:#8fa3bd}#door .hint{margin-top:18px;font:400 13px var(--pix);color:#ff6;opacity:0;animation:show .01s linear 1.8s forwards,blink 1.1s steps(2,start) 1.8s infinite}
@keyframes load{to{width:100%}}@keyframes show{to{opacity:1}}
.bigclock{position:fixed;right:18px;bottom:6px;height:min(60vh,520px);aspect-ratio:200/300;color:#c8d6ea;opacity:.3;z-index:0;pointer-events:none}
.bigclock svg{width:100%;height:100%;overflow:visible}.bigclock .hh,.bigclock .mh{transform-origin:100px 90px;transition:transform .6s ease}
.bigclock .pend{transform-origin:100px 158px;animation:pend 2s ease-in-out infinite alternate}.bigclock .gear{transform-origin:center;transform-box:fill-box}
.bigclock .g1{animation:gear 26s linear infinite}.bigclock .g2{animation:gear 26s linear infinite reverse}
@keyframes pend{from{transform:rotate(-9deg)}to{transform:rotate(9deg)}}@keyframes gear{to{transform:rotate(360deg)}}
@media (max-width:1180px){.bigclock{display:none}.wrap{margin-left:auto;margin-right:auto}}

/* phones: one column, sidebar underneath */
@media (max-width:700px){
  .wrap{margin:8px auto 40px}.cols{grid-template-columns:1fr;padding:8px}.mark{font-size:28px}.banner{flex-direction:column;align-items:flex-start;gap:4px;padding:12px 10px 8px}
  .side{display:grid;grid-template-columns:1fr 1fr;gap:8px}.side .box{margin:0}.icons{grid-template-columns:repeat(4,1fr)}.icons li a{padding:8px 2px}.icons li a .t{font-size:10px}.ic.big{width:44px;height:44px}.people,.thumbs{grid-template-columns:repeat(3,1fr)}.picks,.wall .thumbs{grid-template-columns:repeat(2,1fr)}
  .details li a .k,.details li.hd .k{flex-basis:34%}.figs.pair{grid-template-columns:1fr}.profile{flex-direction:column}.profile .card{flex:none;width:200px}.profile.welcome .card{flex:none;width:140px}.tabs a{padding:6px 9px 5px}
}
@media (max-width:420px){.people,.thumbs,.picks{grid-template-columns:repeat(2,1fr)}.side{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.ticker .track,.ticker .new,#door .load i,#door .hint,.bigclock .pend,.bigclock .gear{animation:none}.ticker .track{padding-left:8px}#door .load i{width:100%}#door .hint{opacity:1}}
/* music front page: the MASTO clips play right there (Nate, 9/22); a folder's lead photos sit big above its thumbnails */
.film{display:flex;flex-direction:column;gap:14px;margin:0 0 14px}   /* one clip per row, full width, the way the FOREVER page stacks them (Nate, 9/22: the two-across grid felt messy) */
.film .clip .t{display:block;text-align:center;margin-top:5px;font-size:12px;color:var(--link);text-decoration:underline;font-weight:bold}.film .clip .t:hover{background:none;color:#c00}
.figs.lead{margin-bottom:14px}.figs.lead figure a:hover{background:none}.figs.lead figure:hover{border-color:#c00;box-shadow:0 0 0 1px #c00,2px 2px 0 rgba(0,0,0,.18)}


:root{--bg:#070b1f;--paper:#eef1f5;--bar1:#0a246a;--bar2:#3a6ea5;--link:#0033cc;--visited:#551a8b;--silver:#d4d0c8;--lcd:#0c1a10}