/* janmikes.cz — shared styles for every page */

@font-face{
  font-family:"Hanken Grotesk"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(/assets/fonts/hanken-grotesk-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:"Hanken Grotesk"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(/assets/fonts/hanken-grotesk-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:"JetBrains Mono"; font-style:normal; font-weight:400 500; font-display:swap;
  src:url(/assets/fonts/jetbrains-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;
}
@font-face{
  font-family:"JetBrains Mono"; font-style:normal; font-weight:400 500; font-display:swap;
  src:url(/assets/fonts/jetbrains-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;
}

:root{
  --paper:#ffffff;
  --ink:#141518;
  --muted:#61656d;
  --rule:#e3e4e8;
  --tint:#f5f6f8;
  --accent:#2f3fbf;

  --sans:"Hanken Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --label:11rem;
  --measure:42rem;
  --gutter:clamp(1rem,4vw,2.5rem);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0f1012; --ink:#e8e9eb; --muted:#969aa3; --rule:#25272c; --tint:#16171a; --accent:#9aa6ff;
  }
}
:root[data-theme="dark"]{
  --paper:#0f1012; --ink:#e8e9eb; --muted:#969aa3; --rule:#25272c; --tint:#16171a; --accent:#9aa6ff;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip}
:target{scroll-margin-top:1.5rem}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 1.0625rem/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
  overflow-wrap:break-word;
}
::selection{background:var(--accent); color:var(--paper)}

a{
  color:inherit;
  text-decoration:underline;
  text-decoration-color:var(--rule);
  text-decoration-thickness:1px;
  text-underline-offset:.22em;
  transition:text-decoration-color .15s, color .15s;
}
a:hover{color:var(--accent); text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}

.skip{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
.skip:focus{position:static; width:auto; height:auto; clip-path:none; display:inline-block; padding:1rem}
.nowrap{white-space:nowrap}

.page{
  width:100%; max-width:calc(var(--label) + var(--measure) + 2rem + 2 * var(--gutter));
  margin:0 auto;
  padding:0 var(--gutter) clamp(3rem,8vh,5rem);
}

/* ---------- top bar (subpages) ---------- */
.top{padding:1.5rem 0 0}
.crumb{font:400 .8125rem var(--mono); color:var(--muted); text-decoration:none; display:inline-flex; align-items:baseline; gap:.5rem}
.crumb .name{font:600 1.0625rem/1 var(--sans); letter-spacing:-.025em; color:var(--ink)}
.crumb .hacek::after{animation:none}
.crumb:hover{color:var(--accent)}

/* ---------- hero actions ---------- */
.actions{display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1.5rem; margin:2rem 0 0}
.cta{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font:600 1rem/1 var(--sans);
  color:var(--paper); background:var(--ink); text-decoration:none;
  padding:.95rem 1.4rem;
  border-radius:999px;
  transition:background-color .15s, color .15s;
}
.cta span{display:inline-block; transition:transform .2s ease}
.cta:hover{background:var(--accent); color:var(--paper)}
.cta:hover span{transform:translateY(2px)}
.cta[href^="mailto"]:hover span{transform:translateX(3px)}
.quiet{font:400 .875rem var(--mono); color:var(--muted)}

/* ---------- intro ---------- */
.intro{
  display:grid;
  grid-template-columns:minmax(0,1fr) 10.5rem;
  gap:0 3.5rem;
  padding:clamp(3rem,10vh,6rem) 0 clamp(2.75rem,6vh,3.75rem);
  align-items:start;
}
h1{
  font:600 clamp(2.75rem,7.5vw,5.5rem)/1 var(--sans);
  letter-spacing:-.045em;
  margin:0 0 1.5rem;
}
/* The háček on "š", picked out in the accent and dropped into place on load.
   The real letter stays as transparent text (selectable, read by screen readers);
   two copies draw it: the ink body clipped to the bottom, the accent háček to the top. */
.hacek{position:relative; display:inline-block; color:transparent}
.hacek::before,.hacek::after{
  content:"\161";
  content:"\161"/"";
  position:absolute; inset:0;
}
.hacek::before{color:var(--ink); clip-path:inset(34% 0 0 0)}
.hacek::after{
  color:var(--accent);
  clip-path:inset(0 0 66% 0);
  animation:hacek-drop .75s cubic-bezier(.3,1.45,.5,1) .3s both;
}
@keyframes hacek-drop{from{opacity:0; transform:translateY(-.3em)}}
.lede{
  font:500 clamp(1.25rem,2.4vw,1.55rem)/1.4 var(--sans);
  letter-spacing:-.015em;
  max-width:36rem;
  margin:0;
}
.lede strong{
  display:inline-block; margin-bottom:.35rem;
  font-size:1.2em; font-weight:600; letter-spacing:-.025em; line-height:1.2;
}
.lede span{color:var(--muted)}
.intro__photo img{
  display:block; width:100%; height:auto;
  border-radius:3px;
  filter:grayscale(1) contrast(1.04);
  transition:filter .7s ease;
}
.intro__photo:hover img{filter:grayscale(0) contrast(1)}

/* key/value lists in mono: the spec block and the system facts */
.spec{
  display:grid; grid-template-columns:var(--label) minmax(0,1fr);
  gap:.45rem 2rem;
  margin:0;
  font:400 .8125rem/1.6 var(--mono);
  letter-spacing:-.01em;
}
.spec dt{color:var(--muted)}
.spec dd{margin:0}
.intro .spec{grid-column:1 / -1; margin-top:2.75rem}

/* A year of GitHub activity, one tick per day (generated by tools/activity.py).
   Scrubbable: assets/year.js shows the day under the pointer. */
.year{grid-column:1 / -1; margin:3rem 0 0}
.year__head{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.25rem 1.5rem;
  margin-bottom:.75rem;
  font:400 .8125rem/1.6 var(--mono); letter-spacing:-.01em; color:var(--muted);
}
.year__readout{color:var(--ink); font-variant-numeric:tabular-nums}
.pulse{display:block; width:100%; height:clamp(3.5rem,8vw,5rem); touch-action:pan-y; cursor:crosshair}
.pulse rect{transition:opacity .15s}
.pulse .a0{fill:var(--rule)}
.pulse .a1{fill:var(--muted); opacity:.65}
.pulse.is-scrubbing rect{opacity:.25}
.pulse.is-scrubbing rect.is-on{opacity:1; fill:var(--ink)}
.pulse{animation:draw 1.8s cubic-bezier(.65,0,.25,1) .45s both}
@keyframes draw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.pulse{animation:draw 1.6s cubic-bezier(.65,0,.25,1) .5s both}

/* ---------- sections ---------- */
.row{
  display:grid;
  grid-template-columns:var(--label) minmax(0,var(--measure));
  gap:.75rem 2rem;
  padding:2.75rem 0 3rem;
  border-top:1px solid var(--rule);
}
.row h2{
  margin:0; padding-top:.2rem;
  font:400 .8125rem/1.6 var(--mono);
  letter-spacing:-.01em;
  color:var(--muted);
  position:sticky; top:1.75rem; align-self:start;
}
.prose p{margin:0 0 1rem}
.prose p:last-child{margin-bottom:0}
p.prose{margin:0 0 1.5rem}

/* positions: a claim, then the evidence for it */
.positions{list-style:none; margin:0; padding:0}
.positions li + li{margin-top:1.6rem}
.positions b{
  display:block;
  font-weight:600; font-size:1.1875rem; letter-spacing:-.015em; line-height:1.35;
  margin-bottom:.3rem;
}
.positions span{color:var(--muted)}

/* selected system */
.system h3{
  font:600 1.75rem/1.2 var(--sans);
  letter-spacing:-.03em;
  margin:0 0 .6rem;
}
.list{list-style:none; margin:0; padding:0}
.list li{
  display:grid;
  grid-template-columns:7.5rem minmax(0,1fr);
  gap:.15rem 1.5rem;
  align-items:baseline;
  padding:.8rem 0;
  border-bottom:1px solid var(--rule);
}
.list li:first-child{padding-top:0}
.list li > a{font-weight:600}
/* external links in lists: an arrow slides in on hover */
.list li > a::after{
  content:"\2197";
  content:"\2197"/"";
  display:inline-block; margin-left:.3em;
  font-weight:400; color:var(--accent);
  opacity:0; transform:translate(-.3em,.1em);
  transition:opacity .2s, transform .2s;
}
.list li > a:hover::after,.list li > a:focus-visible::after{opacity:1; transform:none}
.list li > span{color:var(--muted)}

.list--talks li{grid-template-columns:5.5rem minmax(0,1fr)}
.list--talks time{grid-row:span 2; color:var(--muted); font:400 .8125rem/1.9 var(--mono)}
.list--talks li > a{font-weight:500}
.list--talks span{font-size:.9375rem}

.aside{margin:1.25rem 0 0; font-size:.9375rem; color:var(--muted)}

.contact{
  display:grid; grid-template-columns:6rem minmax(0,1fr);
  gap:.4rem 1.5rem; margin:0;
}
.contact dt{color:var(--muted); font:400 .8125rem/1.95 var(--mono)}
.contact dd{margin:0; overflow-wrap:anywhere}

/* ---------- subpages ---------- */
.title{padding:clamp(2rem,6vh,4rem) 0 clamp(2.5rem,6vh,3.5rem)}
.title h1{font-size:clamp(2.5rem,6vw,3.75rem); margin-bottom:1.25rem}

.talk + .talk{margin-top:2.75rem}
.talk{display:grid; grid-template-columns:12rem minmax(0,1fr); gap:0 1.75rem; align-items:start}
.talk__thumb{display:block; border-radius:4px; overflow:hidden; outline:1px solid var(--rule); outline-offset:-1px}
.talk__thumb img{display:block; width:100%; height:auto; aspect-ratio:16/9; transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.talk__thumb:hover img{transform:scale(1.035)}
.talk__meta{margin:0 0 .4rem; color:var(--muted); font:400 .8125rem/1.6 var(--mono); letter-spacing:-.01em}
.talk h3{
  font:600 1.4rem/1.3 var(--sans);
  letter-spacing:-.025em;
  margin:0 0 .5rem;
}
.talk p{margin:0}
.talk__links{display:flex; flex-wrap:wrap; gap:.25rem 1.5rem; margin-top:.75rem !important}

/* ---------- article (talk write-ups) ---------- */
.article{max-width:40rem; padding-bottom:1rem}
.article .meta{margin:0 0 1rem; color:var(--muted); font:400 .8125rem/1.6 var(--mono); letter-spacing:-.01em}
.article h1{font-size:clamp(2.25rem,5.5vw,3.5rem); line-height:1.05; margin-bottom:1.25rem}
.article h2{margin:3rem 0 .9rem; font:600 1.4rem/1.3 var(--sans); letter-spacing:-.025em}
.article p,.article ol,.article ul{margin:0 0 1.15rem}
.article ol,.article ul{padding-left:1.25rem}
.article li{margin-bottom:.5rem}
.article li::marker{color:var(--muted); font-family:var(--mono); font-size:.85em}
.article li b{font-weight:600}
.article pre{
  margin:1.5rem 0; padding:1.1rem 1.25rem; overflow-x:auto;
  background:var(--tint); border-radius:4px;
  font:400 .8125rem/1.6 var(--mono); letter-spacing:-.01em;
}
.article code{font:400 .875em var(--mono)}
.article pre code{font-size:inherit}
.article blockquote{margin:1.75rem 0; padding:0 0 0 1.25rem; border-left:2px solid var(--ink); font:500 1.25rem/1.4 var(--sans); letter-spacing:-.015em}
.article .links{display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--rule)}

/* ---------- small screens ---------- */
@media (max-width:52rem){
  .row{grid-template-columns:minmax(0,1fr); padding:2.25rem 0 2.5rem}
  .row h2{position:static}
  .spec{grid-template-columns:7.5rem minmax(0,1fr); gap:.45rem 1.25rem}
}
@media (max-width:40rem){
  /* name and a small portrait share the first row; everything else spans below */
  .intro{grid-template-columns:minmax(0,1fr) 4.5rem; column-gap:1.25rem; align-items:center; padding-top:2.25rem}
  .intro__text{display:contents}
  .intro h1{grid-column:1; grid-row:1; margin:0; font-size:clamp(2.25rem,11vw,2.9rem)}
  .intro__photo{grid-column:2; grid-row:1}
  .intro__photo img{aspect-ratio:1; object-fit:cover; object-position:50% 22%}
  .intro .lede{grid-column:1 / -1; margin-top:1.5rem; font-size:1.2rem}
  .actions{grid-column:1 / -1; gap:.9rem 1.5rem; margin-top:1.75rem}
  .actions .cta{flex:1 0 100%}
  .spec{grid-template-columns:minmax(0,1fr); gap:0}
  .spec dd{margin-bottom:.65rem}
  .list li,.list--talks li{grid-template-columns:minmax(0,1fr)}
  .list--talks time{grid-row:auto; line-height:1.6}
  .talk{grid-template-columns:minmax(0,1fr)}
  .talk__thumb{margin-bottom:1rem}
}

/* ---------- typography details ---------- */
h1,h2,h3,.lede,.positions b{text-wrap:balance}
p,.positions span,.list span{text-wrap:pretty}

/* ---------- focus: hovering one item in a list dims its siblings ---------- */
@media (hover:hover){
  .list li > *,.talk{transition:opacity .25s ease}
  .list:has(li:hover) li:not(:hover) > *{opacity:.4}
  .row > div:has(> .talk:hover) > .talk:not(:hover){opacity:.4}
}

/* ---------- motion ---------- */
/* cross-document crossfade between home and talks */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.25s}
/* the name glides between the home hero and the subpage wordmark */
.name{display:inline-block; view-transition-name:jm-name}
::view-transition-group(jm-name){animation-duration:.45s; animation-timing-function:cubic-bezier(.4,0,.2,1)}

/* content eases in as it scrolls into view; CSS only, skipped where unsupported */
@supports (animation-timeline: view()){
  .positions > li,.list > li,.row > div > :not(.list),.row > .prose{
    animation:rise linear both;
    animation-timeline:view();
    animation-range:entry 0% entry 45%;
  }
}
@keyframes rise{from{opacity:0; transform:translateY(1.25rem)}}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none !important; animation:none !important}
  html{scroll-behavior:auto}
  @view-transition{navigation:none}
}

/* ---------- print: the page becomes a clean, printable CV ---------- */
@media print{
  @page{margin:14mm 16mm}
  :root:root:root{--paper:#fff; --ink:#000; --muted:#555; --rule:#d5d5d5; --accent:#000}
  html,body{font-size:9.5pt; line-height:1.45}
  *,*::before,*::after{animation:none !important; transition:none !important}
  .skip,.actions,.year,.talk__thumb,.top,.aside a[href="/slides/"],#contact > div > p.prose{display:none}
  .page{max-width:none; padding:0}
  .intro{grid-template-columns:minmax(0,1fr) 26mm; gap:0 10mm; padding:0 0 6mm}
  h1{font-size:26pt; margin-bottom:3mm}
  .lede{font-size:12pt; max-width:none}
  .intro .spec{margin-top:5mm}
  .row{grid-template-columns:30mm minmax(0,1fr); gap:0 6mm; padding:4mm 0}
  .row h2{position:static; break-after:avoid}
  .positions li,.list li,.talk{break-inside:avoid}
  .positions li + li{margin-top:2.5mm}
  .positions b{font-size:10.5pt}
  .list li{padding:1.5mm 0}
  a{text-decoration:none}
  /* links don't work on paper: print where each product lives */
  .list li > a::after{content:none}
  .list li > a[data-host]::after{content:attr(data-host); display:block; margin:0; opacity:1; transform:none; font:400 7.5pt/1.4 var(--mono); color:var(--muted)}
}