/* ================================================================ NIKO BONO - personal site Single source of truth for tokens = DESIGN-KIT.html. Black ground, white lines, Electric Cyan signal, 0px radius. Scoped radius exception per the V1 brief: - .nav-bubble / .dir-btn--round -> circular (border-radius:50%) The Temperature widget (performative-ui port) keeps 0px radius. Everything else: radius 0. ================================================================ */ :root{ /* color */ --black:#050505; --surface:#0C0C0C; --white:#FFFFFF; --grey:#A3A3A3; --grey-dim:#7A7A7A; --accent:#22D3EE; --accent-bright:#67E8F9; --line:#FFFFFF; /* frame lines, active borders */ --line-soft:rgba(255,255,255,.16); /* hairlines, dividers */ --line-faint:rgba(255,255,255,.07);/* texture, faint rules */ /* type */ --font-display:'Space Grotesk',system-ui,sans-serif; --font-mono:'JetBrains Mono',ui-monospace,monospace; --text-hero:clamp(2.75rem,7vw,6rem); --text-h1:clamp(2rem,4vw,3.5rem); --text-h2:clamp(1.5rem,2.5vw,2rem); --text-h3:1.25rem; --text-body:1rem; --text-small:.875rem; --text-label:.75rem; --tracking-label:.08em; /* space (4px base) */ --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:40px; --s6:64px; --s7:96px; --s8:160px; /* grid */ --grid-max:1440px; --grid-gutter:24px; --grid-margin:48px; /* motion */ --dur-fast:150ms; --dur-base:300ms; --dur-slow:700ms; --ease-out:cubic-bezier(.16,1,.3,1); --ease-inout:cubic-bezier(.65,0,.35,1); /* live state (driven by site.js) */ --scroll-progress:0; --ascii-a:.09; } /* aura-boost: toggled on at the max reasoning level. Raises the single accent and the ascii field alpha a notch. */ html.aura-boost{--accent:var(--accent-bright);--ascii-a:.16} /* ================================================================ BASE ================================================================ */ *{margin:0;padding:0;box-sizing:border-box;border-radius:0!important} html{scroll-behavior:smooth} body{ background:var(--black);color:var(--white);font-family:var(--font-display); font-size:var(--text-body);line-height:1.6;-webkit-font-smoothing:antialiased; overflow-x:hidden; } ::selection{background:var(--accent);color:var(--black)} a{color:inherit;text-decoration:none} img,svg{display:block} :focus-visible{outline:2px solid var(--accent);outline-offset:2px} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* the one place radius is allowed back: explicit overrides */ .nav-bubble,.dir-btn--round{border-radius:9999px!important} /* engineering-drawing page frame. Sits above the top-left/top-right controls so its corner + markers can never be occluded (issue #1). */ .page-frame{position:fixed;inset:16px;border:1px solid var(--line-soft);pointer-events:none;z-index:65} .page-frame .plus{position:absolute;font-family:var(--font-mono);font-size:14px;line-height:1;color:var(--white);background:var(--black);padding:2px} .page-frame .tl{top:-9px;left:-7px}.page-frame .tr{top:-9px;right:-7px} .page-frame .bl{bottom:-9px;left:-7px}.page-frame .br{bottom:-9px;right:-7px} .wrap{max-width:var(--grid-max);margin:0 auto;padding:0 var(--grid-margin);position:relative} /* section scaffolding (from DESIGN-KIT) */ section{border-top:1px solid var(--line-soft);padding:var(--s7) 0;position:relative} .sec-label{font-family:var(--font-mono);font-size:var(--text-label);font-weight:500;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--grey-dim);display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s6)} .sec-label::after{content:"";flex:1;height:1px;background:var(--line-faint)} .sec-label b{color:var(--white);font-weight:500} .sec-title{font-size:var(--text-h1);font-weight:700;line-height:1.05;letter-spacing:-.02em;margin-bottom:var(--s4);max-width:18ch} .sec-intro{color:var(--grey);max-width:58ch;margin-bottom:var(--s6)} .mono{font-family:var(--font-mono)} .label{font-family:var(--font-mono);font-size:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--grey-dim)} .accent{color:var(--accent)} /* corner-marked panel */ .marked{position:relative;border:1px solid var(--line-soft)} .marked>.pm{position:absolute;font-family:var(--font-mono);font-size:12px;line-height:1;color:var(--white);background:var(--black);padding:1px 2px;z-index:2} .marked>.pm.tl{top:-7px;left:-5px}.marked>.pm.tr{top:-7px;right:-5px} .marked>.pm.bl{bottom:-7px;left:-5px}.marked>.pm.br{bottom:-7px;right:-5px} /* ================================================================ SCROLL PROGRESS (cyan top bar) ================================================================ */ .sp{position:fixed;inset-inline:0;top:0;z-index:70;height:2px} .sp-fill{height:100%;width:100%;transform-origin:left center;transform:scaleX(var(--scroll-progress));background:linear-gradient(to right,rgba(34,211,238,.4),var(--accent),var(--accent-bright))} /* ================================================================ TEMPERATURE (performative-ui "effort" slider) - vanilla port Faithful port of vorpus/performativeUI Temperature.tsx + styles. Track line with a sliding ▲ marker, colored tier labels, poles, hover-preview + click-commit, and a violet canvas ripple flood at the top (ludicrous) tier. Drives the ASCII hero speed via site.js. ================================================================ */ .pui-temp{ width:380px;max-width:100%;margin:0;padding:8px 14px; display:flex;flex-direction:column;justify-content:center; box-sizing:border-box; font-family:var(--font-mono);font-size:12px;line-height:1.35; color:var(--white);background:rgba(12,12,12,.55);border:1px solid var(--line-soft); user-select:none;cursor:pointer; --pui-temp-pos:.125;--pui-temp-divider:.75;--pui-temp-cols:4; } .pui-temp__ripple{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:none} .pui-temp.is-ripple .pui-temp__ripple{display:block} .pui-temp__poles,.pui-temp__track,.pui-temp__levels{position:relative;z-index:1} .pui-temp__poles{display:flex;justify-content:space-between;color:var(--grey-dim);font-size:11px;letter-spacing:.02em} .pui-temp__track{position:relative;flex:0 0 auto;min-height:1.6em;margin:1px 0} .pui-temp__line{position:absolute;left:0;right:0;top:50%;border-top:1px solid rgba(255,255,255,.18)} .pui-temp__divider,.pui-temp__marker{position:absolute;top:50%;transform:translate(-50%,-50%);line-height:1} .pui-temp__divider{left:calc(var(--pui-temp-divider)*100%);color:var(--grey-dim)} .pui-temp__marker{left:calc(var(--pui-temp-pos)*100%);color:var(--white);transition:left .18s var(--ease-out)} .pui-temp__levels{display:grid;grid-template-columns:repeat(var(--pui-temp-cols,4),1fr)} .pui-temp__level{appearance:none;background:none;border:0;padding:2px 0;margin:0;font-family:inherit;font-size:11px;text-align:center;cursor:pointer;color:var(--grey-dim);white-space:nowrap;transition:color var(--dur-base) var(--ease-out)} .pui-temp__text{display:inline-block} .pui-temp__level.is-active .pui-temp__text{font-weight:700} /* ludicrous tier (auramaxxed): violet label, white + glow when active */ .pui-temp__level--ludicrous .pui-temp__text{color:#a78bfa} .pui-temp__level--ludicrous.is-active .pui-temp__text{color:#fff;text-shadow:0 0 8px rgba(140,80,240,.95)} @media(prefers-reduced-motion:reduce){ .pui-temp__marker{transition:none} } /* back-to-home link (sub-pages, top-left) */ .back{position:fixed;top:30px;left:48px;z-index:60;font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-dim);display:inline-flex;align-items:center;gap:8px;transition:color var(--dur-base) var(--ease-out)} .back:hover{color:var(--white)} .back .arr{transition:transform var(--dur-base) var(--ease-out)} .back:hover .arr{transform:translateX(-3px)} /* ================================================================ NAVBAR (top-right, circular bubbles + traveling marker) ================================================================ */ .nav{position:fixed;top:24px;right:48px;z-index:60;display:flex;align-items:center;gap:14px} .nav-bubbles{position:relative;display:flex;gap:16px;align-items:center;padding-bottom:10px} .nav-bubble{width:40px;height:40px;border:1px solid var(--line-soft);display:grid;place-items:center;color:var(--grey-dim);background:rgba(5,5,5,.5);transition:color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)} .nav-bubble svg{width:18px;height:18px} .nav-bubble:hover,.nav-bubble:focus-visible{color:var(--white);border-color:var(--white);transform:translateY(-2px)} /* the round contact CTA uses the directional fill (see .dir-btn) */ .nav-bubble.dir-btn{padding:0} .nav-bubble.dir-btn .dir-label{font-size:0} /* hide text, icon only */ .nav-bubble.dir-btn svg{position:relative;z-index:2;transition:color var(--dur-base) var(--ease-out)} .nav-bubble.dir-btn .dir-fill{border-radius:9999px!important} /* traveling marker: a 4px cyan square that slides along the bottom edge */ .nav-mark{position:absolute;left:0;bottom:0;width:40px;height:2px;background:var(--accent);opacity:0;transform:translateX(0);transition:transform var(--dur-base) var(--ease-out),opacity var(--dur-base) var(--ease-out);pointer-events:none;z-index:3} .nav-bubbles:hover .nav-mark{opacity:1} /* ================================================================ HERO (2/3 + 1/3) ================================================================ */ header.hero{position:relative;padding:80px 0 var(--s7);overflow:hidden;min-height:88vh;display:flex;align-items:center} header.hero .wrap{width:100%} .hero-grid{display:grid;grid-template-columns:2fr 1fr;gap:var(--grid-gutter);align-items:center} /* hero top row: kicker leads above the code (left), slider parked right. Slider lifted out from between kicker and code to rebalance hero weight. */ .hero-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s5)} .hero-kicker{display:flex;gap:var(--s4);flex-wrap:wrap} .hero-kicker span{font-family:var(--font-mono);font-size:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--grey)} .hero-kicker .dot::before{content:"■ ";color:var(--accent);font-size:9px;vertical-align:1px} /* hover-list index: nudge 6px up, 3px right (per brief) */ .hero-grid > aside{position:relative;top:-6px;left:3px} /* about split: framed statement left, Read More CTA right. center the CTA against the frame so its height matches the text block */ .about-grid{display:grid;grid-template-columns:1.8fr 1fr;gap:48px;align-items:center} /* ================================================================ CODE REVEAL (hero left) ================================================================ */ .code{border:1px solid var(--line-soft);background:var(--surface);font-family:var(--font-mono);font-size:13px} .code-head{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line-faint)} .code-file{color:var(--grey);font-size:12px} .code-lang{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);border:1px solid var(--line-soft);padding:2px 6px} .code-copy{margin-left:auto;background:none;border:1px solid var(--line-soft);color:var(--grey);font-family:inherit;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;cursor:pointer;transition:border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)} .code-copy:hover{border-color:var(--white);color:var(--white)} .code-copy.is-on{color:var(--accent);border-color:var(--accent)} .code-body{display:grid;grid-template-columns:auto minmax(0,1fr);margin:0} .code-gutter{margin:0;padding:16px 12px 16px 16px;text-align:right;color:var(--grey-dim);user-select:none;border-right:1px solid var(--line-faint);white-space:pre} .code-pre{min-width:0;margin:0;padding:16px;overflow-x:auto} .code-line{display:block;white-space:pre;color:var(--grey)} .tok-c{color:var(--grey-dim);font-style:italic} .tok-k{color:var(--white);font-weight:500} .tok-s{color:var(--white)} /* ================================================================ HOVER LIST (hero right nav) ================================================================ */ .nav-list{list-style:none;visibility:hidden} .nav-list li{position:relative;padding:14px 0;font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:500;color:var(--grey-dim);cursor:pointer;transition:color var(--dur-base) var(--ease-out),padding-left var(--dur-base) var(--ease-out);display:block} .nav-list li .sep{position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--line-soft);display:block;transform-origin:left center} .nav-list li::before{content:"●";font-size:10px;position:absolute;left:0;top:50%;transform:translateY(-50%);opacity:0;transition:opacity var(--dur-base) var(--ease-out);color:var(--white)} .nav-list li:hover,.nav-list li:focus-visible{color:var(--white);padding-left:26px;outline:none} .nav-list li:hover::before{opacity:1} .nav-list .ch{display:inline-block} /* ================================================================ PLUS-MARKED FRAME ================================================================ */ .plus-frame{position:relative;padding:40px} .pf-line{position:absolute;display:block;background:var(--line-soft)} .pf-top{top:0;left:0;width:100%;height:1px;transform-origin:left center} .pf-bottom{bottom:0;left:0;width:100%;height:1px;transform-origin:left center} .pf-left{top:0;left:0;width:1px;height:100%;transform-origin:center top} .pf-right{top:0;right:0;width:1px;height:100%;transform-origin:center top} .pf-plus{position:absolute;font-family:var(--font-mono);font-size:12px;line-height:1;color:var(--white);background:var(--black);padding:1px 2px;z-index:2} .pf-tl{top:-7px;left:-5px}.pf-tr{top:-7px;right:-5px}.pf-bl{bottom:-7px;left:-5px}.pf-br{bottom:-7px;right:-5px} .pf-content .k{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);display:block;margin-bottom:16px} .pf-content h2{font-size:var(--text-h2);font-weight:500;letter-spacing:-.01em;line-height:1.25} .pf-content p{color:var(--grey);font-size:.9375rem;margin-top:16px;max-width:60ch} /* wide variant for research page */ .plus-frame--wide{max-width:none;padding:48px 56px} .research-action{display:flex;justify-content:flex-end;margin-top:32px} /* ================================================================ DIRECTIONAL FILL BUTTON ================================================================ */ .dir-btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;padding:16px 32px;border:1px solid var(--line-soft);background:transparent;cursor:pointer;font-family:var(--font-mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--white);transition:transform var(--dur-fast) var(--ease-out)} .dir-btn:active{transform:translateY(1px)} .dir-fill{position:absolute;inset:0;z-index:1;background:var(--white);pointer-events:none} .dir-label-wrap{position:relative;z-index:2;display:inline-flex;align-items:center;gap:10px} .dir-label{display:inline-block;white-space:nowrap} .dir-label--on{position:absolute;inset:0;color:var(--black);opacity:0} /* ghost = CSS-only secondary */ .dir-btn--ghost{border-color:var(--line-faint)} .dir-btn--ghost .dir-label{color:var(--grey-dim);transition:color var(--dur-base) var(--ease-out)} .dir-btn--ghost:hover{border-color:var(--white)} .dir-btn--ghost:hover .dir-label{color:var(--white)} /* ================================================================ TIMELINE RAIL ================================================================ */ .tl{position:relative;list-style:none;visibility:hidden;--rail:1} .tl::before{content:"";position:absolute;left:3px;top:4px;bottom:4px;width:1px;background:var(--line-soft);transform:scaleY(var(--rail));transform-origin:top center} .tl-item{position:relative;padding:0 0 32px 40px} .tl-item:last-child{padding-bottom:0} .tl-node{position:absolute;left:0;top:6px;width:7px;height:7px;background:var(--white)} .tl-date{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);display:block;margin-bottom:8px} .tl-role{font-size:clamp(1.1rem,1.9vw,1.45rem);font-weight:500;letter-spacing:-.01em;line-height:1.2} .tl-org{font-family:var(--font-mono);font-size:12px;color:var(--grey);margin-top:4px} .tl-desc{color:var(--grey);font-size:.875rem;line-height:1.6;margin-top:12px;max-width:58ch} /* ================================================================ ACCESS FORM (cyan, 0px, + message field) ================================================================ */ .af{max-width:560px} /* contact block sits on the right for visual cohesion with the hero. width is definite so margin-left:auto actually pushes it right. */ #contact .af{width:560px;max-width:100%;margin-left:auto} .af .kick{font-family:var(--font-mono);font-size:.7rem;font-weight:500;text-transform:uppercase;letter-spacing:.32em;color:var(--accent)} .af h2{margin-top:20px;font-family:var(--font-display);font-weight:700;font-size:var(--text-h1);line-height:1.05;letter-spacing:-.02em} #contact .af .kick,#contact .af h2{text-align:right} .af .lede{margin-top:20px;max-width:48ch;color:var(--grey);font-size:1rem;line-height:1.7} .af form{margin-top:40px;display:flex;flex-direction:column;gap:20px} .af .hp{position:absolute;left:-9999px;height:0;width:0;opacity:0} .af .field label{display:block;margin-bottom:8px;font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.2em;color:var(--grey-dim)} .af input,.af textarea{width:100%;border:1px solid var(--line-soft);background:var(--surface);padding:12px 16px;color:var(--white);font-family:var(--font-display);font-size:.9375rem;transition:border-color var(--dur-base) var(--ease-out)} .af textarea{resize:vertical;min-height:120px;line-height:1.6} .af input::placeholder,.af textarea::placeholder{color:var(--grey-dim)} .af input:focus,.af textarea:focus{outline:none;border-color:var(--accent)} .af input[aria-invalid="true"],.af textarea[aria-invalid="true"]{border-color:var(--white)} .af .err{margin-top:8px;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.04em;color:var(--white)} .af .err::before{content:"× "} .af .note{font-family:var(--font-mono);font-size:.78rem;color:var(--white)} .af .submit{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid var(--line-soft);background:transparent;color:var(--white);padding:14px 28px;font-family:var(--font-mono);font-size:.78rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;align-self:flex-start;transition:background var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)} .af .submit:hover{background:var(--white);color:var(--black);border-color:var(--white)} .af .submit:disabled{cursor:not-allowed;opacity:.5} .af .submit svg{transition:transform var(--dur-base) var(--ease-out)} .af .submit:hover svg{transform:translateX(2px)} .af .fine{margin-top:4px;font-family:var(--font-mono);font-size:.72rem;color:var(--grey-dim)} /* success */ .af .ok{border:1px solid rgba(34,211,238,.35);background:var(--surface);padding:40px 32px} .af .ok .badge{display:flex;align-items:center;justify-content:center;height:40px;width:40px;margin-bottom:16px;border:1px solid rgba(34,211,238,.5)} .af .ok h3{font-family:var(--font-display);font-weight:700;font-size:1.5rem;letter-spacing:-.01em} .af .ok p{margin-top:8px;font-size:.9rem;color:var(--grey)} /* ================================================================ PROJECT CARD ================================================================ */ .pc-stack{list-style:none;visibility:hidden} .pc{display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:start;padding:32px 0;border-top:1px solid var(--line-soft);position:relative;cursor:pointer} .pc-stack .pc:last-child{border-bottom:1px solid var(--line-soft)} .pc-idx{font-family:var(--font-mono);font-size:clamp(1.5rem,3vw,2.25rem);font-weight:500;color:var(--grey-dim);line-height:1;min-width:2ch;transition:color var(--dur-base) var(--ease-out)} .pc-body{min-width:0} .pc-title{position:relative;display:inline-block;font-size:clamp(1.25rem,2.2vw,1.75rem);font-weight:500;letter-spacing:-.01em;line-height:1.2;transition:color var(--dur-base) var(--ease-out)} .pc-title::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left center;transition:transform var(--dur-base) var(--ease-out)} .pc-desc{color:var(--grey);font-size:.9375rem;line-height:1.6;margin-top:14px;max-width:60ch} .pc-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px} .pc-tags span{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--grey);border:1px solid var(--line-soft);padding:4px 8px} .pc-meta{display:flex;flex-wrap:wrap;gap:24px;margin-top:18px;opacity:0;transform:translateY(6px);transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)} .pc-meta span{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--grey-dim)} .pc-meta span b{color:var(--grey);font-weight:400} .pc:hover .pc-idx{color:var(--white)} .pc:hover .pc-title::after{transform:scaleX(1)} .pc:hover .pc-meta{opacity:1;transform:translateY(0)} /* ================================================================ DISPLAY CARDS (category hub, Projects) Link tiles to category sub-pages. Same token system as .pc: one accent (the hover title rule), 0px radius, --line-soft border. ================================================================ */ .dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px} .dcard{display:flex;flex-direction:column;border:1px solid var(--line-soft);background:var(--surface);color:inherit;text-decoration:none;position:relative;transition:border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)} .dcard:hover{border-color:var(--white)} .dcard:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .dcard:active{transform:translateY(1px)} .dcard-stage{position:relative;height:180px;display:grid;place-items:center;background:var(--black);border-bottom:1px solid var(--line-faint)} .dcard-glyph{font-family:var(--font-mono);font-weight:500;font-size:clamp(2rem,5vw,2.75rem);letter-spacing:.02em;color:var(--grey-dim);opacity:.55;transition:color var(--dur-base) var(--ease-out),opacity var(--dur-base) var(--ease-out)} .dcard:hover .dcard-glyph,.dcard:focus-visible .dcard-glyph{color:var(--accent);opacity:1} .compound-card .dcard-stage{background:#fff;overflow:hidden} .compound-card .dcard-stage img{position:absolute;inset:0;display:block;width:100%;height:100%;padding:14px;object-fit:contain;filter:grayscale(1);transition:filter var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)} .compound-card:hover .dcard-stage img,.compound-card:focus-visible .dcard-stage img{filter:grayscale(0);transform:scale(1.035)} .dcard-body{padding:24px 24px 28px;display:flex;flex-direction:column;flex:1} .dcard-cat{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)} .dcard-cat b{color:var(--white);font-weight:500} .dcard-name{position:relative;align-self:flex-start;font-size:1.25rem;font-weight:500;letter-spacing:-.01em;line-height:1.2;margin-top:10px} .dcard-name::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left center;transition:transform var(--dur-base) var(--ease-out)} .dcard:hover .dcard-name::after,.dcard:focus-visible .dcard-name::after{transform:scaleX(1)} .dcard-desc{color:var(--grey);font-size:.875rem;line-height:1.55;margin-top:14px;flex:1} .dcard-more{margin-top:20px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey-dim);transition:color var(--dur-base) var(--ease-out)} .dcard:hover .dcard-more,.dcard:focus-visible .dcard-more{color:var(--white)} @media(max-width:760px){.dgrid{grid-template-columns:1fr}} /* ================================================================ ABOUT PAGE - ability rows ================================================================ */ .ab-row{display:grid;grid-template-columns:240px 1fr;gap:var(--grid-gutter);padding:28px 0;border-top:1px solid var(--line-soft);align-items:start} .ab-row:last-child{border-bottom:1px solid var(--line-soft)} .ab-row .ab-k{font-family:var(--font-mono);font-size:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--grey);padding-top:4px} .ab-row .ab-k b{display:block;color:var(--white);font-weight:500;margin-bottom:6px} .ab-row .ab-d{color:var(--grey);font-size:.9375rem;line-height:1.65;max-width:62ch} .ab-row .ab-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px} .ab-row .ab-tags span{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--grey-dim);border:1px solid var(--line-soft);padding:4px 8px} /* ================================================================ PAGE HEADER (sub-pages) + back link ================================================================ */ .page-head{padding:140px 0 var(--s6)} .page-head .crumbs{font-family:var(--font-mono);font-size:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--grey-dim);display:flex;align-items:center;gap:10px;margin-bottom:var(--s5)} .page-head .crumbs a{color:var(--grey);transition:color var(--dur-base) var(--ease-out)} .page-head .crumbs a:hover{color:var(--white)} .page-head h1{font-size:var(--text-hero);font-weight:700;line-height:1.05;letter-spacing:-.03em;max-width:16ch} .page-head h1 em{font-style:normal;color:var(--grey-dim)} .page-head .lede{margin-top:24px;color:var(--grey);max-width:56ch;font-size:1.0625rem;line-height:1.6} /* Compact work pages keep the first project row in the opening viewport. */ .work-page .page-head{padding:96px 0 32px} .work-page .page-head .crumbs{margin-bottom:16px} .work-page .page-head .lede{margin-top:12px} .work-page section{padding:32px 0} .work-page .sec-label{margin-bottom:24px} .work-page footer{padding:32px 0} .projects-index .dgrid{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px} .projects-index .dcard-stage{height:112px} .projects-index .dcard-body{padding:16px 16px 18px} .projects-index .dcard-name{font-size:1.05rem;margin-top:8px} .projects-index .dcard-desc{font-size:.75rem;line-height:1.45;margin-top:10px} .projects-index .dcard-more{margin-top:12px} .category-page .dgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px} .category-page .dcard{min-height:280px} .category-page .dcard-stage{height:128px} @media(max-width:1100px){ .projects-index .dgrid,.category-page .dgrid{grid-template-columns:repeat(2,minmax(0,1fr))} } /* ================================================================ FOOTER ================================================================ */ footer{border-top:1px solid var(--line-soft);padding:var(--s6) 0 var(--s7)} .foot-row{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s4);flex-wrap:wrap} .foot-meta{font-family:var(--font-mono);font-size:var(--text-label);color:var(--grey-dim);letter-spacing:.06em;line-height:1.8} .foot-meta a{color:var(--grey);text-decoration:underline;text-underline-offset:3px;transition:color var(--dur-base) var(--ease-out)} .foot-meta a:hover{color:var(--white)} /* reveal helper (IO-driven, opacity/transform only) */ .reveal{opacity:0;transform:translateY(14px);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)} .reveal.is-in{opacity:1;transform:translateY(0)} /* fallbacks: never hide content if GSAP or JS is unavailable */ html.no-gsap .nav-list,html.no-gsap .tl,html.no-gsap .pc-stack{visibility:visible} /* ================================================================ ASCII HERO BACKGROUND (fixed, behind everything) ================================================================ */ #ascii{position:fixed;inset:0;z-index:0;overflow:hidden;font-family:var(--font-mono);font-size:12px;line-height:1.35;color:rgba(34,211,238,var(--ascii-a));white-space:pre;pointer-events:none;user-select:none;transition:color var(--dur-slow) var(--ease-out)} main{position:relative;z-index:1} /* ================================================================ RESPONSIVE ================================================================ */ @media(max-width:960px){ .hero-grid{grid-template-columns:1fr;gap:var(--s6)} .ab-row{grid-template-columns:1fr;gap:8px} } @media(max-width:760px){ :root{--grid-margin:20px} .page-frame{inset:8px} .back{top:18px;left:20px} .nav{top:16px;right:20px} header.hero{padding-top:88px;min-height:0} section{padding:var(--s6) 0} .page-head{padding:120px 0 var(--s5)} .pc{grid-template-columns:1fr;gap:12px} .nav-bubbles{gap:10px} .nav-bubble{width:36px;height:36px} .projects-index .dgrid,.category-page .dgrid{grid-template-columns:1fr} .about-grid{grid-template-columns:1fr;gap:24px} .code-body{display:block} .code-gutter{display:none} .code-pre{font-size:11px;overflow-x:visible} .code-line{white-space:pre-wrap;overflow-wrap:anywhere} .plus-frame--wide{padding:32px 24px} .research-action{margin-top:24px} } @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} .reveal{opacity:1;transform:none} html{scroll-behavior:auto} }