/* ============================================================ kolsek.pages.dev - shared stylesheet Type: IBM Plex Sans (UI, body) + IBM Plex Mono (data, labels, code). Colour: one accent per project. Here: industrial teal. Theme: light is the default; [data-theme] on wins over the OS. ============================================================ */ @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:100 700;font-display:swap; src:url(fonts/ibm-plex-sans-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:100 700;font-display:swap; src:url(fonts/ibm-plex-sans-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap; src:url(fonts/ibm-plex-mono-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap; src:url(fonts/ibm-plex-mono-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} :root{ --bg:#f7f7f4; --surface:#ffffff; --sunk:#f1f1ec; --text:#161616; --muted:#5f6059; --border:#d9dad4; --accent:#0d5f68; --accent-ink:#ffffff; --accent-soft:#e6f0f1; --sans:'IBM Plex Sans',system-ui,-apple-system,"Segoe UI",sans-serif; --mono:'IBM Plex Mono',ui-monospace,Consolas,monospace; --text-xs:0.75rem; --text-sm:0.875rem; --text-base:1rem; --text-lg:1.125rem; --text-xl:clamp(1.35rem,2vw,1.6rem); --text-2xl:clamp(1.8rem,4vw,2.6rem); --text-hero:clamp(2.4rem,6vw,4rem); --r-sm:6px; --r-md:10px; --r-lg:16px; --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; } :root[data-theme="dark"]{ --bg:#111210; --surface:#191a17; --sunk:#141513; --text:#f2f2ee; --muted:#a9aaa4; --border:#34352f; --accent:#5ec6d1; --accent-ink:#0d1214; --accent-soft:#1c2a2c; } :root[data-theme="light"]{color-scheme:light} :root[data-theme="dark"]{color-scheme:dark} *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ background:var(--bg);color:var(--text);font-family:var(--sans); font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased; } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} } img{max-width:100%;height:auto;display:block} ::selection{background:var(--accent);color:var(--accent-ink)} :where(a,button,input,summary,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-sm)} a{color:var(--accent);text-underline-offset:3px;text-decoration-thickness:1px} h1,h2,h3,h4{text-wrap:balance;letter-spacing:-.015em;line-height:1.15;font-weight:600} p{max-width:68ch} .mono{font-family:var(--mono)} .wrap{max-width:1120px;margin-inline:auto;padding-inline:var(--s5)} .skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent);color:var(--accent-ink);padding:var(--s3) var(--s4);border-radius:var(--r-sm)} .skip:focus{left:var(--s4);top:var(--s2)} /* ---------- header ---------- */ .site-head{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)} .site-head .wrap{display:flex;align-items:center;gap:var(--s4);min-height:64px;flex-wrap:wrap;padding-block:var(--s2)} .brand{font-family:var(--mono);font-size:var(--text-sm);letter-spacing:.06em;text-decoration:none;color:var(--text);white-space:nowrap} .brand b{color:var(--accent);font-weight:400} .site-nav{display:flex;align-items:center;gap:var(--s5);margin-left:auto;flex-wrap:wrap} .site-nav a{font-size:var(--text-sm);text-decoration:none;color:var(--muted)} .site-nav a:hover,.site-nav a:focus-visible{color:var(--accent)} .controls{display:flex;align-items:center;gap:var(--s2)} /* SL | EN segmented control - the same element on every project */ .lang{display:inline-flex;height:38px;border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden;background:var(--bg)} .lang a{display:flex;align-items:center;padding-inline:var(--s3);font-family:var(--mono);font-size:var(--text-xs);letter-spacing:.06em;text-decoration:none;color:var(--muted)} .lang a+a{border-left:1px solid var(--border)} .lang a:hover{color:var(--text);background:var(--sunk)} .lang a[aria-current="page"]{background:var(--surface);color:var(--text);font-weight:600} :root[data-theme="dark"] .lang a[aria-current="page"]{background:var(--accent-soft);color:var(--text)} .icon-btn{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg);color:var(--muted);cursor:pointer;transition:color .15s,border-color .15s} .icon-btn:hover{color:var(--accent);border-color:var(--accent)} .icon-btn svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round} .icon-btn .sun{display:none} :root[data-theme="dark"] .icon-btn .sun{display:block} :root[data-theme="dark"] .icon-btn .moon{display:none} .btn{display:inline-flex;align-items:center;gap:var(--s2);font-size:var(--text-sm);font-weight:600;text-decoration:none; border-radius:var(--r-sm);padding:10px 18px;border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink); transition:background .15s,color .15s,border-color .15s} .btn:hover{background:transparent;color:var(--accent)} .btn.ghost{background:transparent;color:var(--text);border-color:var(--border)} .btn.ghost:hover{border-color:var(--accent);color:var(--accent)} @media(max-width:900px){.site-nav a.hide-sm{display:none}} /* ---------- hero ---------- */ .hero{padding-block:var(--s9) var(--s8)} .eyebrow{font-family:var(--mono);font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .hero h1{font-size:var(--text-hero);font-weight:600;margin:var(--s4) 0 var(--s5);letter-spacing:-.03em} .hero .intro{font-size:var(--text-lg);margin-bottom:var(--s5);max-width:58ch} .hero .sub{color:var(--muted);margin-bottom:var(--s6);max-width:58ch} .cta{display:flex;gap:var(--s3);flex-wrap:wrap} @media(max-width:900px){.hero{padding-block:var(--s7)}} /* ---------- capability strip ---------- */ .strip{border-block:1px solid var(--border);background:var(--surface);padding-block:var(--s5)} .strip .wrap{display:grid;grid-template-columns:180px minmax(0,1fr);gap:var(--s5);align-items:start} .strip h2{font-family:var(--mono);font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:400;padding-top:3px} .strip ul{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s1) var(--s2)} .strip li{font-family:var(--mono);font-size:var(--text-xs);border:1px solid var(--border);border-radius:var(--r-sm);padding:4px 10px;background:var(--bg)} @media(max-width:820px){.strip .wrap{grid-template-columns:1fr;gap:var(--s3)}} /* ---------- sections ---------- */ section{padding-block:var(--s9);border-bottom:1px solid var(--border);scroll-margin-top:76px} h2.head{font-size:var(--text-2xl);margin-bottom:var(--s4);display:flex;align-items:baseline;gap:var(--s4)} h2.head .no{font-family:var(--mono);font-size:var(--text-xs);color:var(--accent);letter-spacing:.1em;flex:none} .lede{font-size:var(--text-lg);color:var(--muted);margin-bottom:var(--s7);max-width:70ch} h3.sub-head{font-family:var(--mono);font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:400; margin:var(--s8) 0 var(--s5);padding-bottom:var(--s2);border-bottom:1px solid var(--border)} h3.sub-head.first{margin-top:0} /* ---------- project cards ---------- */ .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--s5)} .card{position:relative;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);display:flex;flex-direction:column;overflow:hidden;transition:border-color .18s} .card:hover{border-color:var(--accent)} .card .txt{padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2);flex:1} .card h4{font-size:var(--text-lg);font-weight:600} .card h4 a{text-decoration:none;color:var(--text)} .card h4 a::after{content:"";position:absolute;inset:0} .card h4 a:hover{color:var(--accent)} .card .kind{font-family:var(--mono);font-size:var(--text-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} .card p{font-size:var(--text-sm);color:var(--muted);flex:1;max-width:none} .card .links{font-family:var(--mono);font-size:var(--text-xs);display:flex;gap:var(--s4);flex-wrap:wrap;position:relative;z-index:1;margin-top:var(--s1)} .card .links .host{color:var(--text)} .card .links .private{color:var(--muted)} /* ---------- research ---------- */ .split{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--s8)} @media(max-width:900px){.split{grid-template-columns:1fr;gap:var(--s6)}} .split p{margin-bottom:var(--s4);color:var(--muted)} .split p strong{color:var(--text);font-weight:600} .specs{border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);padding:var(--s4);align-self:start} .specs caption{font-family:var(--mono);font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:left;padding-bottom:var(--s3)} .specs table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:var(--text-sm)} .specs th{text-align:left;font-weight:400;color:var(--muted);padding:6px 0;white-space:nowrap} .specs td{text-align:right;padding:6px 0;font-variant-numeric:tabular-nums} .note{font-size:var(--text-sm);color:var(--muted);border-left:2px solid var(--border);padding-left:var(--s4);margin-top:var(--s5)} /* ---------- process rows ---------- */ .rows{border-top:1px solid var(--border)} .rows > div{border-bottom:1px solid var(--border);padding-block:var(--s5);display:grid;grid-template-columns:250px minmax(0,1fr);gap:var(--s5)} .rows h4{font-size:var(--text-base);font-weight:600} .rows p{font-size:var(--text-sm);color:var(--muted)} @media(max-width:820px){.rows > div{grid-template-columns:1fr;gap:var(--s2)}} /* ---------- commissioned work ---------- */ .work{border-top:1px solid var(--border)} .work > article{border-bottom:1px solid var(--border);padding-block:var(--s6);display:grid;grid-template-columns:260px minmax(0,1fr);gap:var(--s6);align-items:start} .work h4{font-size:var(--text-lg);font-weight:600;margin-top:var(--s1)} .work .kind{font-family:var(--mono);font-size:var(--text-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--accent)} .work p{color:var(--muted);font-size:var(--text-sm)} .work ul{margin:var(--s3) 0 0 var(--s4);font-size:var(--text-sm);color:var(--muted)} .work li{margin-bottom:var(--s1)} @media(max-width:900px){.work > article{grid-template-columns:1fr;gap:var(--s2)}} /* ---------- contact ---------- */ .contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s8);align-items:start} @media(max-width:900px){.contact-grid{grid-template-columns:1fr;gap:var(--s6)}} .mail{font-family:var(--mono);font-size:var(--text-xl);text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:2px;color:var(--text);display:inline-block} .mail:hover{color:var(--accent)} .meta{list-style:none;font-family:var(--mono);font-size:var(--text-sm);color:var(--muted)} .meta li{display:grid;grid-template-columns:110px 1fr;gap:var(--s4);padding:8px 0;border-bottom:1px solid var(--border)} .meta li span{color:var(--text)} footer{padding-block:var(--s6) var(--s8);font-family:var(--mono);font-size:var(--text-xs);color:var(--muted)} footer .wrap{display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}