/* ============================================================ Mitchell Tecún — Portfolio Two themes live here. Switch by changing the class on : theme-d1 → neutral black + Guatemalan celeste ← in use theme-a → the original orange version (kept as a fallback) ============================================================ */ /* ---------- reset ---------- */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:90px} body{margin:0} /* browsers give

a 40px side margin by default — it wrecks narrow grid columns */ figure{margin:0} img{max-width:100%;display:block} button{font:inherit} a{color:inherit} /* ============================================================ THEME TOKENS ============================================================ */ body{ /* structural tokens shared by all themes */ --maxw:1180px; --gutter:32px; --navh:68px; --sec-gap:clamp(76px,9vw,124px); --r:4px; /* defaults overridden per theme */ --accent2:var(--accent); --notch:none; --maya-display:inline-flex; --weave:none; } /* ---------- A · original dark technical ---------- */ body.theme-a{ --bg:#0a0b0d; --bg-nav:rgba(10,11,13,.85); --bg-soft:#0f1114; --fg:#f2f3f5; --fg-mid:#a1a6ad; --fg-dim:#6b7078; --accent:#ff5a1f; --accent2:#ff5a1f; --rule:#1d1f23; --rule-strong:#2a2d33; --tile:#111318; --on-accent:#0a0b0d; --maya-display:none; } /* ---------- D1 · Quetzal, restrained ← the one we're using ---------- Near-neutral black. The only colour on the page is Guatemalan celeste, used as the single accent. No green anywhere. ------------------------------------------------------------------- */ body.theme-d1{ --bg:#08090a; --bg-nav:rgba(8,9,10,.87); --bg-soft:#0c0d0f; --fg:#f0f2f4; --fg-mid:#9ba1a8; --fg-dim:#697077; --accent:#5AB4EC; --accent2:#5AB4EC; --rule:#1b1d20; --rule-strong:#292c30; --tile:#0f1113; --on-accent:#04080c; } /* ============================================================ BASE ============================================================ */ body{ background:var(--bg); color:var(--fg); font-family:Inter,system-ui,-apple-system,sans-serif; font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)} .mono{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace} ::selection{background:var(--accent);color:var(--on-accent)} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px} .skip{ position:absolute;left:-9999px;top:0;z-index:200; background:var(--accent);color:var(--on-accent);padding:12px 20px; font:500 14px/1 "JetBrains Mono",monospace;text-decoration:none; } .skip:focus{left:12px;top:12px} /* eyebrow / label type */ .label{ font-family:"JetBrains Mono",ui-monospace,monospace; font-size:12px;letter-spacing:.16em;text-transform:uppercase; color:var(--fg-dim); } /* ---------- Maya bar-and-dot numeral ---------- */ .maya{ display:var(--maya-display);flex-direction:column;align-items:center; gap:2.5px;margin-right:11px;flex:none; } .maya .dots{display:flex;gap:3px;height:5px;align-items:center} .maya .dots i{width:4.5px;height:4.5px;border-radius:50%;background:var(--accent2)} .maya .bar{width:19px;height:2.5px;border-radius:1px;background:var(--accent2)} /* ============================================================ NAV ============================================================ */ .nav{ position:sticky;top:0;z-index:100; background:var(--bg-nav);backdrop-filter:blur(14px) saturate(1.4); border-bottom:1px solid var(--rule); } .nav .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--navh)} .brand{ display:flex;align-items:center;gap:10px;text-decoration:none; font:500 15px/1 "JetBrains Mono",monospace;color:var(--fg);letter-spacing:.01em; } .brand svg{width:11px;height:11px;flex:none} .brand .sub{color:var(--fg-dim);font-size:12px;display:none} @media(min-width:1040px){.brand .sub{display:inline;margin-left:2px}} .navlinks{display:flex;align-items:center;gap:28px} .navlinks a{ font:500 13.5px/1 "JetBrains Mono",monospace;letter-spacing:.04em; color:var(--fg-dim);text-decoration:none;transition:color .18s; position:relative;padding:6px 0; } .navlinks a:hover{color:var(--fg)} .navlinks a.active{color:var(--accent)} .navlinks a.active::after{ content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--accent); } .navlinks .cta{ background:var(--accent2);color:var(--on-accent); padding:11px 18px;border-radius:var(--r); } .navlinks .cta:hover{color:var(--on-accent);opacity:.86} .navlinks .cta::after{display:none} .navtoggle{ display:none;background:none;border:1px solid var(--rule-strong); border-radius:var(--r);color:var(--fg);padding:9px 13px;cursor:pointer; font:500 12px/1 "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase; } @media(max-width:760px){ .navlinks{ position:fixed;inset:var(--navh) 0 auto 0;flex-direction:column;align-items:stretch; gap:0;background:var(--bg);border-bottom:1px solid var(--rule); padding:8px var(--gutter) 22px;display:none; } .navlinks.open{display:flex} .navlinks a{padding:15px 0;font-size:15px;border-bottom:1px solid var(--rule)} .navlinks .cta{text-align:center;margin-top:16px;border-bottom:none;padding:15px} .navtoggle{display:block} } /* ============================================================ HERO ============================================================ */ .hero{padding:clamp(70px,10vw,110px) 0 0} .hero .eyebrow{ display:flex;align-items:center;gap:13px;margin:0 0 28px;color:var(--accent); font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase; } .hero .eyebrow::after{content:"";flex:1;height:1px;background:var(--rule);max-width:130px} .hero h1{ font-size:clamp(42px,7.6vw,94px);font-weight:600;line-height:.99; letter-spacing:-.036em;margin:0 0 22px;max-width:16ch; } .hero h1 em{font-style:normal;color:var(--accent)} .hero .role{ font-family:"JetBrains Mono",monospace;font-size:14px;font-weight:500; color:var(--fg-mid);letter-spacing:.05em;margin:0 0 28px; } .hero .lede{font-size:16.5px;line-height:1.65;color:var(--fg-mid);max-width:60ch;margin:0 0 34px} .hero .actions{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 38px} .btn{ display:inline-flex;align-items:center;gap:9px;text-decoration:none; font:500 13.5px/1 "JetBrains Mono",monospace;letter-spacing:.04em; padding:14px 22px;border-radius:var(--r);transition:.18s; } .btn-primary{background:var(--accent2);color:var(--on-accent)} .btn-primary:hover{opacity:.86} .btn-ghost{border:1px solid var(--rule-strong);color:var(--fg-mid)} .btn-ghost:hover{border-color:var(--accent);color:var(--accent)} .caps{display:flex;flex-wrap:wrap;gap:8px} .cap{ font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--fg-dim); border:1px solid var(--rule-strong);border-radius:var(--r);padding:8px 13px; background-image:var(--weave); } .heroshot{ margin-top:clamp(52px,7vw,76px);position:relative;overflow:hidden; border-radius:var(--r);border:1px solid var(--rule); } .heroshot img{width:100%;height:clamp(280px,48vh,500px);object-fit:cover;object-position:center 72%} .heroshot::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,transparent 62%,var(--bg));opacity:.4; } .heroshot figcaption{ position:absolute;left:20px;bottom:16px;z-index:2; font-family:"JetBrains Mono",monospace;font-size:11.5px;letter-spacing:.1em; text-transform:uppercase;color:var(--fg-mid); } /* ============================================================ SECTION HEADS ============================================================ */ .sec{padding-top:var(--sec-gap)} .sechead{ display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap; padding-bottom:20px;border-bottom:1px solid var(--rule); margin-bottom:clamp(44px,6vw,68px); } .sechead h2{font-size:clamp(27px,3.5vw,40px);font-weight:600;letter-spacing:-.03em;margin:0} .sechead .note{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-dim)} /* ============================================================ FLAGSHIP PROJECTS ============================================================ */ .proj{ display:grid;grid-template-columns:1fr 1.14fr;gap:clamp(40px,5vw,64px); align-items:start;padding:clamp(56px,7vw,82px) 0;border-top:1px solid var(--rule); } .proj:first-of-type{border-top:none;padding-top:0} .proj .body{position:sticky;top:calc(var(--navh) + 36px)} .proj .idx{display:flex;align-items:center;margin-bottom:16px;color:var(--accent2); font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase} .proj h3{font-size:clamp(25px,3.1vw,35px);font-weight:600;line-height:1.14;letter-spacing:-.03em;margin:0 0 18px} .proj .problem{ font-size:17px;line-height:1.52;font-weight:500;color:var(--fg); margin:0 0 26px;padding-left:16px;border-left:2px solid var(--accent2); } .proj ul{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:13px} .proj li{font-size:15px;line-height:1.62;color:var(--fg-mid);padding-left:21px;position:relative} .proj li::before{content:"";position:absolute;left:0;top:.66em;width:8px;height:1px;background:var(--accent)} .proj li strong{color:var(--fg);font-weight:600} .meta{ display:grid;gap:10px;padding-top:22px;border-top:1px solid var(--rule); font-family:"JetBrains Mono",monospace;font-size:12.5px; } .meta .row{display:flex;gap:15px} .meta .k{color:var(--fg-dim);min-width:60px;font-size:11px;letter-spacing:.11em;text-transform:uppercase;padding-top:2px} .meta .v{color:var(--fg-mid)} /* media column */ .media{display:grid;gap:12px;order:1} .shot{ border:1px solid var(--rule);border-radius:var(--r);overflow:hidden; background:var(--tile);background-image:var(--weave);cursor:zoom-in;position:relative; } .shot img{width:100%;transition:transform .5s cubic-bezier(.2,.7,.3,1)} .shot:hover img{transform:scale(1.025)} .shot--lead{clip-path:var(--notch)} .shot--lead img{aspect-ratio:4/3;object-fit:cover} .pair{display:grid;grid-template-columns:1fr 1fr;gap:12px} .pair .shot img{aspect-ratio:1/1;object-fit:cover} .trio{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .trio .shot img{aspect-ratio:1/1;object-fit:cover} .shot figcaption{ padding:9px 12px;border-top:1px solid var(--rule); font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.06em;color:var(--fg-dim); } @media(max-width:920px){ .proj{grid-template-columns:1fr;gap:34px} .media{order:0} .proj .body{position:static} } /* ============================================================ COMPACT PROJECT CARDS ============================================================ */ .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,24px);margin-top:clamp(40px,5vw,60px)} @media(max-width:980px){.cards{grid-template-columns:repeat(2,1fr)}} @media(max-width:660px){.cards{grid-template-columns:1fr}} .card{ border:1px solid var(--rule);border-radius:var(--r);overflow:hidden; background:var(--bg-soft);display:flex;flex-direction:column;transition:border-color .22s; } .card:hover{border-color:var(--rule-strong)} .card .thumb{overflow:hidden;background:var(--tile);background-image:var(--weave);cursor:zoom-in} .card .thumb img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)} .card:hover .thumb img{transform:scale(1.03)} .card .cbody{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1} .card .idx{display:flex;align-items:center;margin-bottom:12px;color:var(--accent2); font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase} .card h3{font-size:18.5px;font-weight:600;letter-spacing:-.02em;margin:0 0 11px;line-height:1.26} .card p{font-size:14px;line-height:1.62;color:var(--fg-mid);margin:0 0 18px} .card .ctools{ margin-top:auto;padding-top:16px;border-top:1px solid var(--rule); font-family:"JetBrains Mono",monospace;font-size:11.5px;color:var(--fg-dim);line-height:1.7; } /* ============================================================ TIMELINE ============================================================ */ .tl{margin-top:clamp(40px,5vw,58px);position:relative} .tl::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:var(--rule)} .tlrow{ display:grid;grid-template-columns:170px 1fr;gap:24px; padding:20px 0 20px 26px;position:relative; } .tlrow::before{ content:"";position:absolute;left:-3.5px;top:29px;width:8px;height:8px;border-radius:50%; background:var(--bg);border:1.5px solid var(--rule-strong); } .tlrow.is-now::before{background:var(--accent2);border-color:var(--accent2)} .tlrow .when{ font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.06em; color:var(--fg-dim);padding-top:2px; } .tlrow .what{font-size:15.5px;font-weight:600;color:var(--fg);margin:0 0 4px;letter-spacing:-.01em} .tlrow .where{font-size:14px;color:var(--fg-mid);margin:0} @media(max-width:640px){ .tlrow{grid-template-columns:1fr;gap:6px} .tlrow .when{order:-1} } /* ============================================================ ABOUT ============================================================ */ .about .inner{display:grid;grid-template-columns:.74fr 1.26fr;gap:clamp(38px,5vw,64px);align-items:start} .portrait{ border:1px solid var(--rule);border-radius:var(--r);overflow:hidden; background:var(--tile);background-image:var(--weave); } /* full photo, natural proportions — no cropping */ .portrait img{width:100%;height:auto;display:block} .origin{ display:flex;align-items:center;gap:11px;margin:0 0 22px; font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.11em; text-transform:uppercase;color:var(--fg-dim); } .origin .flag{display:flex;height:12px;border-radius:2px;overflow:hidden;box-shadow:0 0 0 1px var(--rule-strong)} .origin .flag i{width:9px} .about p{font-size:16.5px;line-height:1.72;color:var(--fg-mid);margin:0 0 19px;max-width:58ch} .about p strong{color:var(--fg);font-weight:600} @media(max-width:820px){ .about .inner{grid-template-columns:1fr} .portrait{max-width:300px} } /* ============================================================ CONTACT + FOOTER ============================================================ */ .contact{padding:clamp(76px,9vw,120px) 0 clamp(60px,7vw,88px);text-align:center;margin-top:var(--sec-gap);border-top:1px solid var(--rule)} .contact h2{font-size:clamp(30px,5vw,58px);font-weight:600;letter-spacing:-.035em;margin:0 0 18px;line-height:1.06} .contact p{font-size:16.5px;color:var(--fg-mid);margin:0 auto 34px;max-width:48ch;line-height:1.65} .contact .actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px} .foot{border-top:1px solid var(--rule);padding:32px 0 56px} .foot .wrap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap; font-family:"JetBrains Mono",monospace;font-size:12.5px;color:var(--fg-dim)} .foot a{color:var(--fg-mid);text-decoration:none} .foot a:hover{color:var(--accent)} /* ============================================================ LIGHTBOX ============================================================ */ .lb{ position:fixed;inset:0;z-index:300;display:none; background:rgba(3,5,7,.94);backdrop-filter:blur(6px); align-items:center;justify-content:center;padding:36px;cursor:zoom-out; } .lb.open{display:flex} .lb img{max-width:min(1400px,94vw);max-height:88vh;width:auto;border-radius:var(--r); box-shadow:0 30px 90px rgba(0,0,0,.6)} .lb .lbcap{ position:absolute;bottom:26px;left:0;right:0;text-align:center; font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.08em;color:var(--fg-mid); } .lb .lbclose{ position:absolute;top:22px;right:26px;background:none;border:1px solid var(--rule-strong); color:var(--fg-mid);border-radius:var(--r);padding:9px 14px;cursor:pointer; font:500 12px/1 "JetBrains Mono",monospace;letter-spacing:.1em; } .lb .lbclose:hover{color:var(--fg);border-color:var(--fg-dim)} /* ============================================================ SCROLL REVEAL ============================================================ */ .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)} .reveal.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .reveal{opacity:1;transform:none;transition:none} .shot img,.card .thumb img{transition:none} .shot:hover img,.card:hover .thumb img{transform:none} } /* ============================================================ INTRO — full-screen rover survey Hidden by default: JS turns it on. No JS, no intro, no problem. ============================================================ */ html.intro-lock, html.intro-lock body{overflow:hidden} .intro{display:none;position:fixed;inset:0;z-index:500;background:var(--bg)} .intro.is-on{display:block} .intro__canvas{display:block;width:100%;height:100%;touch-action:none;outline:none} /* top bar — the exit is the most prominent thing on screen */ .intro__bar{ position:absolute;top:0;left:0;right:0;z-index:3; display:flex;align-items:center;justify-content:space-between;gap:16px; padding:16px clamp(16px,3vw,30px); background:linear-gradient(180deg,rgba(8,9,10,.92),rgba(8,9,10,0)); pointer-events:none; } .intro__bar > *{pointer-events:auto} .intro__brand{ display:flex;align-items:center;gap:10px; font:500 14px/1 "JetBrains Mono",monospace;color:var(--fg); } .intro__brand svg{width:11px;height:11px;flex:none} .intro__brand .r{color:var(--fg-dim)} .intro__exit{ display:inline-flex;align-items:center;gap:10px;cursor:pointer; background:var(--accent);color:var(--on-accent);border:none;border-radius:var(--r); padding:12px 18px;font:500 13px/1 "JetBrains Mono",monospace;letter-spacing:.04em; } .intro__exit:hover{opacity:.86} .intro__exit kbd{ font:500 11px/1 "JetBrains Mono",monospace; background:rgba(0,0,0,.22);border-radius:3px;padding:3px 6px; } @media(max-width:560px){ .intro__brand .n{display:none} .intro__exit{padding:11px 14px;font-size:12px} } /* telemetry */ .intro__hud{ position:absolute;left:clamp(16px,3vw,30px);bottom:clamp(16px,3vw,26px);z-index:3; display:flex;gap:18px;flex-wrap:wrap; background:rgba(8,9,10,.72);backdrop-filter:blur(10px); border:1px solid var(--rule);border-radius:var(--r);padding:10px 15px; font-family:"JetBrains Mono",monospace;font-size:11.5px;letter-spacing:.06em; } .intro__hud .k{color:var(--fg-dim);margin-right:7px;text-transform:uppercase;font-size:10px} .intro__hud .v{color:var(--fg)} .intro__hud .sites .v{color:var(--accent)} .intro__hud .hull .v{color:var(--accent);letter-spacing:.22em} .intro__hud .hull .v.warn{color:#e0a03a} .intro__hud .hull .v.crit{color:#d4544a} .intro__help{ display:inline-flex;align-items:center;gap:7px;cursor:pointer; background:none;border:none;padding:0;color:var(--fg-dim); font:500 11px/1 "JetBrains Mono",monospace;letter-spacing:.08em;text-transform:uppercase; border-left:1px solid var(--rule);padding-left:16px; } .intro__help:hover{color:var(--fg)} .intro__help[aria-expanded="true"]{color:var(--accent)} .intro__help kbd{ font:500 10px/1 "JetBrains Mono",monospace; border:1px solid var(--rule-strong);border-radius:3px;padding:3px 5px; } /* controls panel */ .intro__controls{ position:absolute;left:clamp(16px,3vw,30px);bottom:calc(clamp(16px,3vw,26px) + 58px); z-index:4;max-width:min(92vw,380px); background:rgba(8,9,10,.95);backdrop-filter:blur(12px); border:1px solid var(--rule-strong);border-radius:var(--r);padding:17px 19px 15px; } .intro__controls .ttl{ margin:0 0 13px;font-family:"JetBrains Mono",monospace;font-size:10.5px; letter-spacing:.16em;text-transform:uppercase;color:var(--accent); } .intro__controls dl{display:grid;grid-template-columns:auto 1fr;gap:10px 15px;margin:0;align-items:baseline} .intro__controls dt{display:flex;gap:4px} .intro__controls dt kbd{ font:500 10.5px/1 "JetBrains Mono",monospace;color:var(--fg); background:var(--bg-soft);border:1px solid var(--rule-strong); border-bottom-width:2px;border-radius:3px;padding:4px 6px; } .intro__controls dd{margin:0;font-size:12.5px;line-height:1.45;color:var(--fg-mid)} .intro__controls .hint{ margin:14px 0 0;padding-top:13px;border-top:1px solid var(--rule); font-size:11.5px;line-height:1.6;color:var(--fg-dim); } .intro__controls .touch-only{display:none} @media(hover:none) and (pointer:coarse){ .intro__controls dt.touch-only{display:flex} .intro__controls dd.touch-only{display:block} } @media(max-height:560px){ .intro__controls .hint{display:none} .intro__controls{padding:13px 15px;gap:7px} .intro__controls dl{gap:7px 12px} } /* project card that appears when you pull up to a marker */ .intro__card{ position:absolute;left:50%;bottom:clamp(16px,3vw,26px);transform:translateX(-50%) translateY(10px); z-index:3;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease; background:var(--bg-soft);border:1px solid var(--accent);border-radius:var(--r); padding:14px 22px;text-align:center;max-width:min(92vw,420px); } .intro__card.on{opacity:1;transform:translateX(-50%)} .intro__card-title{font-size:16px;font-weight:600;letter-spacing:-.015em;margin:0 0 5px;color:var(--fg)} .intro__card-sub{margin:0;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.05em;color:var(--fg-dim)} /* pickups, milestones, the upgrade */ .intro__toast{ position:absolute;top:calc(clamp(16px,3vw,30px) + 62px);left:50%; transform:translateX(-50%) translateY(-8px); z-index:4;opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease; background:rgba(8,9,10,.92);backdrop-filter:blur(10px); border:1px solid var(--accent);border-radius:var(--r); padding:12px 20px;text-align:center;max-width:min(92vw,520px); font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.06em;color:var(--accent); } .intro__toast.on{opacity:1;transform:translateX(-50%)} /* start screen */ .intro__start{ position:absolute;inset:0;z-index:5;display:grid;place-content:center;justify-items:center; gap:22px;text-align:center;padding:80px 24px 24px; background:rgba(8,9,10,.82);backdrop-filter:blur(4px); transition:opacity .3s ease,visibility .3s; } .intro__start.gone{opacity:0;visibility:hidden;pointer-events:none} .intro__eyebrow{ margin:0;font-family:"JetBrains Mono",monospace;font-size:11.5px;letter-spacing:.18em; text-transform:uppercase;color:var(--accent); } .intro__start h1{ font-size:clamp(30px,6vw,60px);font-weight:600;letter-spacing:-.035em; line-height:1.02;margin:0;max-width:16ch; } .intro__start .sub{ margin:0;font-size:15.5px;line-height:1.6;color:var(--fg-mid);max-width:46ch; } .intro__keys{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:0} .intro__keys span{ font-family:"JetBrains Mono",monospace;font-size:11.5px;letter-spacing:.05em;color:var(--fg-dim); border:1px solid var(--rule-strong);border-radius:var(--r);padding:8px 13px; } .intro__keys b{color:var(--fg);font-weight:500} .intro__cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center} .intro__note{ margin:0;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.05em; color:var(--fg-dim);line-height:1.8;max-width:44ch; border-top:1px solid var(--rule);padding-top:16px; } .intro__note b{color:var(--fg-mid);font-weight:500} /* touch d-pad */ .intro__pad{ display:none;position:absolute;right:clamp(14px,3vw,26px);bottom:clamp(80px,14vw,110px);z-index:3; grid-template-columns:repeat(3,54px);grid-template-rows:repeat(2,54px);gap:8px; } .intro__pad button{ background:rgba(8,9,10,.8);border:1px solid var(--rule-strong);border-radius:var(--r); color:var(--fg);font-size:17px;display:grid;place-items:center; -webkit-user-select:none;user-select:none;touch-action:none; } .intro__pad button:active{background:var(--accent);color:var(--on-accent);border-color:var(--accent)} .intro__pad .sp{visibility:hidden} @media(hover:none) and (pointer:coarse){ .intro__pad{display:grid} } @media(max-height:520px){ .intro__start{gap:14px;padding-top:64px} .intro__note{display:none} } /* resume pill — appears after you pop out of the game into a project */ .resume{ position:fixed;right:clamp(14px,3vw,26px);bottom:clamp(14px,3vw,26px);z-index:180; display:flex;align-items:stretch; opacity:0;transform:translateY(10px); transition:opacity .26s ease,transform .26s ease; border:1px solid var(--accent);border-radius:var(--r);overflow:hidden; background:var(--bg-soft);box-shadow:0 12px 32px rgba(0,0,0,.5); } .resume.on{opacity:1;transform:none} .resume__go{ display:flex;align-items:center;gap:11px;cursor:pointer; background:none;border:none;color:var(--fg);padding:13px 16px;text-align:left; } .resume__go:hover{background:rgba(90,180,236,.08)} .resume__go svg{width:11px;height:11px;flex:none;color:var(--accent)} .resume__go .lbl{font:500 13px/1.35 "JetBrains Mono",monospace;letter-spacing:.03em} .resume__go .resume__stat{display:block;font-size:10.5px;color:var(--fg-dim);margin-top:4px;letter-spacing:.05em} .resume__go kbd{ font:500 10.5px/1 "JetBrains Mono",monospace;color:var(--fg-dim); border:1px solid var(--rule-strong);border-radius:3px;padding:4px 6px;margin-left:2px; } .resume__x{ cursor:pointer;background:none;border:none;border-left:1px solid var(--rule); color:var(--fg-dim);padding:0 13px;font-size:14px;line-height:1; } .resume__x:hover{color:var(--fg);background:rgba(255,255,255,.04)} @media(max-width:560px){ .resume__go{padding:11px 13px} .resume__go .lbl{font-size:12px} .resume__go kbd{display:none} } /* nav button that replays it — hidden wherever the game doesn't run */ @media(max-width:860px){ .navdrive{display:none!important} } @media(hover:none) and (pointer:coarse){ .navdrive{display:none!important} } .navdrive{ background:none;border:none;cursor:pointer;padding:6px 0; font:500 13.5px/1 "JetBrains Mono",monospace;letter-spacing:.04em;color:var(--fg-dim); } .navdrive:hover{color:var(--accent)} /* ============================================================ MOBILE REFINEMENTS ============================================================ */ @media(max-width:640px){ body{--gutter:20px} /* show the whole hero render instead of a tall centre crop */ .heroshot img{height:auto;aspect-ratio:16/9;object-position:center} .heroshot::after{display:none} .heroshot figcaption{ position:static;padding:10px 14px 12px; border-top:1px solid var(--rule);background:var(--bg-soft); font-size:10.5px;line-height:1.5; } /* thumbnail captions have very little room at three across */ .trio figcaption{padding:7px 8px;font-size:10px;letter-spacing:.02em;line-height:1.4} .pair figcaption{padding:8px 10px;font-size:10.5px} .proj .problem{font-size:16px} .meta .k{min-width:52px} } /* ---------- print ---------- */ @media print{ .nav,.lb,.heroshot,.contact .actions{display:none} body{background:#fff;color:#000} }