/* jakubsuva.com - the hub, and the two placeholder project pages.
   ------------------------------------------------------------
   Paper, ink, four accents. Chunky ink borders with a solid offset shadow,
   a marker highlight behind a few words, a rotated sticker or two. Bricolage
   Grotesque for anything that leads, Figtree for everything else.

   Krunch and Rootout keep their own look under /krunch/ and /rootout/ - this
   file is deliberately not loaded there. */

:root{
  --ink:#1B1A17;
  --paper:#FFFDF6;
  --yellow:#FFC93C;
  --coral:#FF5233;
  --blue:#2B50E8;
  --green:#1E6B50;
  --purple:#8B6FD8;
  --soft:rgba(27,26,23,.66);
  --wrap:1140px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
/* On a wide monitor the page is a sheet: it stops at 1440px and sits centred
   on a calmer ground with an ink edge. Only from 1600px, so the ground is
   never a thin sliver that looks like a mistake. */
@media(min-width:1600px){
  html{background:#EDE8DA}
  body{max-width:1440px;min-height:100vh;border-inline:3px solid var(--ink)}
}

body{
  overflow-x:clip;margin:0 auto;background:var(--paper);color:var(--ink);
  font-family:"Figtree",system-ui,-apple-system,sans-serif;
  font-size:17.5px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
p{max-width:62ch}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
h1,h2,h3,.disp{
  font-family:"Bricolage Grotesque","Figtree",sans-serif;
  font-weight:800;font-variation-settings:"wdth" 88;
  line-height:.98;letter-spacing:-.025em;margin:0;
}
h1{font-size:clamp(2.5rem,6.6vw,5rem);line-height:.94;max-width:20ch}
/* A highlighted phrase stays on one line, and a wrapped headline gets enough
   leading that the highlight never touches the line above it. */
h1 .mark{white-space:nowrap}
@media(max-width:900px){h1{line-height:1.06}}
h2{font-size:clamp(2rem,4.6vw,3.4rem)}
h3{font-size:1.3rem;line-height:1.1;letter-spacing:-.015em}
strong{font-weight:800}

/* marker highlight */
.mark{
  display:inline;padding:.02em .16em;margin:0 -.04em;
  background:var(--yellow);box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.mark-c{background:var(--coral)}
/* rotated sticker */
.sticker{
  display:inline-block;background:var(--yellow);color:var(--ink);
  border:2.5px solid var(--ink);border-radius:999px;
  padding:9px 18px;font-weight:800;font-size:.95rem;
  transform:rotate(-3deg);box-shadow:3px 3px 0 var(--ink);
}
.sticker-c{background:var(--coral)}
.sticker-b{background:var(--blue);color:var(--paper)}
.sticker-g{background:var(--green);color:var(--paper)}
/* chunky button */
.btn{
  display:inline-block;background:var(--green);color:var(--paper);
  text-decoration:none;font-weight:800;font-size:1.05rem;
  padding:16px 28px;border:3px solid var(--ink);border-radius:14px;
  box-shadow:5px 5px 0 var(--ink);
}
.btn:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--ink)}
.btn-c{background:var(--coral);color:var(--ink)}
.btn-y{background:var(--yellow);color:var(--ink)}
.btn-p{background:var(--paper);color:var(--ink)}

/* header */
.top{padding:18px 0;border-bottom:3px solid var(--ink)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.logo{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.35rem;letter-spacing:-.03em;text-decoration:none}
.logo em{font-style:normal;color:var(--coral)}
.dots{display:flex;gap:7px}
.dots i{width:13px;height:13px;border-radius:50%;border:2px solid var(--ink);display:block}
.dots i:nth-child(1){background:var(--coral)}
.dots i:nth-child(2){background:var(--yellow)}
.dots i:nth-child(3){background:var(--blue)}
.dots i:nth-child(4){background:var(--green)}

/* hero */
.hero{padding:clamp(28px,4vw,56px) 0 clamp(20px,2.6vw,32px)}
.hero .lede{font-size:clamp(1.08rem,1.6vw,1.28rem);margin:24px 0 0;max-width:52ch;font-weight:500}
.hero-act{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:32px}

/* the four icons where a photo would go */
.shelf-hold{padding:clamp(10px,1.6vw,20px) 0 clamp(20px,2.6vw,34px)}
.shelf{display:grid;grid-template-columns:repeat(4,minmax(0,132px));gap:clamp(14px,2.4vw,28px);position:relative;padding:6px 7px 10px 0}
.shelf a{display:block;width:100%;aspect-ratio:1;border:3px solid var(--ink);border-radius:26%;overflow:hidden;box-shadow:7px 7px 0 var(--sh,var(--ink));background:var(--paper);transition:transform .16s ease}
.shelf a img{width:100%;height:100%;object-fit:cover}
.shelf a:nth-child(1){--sh:var(--green);transform:rotate(-3deg)}
.shelf a:nth-child(2){--sh:var(--purple);transform:rotate(2deg)}
.shelf a:nth-child(3){--sh:var(--coral);transform:rotate(-1.5deg)}
.shelf a:nth-child(4){--sh:var(--blue);transform:rotate(2.5deg)}
.shelf a:hover{transform:translate(-3px,-3px) rotate(0)}
@media (prefers-reduced-motion:reduce){.shelf a{transition:none}.shelf a:hover{transform:none}}

/* marquee */
.band{background:var(--blue);color:var(--paper);border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);overflow:hidden;padding:13px 0}
.band-run{display:flex;width:max-content;animation:run 78s linear infinite}
.band-run span{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.15rem;
  letter-spacing:-.02em;padding:0 22px;white-space:nowrap;
}
.band-run span b{color:var(--yellow);font-weight:800}
@keyframes run{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.band-run{animation:none}}

/* sections */
section{padding:clamp(34px,4.2vw,58px) 0}
.sec-head{margin-bottom:clamp(18px,2.4vw,30px);max-width:34ch}
.sec-head p{margin:14px 0 0;font-weight:500}
.on-yellow{background:var(--yellow)}
.on-green{background:var(--green);color:var(--paper)}
.on-ink{background:var(--ink);color:var(--paper)}
.on-coral{background:var(--coral)}
.rule-top{border-top:3px solid var(--ink)}

/* hand-drawn underline */
.squig{
  display:block;width:clamp(130px,36%,250px);height:13px;margin:11px 0 0;
  fill:none;stroke:var(--coral);stroke-width:3.4;stroke-linecap:round;overflow:visible;
}
.on-yellow .squig{stroke:var(--ink)}
.on-ink .squig{stroke:var(--yellow)}
.on-green .squig{stroke:var(--yellow)}
.on-coral .squig{stroke:var(--ink)}

/* project cards */
.work{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
@media(max-width:780px){.work{grid-template-columns:1fr}}
.card{
  --sh:var(--ink);
  position:relative;display:flex;flex-direction:column;
  background:var(--paper);border:3px solid var(--ink);border-radius:18px;
  padding:21px 21px 23px;box-shadow:6px 6px 0 var(--sh);
  transition:transform .16s ease,box-shadow .16s ease;
}
.card:nth-child(1){--sh:var(--green)}
.card:nth-child(2){--sh:var(--purple)}
.card:nth-child(3){--sh:var(--coral)}
.card:nth-child(4){--sh:var(--blue)}
.card:hover{transform:rotate(-.7deg) translate(-3px,-3px);box-shadow:10px 10px 0 var(--sh)}
.card:nth-child(even):hover{transform:rotate(.7deg) translate(-3px,-3px)}
@media (prefers-reduced-motion:reduce){
  .card{transition:none}
  .card:hover,.card:nth-child(even):hover{transform:none}
}
.card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px}
.chip{
  width:64px;height:64px;border:3px solid var(--ink);border-radius:18px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;flex:none;
  transform:rotate(-4deg);background:var(--paper);
}
.chip img{width:100%;height:100%;object-fit:cover}
.card:nth-child(even) .chip{transform:rotate(4deg)}
.status{
  display:inline-block;font-weight:800;font-size:.82rem;letter-spacing:.01em;
  background:var(--yellow);border:2px solid var(--ink);border-radius:999px;padding:4px 11px;white-space:nowrap;
}
.status-b{background:var(--blue);color:var(--paper)}
.status-g{background:var(--green);color:var(--paper)}
.status-p{background:var(--paper)}
.card h3{margin-bottom:9px;font-size:1.55rem}
.card h3 a{text-decoration:none}
.card h3 a::after{content:"";position:absolute;inset:0;border-radius:18px}
.card p{margin:0;font-size:1.01rem;color:var(--soft)}
.card .pay{margin-top:12px;font-weight:800;color:var(--ink);font-size:1rem}
.card .go{margin-top:auto;padding-top:18px;font-weight:800;font-size:1rem}
.card .go span{display:inline-block;border-bottom:3px solid var(--sh);padding-bottom:1px}

/* contact */
.mail{
  display:inline-block;margin-top:20px;font-family:"Bricolage Grotesque",sans-serif;
  font-weight:800;font-size:clamp(1.3rem,3.6vw,2.4rem);letter-spacing:-.035em;
  text-decoration:none;background:var(--paper);border:3px solid var(--ink);
  border-radius:16px;padding:10px 22px;box-shadow:6px 6px 0 var(--ink);
  overflow-wrap:anywhere;
}
.mail:hover{transform:translate(2px,2px);box-shadow:4px 4px 0 var(--ink)}
.also{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.also span,.also a{font-weight:700;font-size:.96rem;background:var(--paper);border:2.5px solid var(--ink);border-radius:999px;padding:6px 15px;text-decoration:none}
.foot{background:var(--ink);color:rgba(255,253,246,.7);padding:22px 0;font-size:.9rem}
.foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 16px}
.foot a{text-underline-offset:4px}
.todo{background:rgba(43,80,232,.16);box-shadow:0 2px 0 var(--blue);padding:1px 4px}